In my six months as a signal, I’ve worked with Jason F. on numerous design explorations for the new Basecamp. These sessions are always fun, and a few of them helped transform difficult problems into the UI you’re using in the final product. (One famously tricky one was the new Projects screen.) Our design process isn’t formal, but we’re fast and methodical. We scope most of our work into a week or two.

One of our recent explorations was a UI for adding groups or departments inside a company — such as the Marketing and HR groups inside Acme Widgets. This turned out to be a great example of how an exploration can produce an entirely different result than you originally expected.

Step 1: Define the problem and propose solutions

To start, we meet to talk about the problem, and sketch ideas. We each suggest some concepts and review them, trying to poke holes in our reasoning or spot any early showstoppers. This usually takes less than 30 minutes.

Step 2: Pick the ideas that are most likely to succeed

For this exploration, we had several ideas, but two stood out: a straightforward A-Z list, and a more visual circle-themed version.

Circle sketch

Knowing that we could always fall back to the list, we decided to give the circles a chance.

Step 3: Build a working prototype

Once we’ve chosen a direction, I start building a prototype, and we iterate rapidly for a few hours until it coalesces into something viable. We try different combinations and arrangements of elements to see what works, and we’re not too critical at this early stage.

After a few rounds, we landed on this two-column prototype that felt like it was getting somewhere (and with clovers!)

2-column clovers

Step 4: Back and forth refinements

If the initial design is resolved enough, we move on to more functional aspects. We have these clovers and circles, but what happens when you try to add a new group? Where does the dialog go? Does it alternate sides? And hey, isn’t it annoying if the dialog covers the list of other groups?

Dialog on the right

After grappling with the two-column layout for a while, Jason thought of simplifying to a one-column design and adding avatars. That resolved the problems with the dialog placement.


Step 5: Assess and reduce

Looking at this with fresh eyes the next day, I noticed that the clovers were dominating the company names, so I moved the company names to the top. This got us thinking, why do we even need the clovers? They’re fun, but unnecessary. So we removed them. With that change, the green circles might as well go, and…we’re back to the A-Z list!

A-Z final

Step 6: Prove that your design is clear

When we review our work, the litmus test is clarity. Is this feature clear? Does it do what you expect? Does the copy explain what’s going to happen when you click something? Is there a way to accomplish this with less elements? Can we say this better, even if it takes more words to do so?

It might look like we wasted time exploring a fruitless idea. Maybe, but we also performed a proof by elimination: we proved that the A-Z list version was the clearest. We gave the other idea a fair chance to wow us, and it didn’t happen. This solidifies that the A-Z solution is the right one, and it gives us confidence in that decision.

And remember, sometimes the wacky idea is the winner!