Fog Creek

The Process of Creating Trello – Tech Talk

This week, Fog Creek turns 15. So we thought you’d be interested in hearing this Tech Talk with Justin Gallagher, a former Program Manager here at Fog Creek, now VP Product at Trello, in which he describes the process we went through in creating Trello. He starts with a few sketches in a notebook, noodling with Joel’s idea for a visual way to organize anything. He goes into detail about the important parts of the next few months, right up to launch at Tech Crunch Disrupt. He covers the development of the idea and initial prototype, how the team worked within Fog Creek, the benefits of setting out a clear vision for the product and the mistakes we learned from along the way.

About Fog Creek Tech Talks

At Fog Creek, we have weekly Tech Talks from our own staff and invited guests. These are short, informal presentations on something of interest to those involved in software development. We try to share these with you whenever we can.

Content and Timings

  • Introduction (0:00)
  • UI-first Development (1:04)
  • Setting the Product Vision (4:20)
  • Getting User Feedback (5:48)
  • Iterating Quickly (7:46)
  • Mistakes We Made (11:20)

Transcript

Introduction

Justin:
We sort of sat down, and we did two thing that I thought, looking back, played a big role in what Trello would become. The two things there are – one, we tried a bunch of different UIs, so we had this, which kind of looks like Trello, but we tried a bunch of different crazy random things. I have some sketches and stuff that I’ll show you in a minute. We also sat down as a team, with Joel and Michael, and we talked a lot about what it meant. What was Trellis (this is what Trello was originally known as), what it needs to be that thing. What was it going to be in the future? What was going to guide us as we built it? We still refer back to those things constantly. I talk about those things all the time, still. I think those are really important.


“Don’t try to think of what other people are going to do in a year, just focus on what they’re going to do now”


UI-first Development

I’ll start with the UI ideas. This is a notebook from out of my office. There’s like twenty sketches, at least, and I have many others all over the place. What I was doing here, and Bobby did some of this too, was we just tried to think of, alright, given the things that we had, like this physical nature of things, and we want to show progress. We want there to be like a status that people can see. What else could it be, besides the thing that we made, what else could it be? The top left one there is this idea that things could be much freer. Might be that in a grid generally in the background, but your thing would snap to it. We had this weird circle idea, where there were eyes. You’d have the statuses across the top, and you could add them to the … each thing was like a dish. You could pile people and files and stuff on it. The bottom left one there is like things get longer, the more complete they are.

What we’re doing here is really just picking a constraint of some sort. The top one was that there was no … The constraint was a lack of a positional constraint. The second one was the constraint where there had to be a circle. Different ones, I use shape … We would pick other random things like Windows phone and old Metro things, new at the time. If we were designed for this platform, what would it look like? I have another page, at least two, and there’s another one here where it’s like masonry. There’s like this JS masonry thing, which was new and cool at the time. If we were to do a masonry type thing, what would that look like? There’s different ways for grouping cards that were a little more free-form than past ideas, what would that look like?

We took some of these ideas, and we made them into Photoshop mock-ups. They were pretty bad, but there were like … This was very quick. Those first ideas all came within, probably, an hour. We did that a few times, where it was like, just sit down and pick something and take five minutes to design an idea around that. We tried to make them into more, not pixel perfect, but mock-ups anyway.

This was the one where they could free. The idea was, within a given stage, if they were related, piled on top of each other … if there was a card that was in development but was ready to go to Q&A, you could have it overlap the border. People working on Q&A, they’re like, ‘oh that ones ready’, pull it over. This was the one where the things got a little weird. This was the masonry, where you take back the cards to the point where the cards are more like lines. They expanded.

This one sort of looks like Trello. This was the first time we had put the members on the side there. This was where the idea that you could drag a … like there would be a pile of members somewhere, and you could drag them onto cards, came from, and they would hang off the bottom. This was the one where it was circles, and you’d have these weird stages, files, and stuff. This was the first mock-up that had an activity feed on the sidebar, and also had the little green lights that tell you if people are online or not.

What I remember about this was that most of these ideas were terrible. Some of them had an interesting little bit there, forcing ourselves to think in terms of a different way of doing things, than just force ourselves out of the path we were on to try something completely different. It didn’t yield like that completely … complete change in direction, but it did give us some good ideas, that we might not have otherwise thought of if we were still on that same pathway.

Setting the Product Vision

The other thing I mentioned was we sat down as a team. We talked about, what does it mean to be Trello? The things that we mentioned were: it’s going to be free, it’s always to get lots of people using it and have one percent of them pay us $100 a year, and it’s on mobile, it’s on any size of thing. It’s on mobile, desktops, tablets, plasma screens, whatever. It’s a piece of work, and you can use it on all of those devices. It should be real time, was one that we were really stuck on at the beginning. Anything that ever changes, changes on every device at the same time. There’s no reloading the image.

Another thing, where we don’t have any confirmation, it should never be like, are you sure you want to delete that thing or whatever. We’ve gone away from that one since, but that was the thing. We talked a lot about only building for the latest technologies and picking technologies that were going to be great in five years, ten years. We’re not worrying about that at the moment. We have no users, so what was the point of worrying about that.

Those really informed a lot of things. The fact that we said Trello was free, and that Trello was going to be a hundred million users, meant that there was also a converse that it couldn’t just be for one specific people, couldn’t be just for software developers, wedding planners, or whatever. It had to be for everybody. That forced us to think that the features we had and the ways we approached the product. We can’t add agile story points. That’s going to, eventually, be useful to three percent of our users or something. It’s not a good use of our time right now. Maybe there’s a certain or generic way that we can solve that problem for people who want that, in a way that’s helpful to other people too.


“We just took the activity feed out of the sidebar one day. It was just gone. People screamed, immediately. We got emails, immediately”


Getting User Feedback

We iterated on the product, a little bit. We started using it internally. We had areas that create accounts, logins, and stuff like that. The next thing we did, we got a little group of users using it, which was super interesting and useful to … They were just people in our companies, our friends, people that Stack Overflow. I think we had not that many, like three hundred people total, using it. This was going to be … We talked to them a lot. We asked them things. We asked them if they were using … We looked at stats like how often are people coming back. Are they using it every day or just using it once, then going away? Are they inviting other people to their boards? Is that part working? Not even from a technical sense, but do people want to invite other people to their boards?

There was a law firm that used Trello early on. We went there, and we sat with them. We talked about how we’re using it. We saw what they were doing. That actually made us build due dates, right away, because they were like, we’re struggling with this part. We have dates, and we had to do things for certain times. We could totally be better there. We built that feature, at that point. It was always something we thought about, that we added right away, because it helped them immediately. We thought it was something that could be, generally, useful in almost anything. Most work has some kind of due date, of some sort, at some point. Just talking to them and being there was super useful.

It was also interesting … Of course I say again, going back to the other thing, think about who are our users and who are not our users. So Trello is for everybody. The other thing we used to say was, Trello is not just for software developers. It’s not a tool for software development. We way over-emphasized that because we knew our tendency as software people and developers would be to build features that we want, that are going to help us build Trello. We didn’t want to pigeon-hole it into that role early on. Having those users in a law firm has nothing to do with software development and seeing how they use it, and what they like to do.

Iterating Quickly

Joel gave us this idea for gamma rays, at the time. Joel used to always say ‘shoot gamma rays’. What he meant by that was change stuff, just change it. We would change all kinds of things, and it was great at the time. We had so few users. We had a small tight-knit team. We could move really fast. We just took the activity feed out of the sidebar one day. It was just gone. People screamed, immediately. We got emails, immediately. We only had three hundred users, and we got five emails right away. We knew immediately that, that was something people actually used and cared if it was there, so we put it right back.

We changed other things, I don’t even remember why. We did all kinds of little changes here and there. We tried to get rid of things. Nobody noticed or nobody cared. We probably just left those changes. We didn’t go back and reinstate those things. It gave us an insight, yeah we still do that. Now, the problem is we made the labels five pixels taller, and we got a hundred emails in an hour. We can’t do it the same way that we use to do it. We still do try to change things.

We had planned, applied, and gotten into TechCrunch Disrupt a few months prior to that. Having that launch deadline was actually really effective too. Having a day where we were going to have the app out that day, no matter what, was important. That forced us to do a couple things. We hired a freelancer to help us write an iOS app. He stopped calling us back at some point. That was one of the things we had said, Trello works on any size screen, and we didn’t have a mobile app. We had six weeks to go, so we just made one … I made one, an iOS app that was terrible at the beginning. It was read-only, and it didn’t do anything besides look at your data. That was important. We knew that we had this deadline. We had that mobile app, so it had to be a crappy one, but we were going to have one and get that there. That was one of our first reference points and this date’s coming up.

A few weeks leading up to that, we cut scope a lot. We had plans for different features that we were going to build, but we’re not building them right now. Daniel and Brett spent a lot of time making sure that if we got 100,000 users on the first day, it wasn’t going to crash and fall apart. We had some features in there.

Audience Member:
Did it crash?

Justin:
A little bit. Not too bad though, it was pretty good. It was mostly up. We had some plan features on there, and public boards where it showed you how many people were viewing the board at the same time. We thought this would be an awesome demo, like when Joel was doing the Disrupt demo, and it would show thousands of people were looking at the board, hopefully. Then, we created a test and then we panicked that that was not going to work at high scale. We ended up taking that out. These were all … It gave us a thing to shoot for, it’s very easy to just keep going, knowing, and adding stuff and having that date coming up was very useful.

It also forced us to look at … to step back again and look at the new user flow, we’re going to have at least some amount of attention on that day. We went back and looked at the new sign-up flow. We didn’t have any sign-up. There was no sign-up for Trello at the time. You just had to be given an account. Essentially, you could be invited by an existing member, or you were given an account. We did a page where you can sign-up. Then we had to evaluate that flow. That’s where the idea of the Welcome Board came from, which still exists. You sign up, you get the board that tells you how to use Trello, that’s where that came from. When you signed up, it was awful, you just got dumped into nothing, and you didn’t know what to do.

Again, that deadline forced us to think about what’s happening on this date, that’s different, and what do we need to do to prepare for it. This is just a history of what we did. I’m not saying it’s the only way to make a product, or the best way or anything. Those are some of the things that we did, that I thought looking back, were useful.


“We tried to do too much, to be too clever early on”


Mistakes We Made

We still did make a ton of mistakes. We way over-thought some stuff. Checklists are still way over-engineered here. We had this crazy idea that you had a checklist and it lived on the board. Then you have this pile of checklists on the board, and at any given time, you could take one and put it on a card. Then you might want this checklist on another card, so you can go back and put it on there. We way over engineered this, so it was terrible. We had to re-engineer it like five times since.

I would say, don’t try to think of what other people are going to do in a year, just focus on what they’re going to do now. We made that mistake multiple times. We way over invented in a lot of cases. The key to Trello was the UI, the visual nature, and the interactions that you have there. We invented our own terminology for everything, that we’re now trying to back up a little bit on. Things like ‘organization’ is a way confusing word, even members, like that’s confusing to people. We got very overly clever with the business model, initially. The first idea we tried to implement, but we started thinking that like all these power-ups that you get a dollar for, and it was, back then, monthly or something. I don’t know, we tried to do too much, to be too clever early on there. Over thinking that stuff and over planning for the future was something we still had to back-track on, recently.

Finally, we said that we made the decision that we were not building Trello just for developers. We would over-ignore all feedback. The one particular thing, this is later, but with stickers. Every developer said that stickers were way too big. We kept saying, you’re a developer, of course you want everything small. You want to fit five billion lines of texts on the screen. Normal people want big stickers. We released it, the normal people said the same thing, stickers are too big and we threw the baby out with the bathwater. There were certain things that we didn’t want to build like story points, that were very developer specific. That didn’t mean, we had to discount all feedback, just because somebody was a developer. What it came down to was we just didn’t have a good way of segmenting feedback and getting a good range of feedback from people. If we had that earlier, I think it would’ve been more effective.

Those are what comes to mind as like early on and anywhere throughout the first year or two of building Tello. That kind of stuff that we thought about, that I thought, looking back, worked.