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.
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!)
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?
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!
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!
Matt Henderson
on 21 Mar 12You wrote:
“It might look like we wasted time exploring a fruitless idea.”
The right solution to any design problem can only be discovered through exploration, so there’s no wasted time there.
What we always find interesting, after having found the right solution, is reflecting on whether (and how) we could have found it faster, or more efficiently.
Jack
on 21 Mar 12Could using a list of avatars (as opposed to names) cause problems when people use a default instead of their picture? Hovering I guess shows their name but still..
Darius
on 21 Mar 12@Jack: using an avatar generator solve that case without affecting the simplicity of the solution :)
Rafael Madeira
on 22 Mar 12The final version is not very clear to me. The avatars (mostly because of their shape; jesus, their shape) send my eyes all over the place and it gets very confusing. A bunch of square images together gets solidified as a block, and processed by the brain as one thing. A bunch of round images together is always a bunch of round images together, and my eye feels the need to check every last one of them.
Is it really necessary to display the pictures of every single person in the company? (or whatever the cutoff is above 32.) And at that size? Because it doesn’t look good enough to make up for the loss in clarity.
A much more elegant solution would be to create a fixed-size mosaic of the avatars to represent the company, with the number of people below linking to the ‘people’ page, and move the groups to the side. If I have a bunch of companies, that would save me a significant amount of scrolling.
And please, square avatars. There’s no reason for user pictures to be round unless you’re trying too hard to be different for difference’s sake. That would also take care of that dorky clover thing.
Gaia Dempsey
on 22 Mar 12Personally, I think the round avatars are fantastic. They look like a cohesive group visually, but they also define it as a group of distinct individuals. Beautiful, and philosophically on point. Well done, I always enjoy learning about the backstory of design decisions.
Wade
on 23 Mar 12This is a very clever blog. I am partial to round avatars as well. Design is key, and anything that is different so people will notice, is awesome.
matt kocaj
on 23 Mar 12Love this! Thanks for always sharing valuable insights guys.
lalit kale
on 23 Mar 12How about A-Z list having circular tooltip showing the avatars/user pic?
JjP
on 24 Mar 12@Rafael Madeira, if you know how to override CSS on your web browser, add this definition there to have square avatars on new Basecamp and see if you really like it:
img.avatar { -webkit-border-radius: 0px; -moz-border-radius: 0; border-radius: 0; }
Remember that if any other website is using any radius definition on an img tag with avatar class such definition on your web browser level will reset the radius to 0, as well.
Alternatively if you know how to use inspector in your web browser you can inspect an avatar, find the im.avatar definition and turn off the radius attributes to see how it looks with square ones.
Personally I prefer the circle ones.
Ruby on Rails development
on 26 Mar 12It seems so simple, but yet quiet difficult. One of the problems I have noticed thus far is people get attached to the initial design and then the design and the concept becomes more important and the importance of the purpose goes down. Its important to NOT marry the initial concept but only date with it to find the perfect life partner.
Great post.
Scott Newcomb
on 26 Mar 12I prefer a hybrid of the last two iterations. The last one looks too business like and too drab, so I say add the green circles back for the groups. I like the separation that it creates and it works with the green “Make a Company” button on the top left of the screen.
Just my thoughts.
This discussion is closed.