In the spirt of 37signals’ design decisions posts on Signal vs. Noise, I wanted to share a bit of my design process and the iterations that were arrived upon during this exploration.
The first task I tackled was the list of tags on the contacts screen. Jason described it as a “complete mess” once you’ve added more than a dozen or so. My first step was to dig into various design pattern references to see how this problem has been solved by others. However, this route left me without any feasible solutions; tag clouds are a common pattern that would only exacerbate the problem here. So, I dove in and started playing with the tags in Photoshop. My first instinct was to get away from the comma-separated list and try to organized the tags.
Once I had a solution for tags that I liked, I immediately thought of ways to use this treatment with the contact list. Since Jason asked me to take a look at that, too, I went right to work. In some ways, the contact list has similar issues with quick scanning. I kept thinking of a heavy user that has tons of contacts, is on the phone (distracted), and just needs to find a phone number quickly. He needs to way to quickly jump to the contact he's looking for. I liked the idea of adding the horizontal separators and call-out letters to the left side of the list to group the contacts and make it easy to spot the group your’re looking for as you scroll. A further iteration of this concept added another alphabetic navigation outside the frame of the page. This would let a user click a letter to jump right to that group. It could even slide along with the user as they scroll.
One more tweak was to the way the contacts information is organized. The tags for each contact felt awkward as they end up forming these heavy clumps on the right side of the list. They are hard to read and generally break the clean lines of the rest of the list. So I moved them to a single line under the company name and title. I liked the idea of creating two vertical scanning columns. One for scanning by name, and the other by title and/or company. I also liked that this kept the association between name and title as they stayed on the same horizontal line.
So, at this point I felt like I had an answer to Jason’s first question, “What would you do with what we have now?” I had a solution that felt at home in the 37signals suite of applications but added some much needed visual organization to some of the most dense information in any of the apps.
I felt like I had a pretty good solution that worked with the existing look and feel but I wanted to keep exploring. The tag list still took up a lot of vertical space and the new treatment added to the overall visual complexity of the page. I wondered if the tag list had to be visible at all times or if we could hide it until needed. A solution was to split the top of the contact list into two tabs — one for the search function, and another for the tags.
On this iteration, I also started to break out of the existing look at feel. The first switch was fonts. I choose a combination of Verdana for most text and Helvetica for the larger headlines. This allows for more dramatic contrast than the existing Lucida Grande. I was partly inspired by the HTML emails as seen in 37signals’ newsletters — I love the brighter, cleaner look of these pieces. Similarly, I took the opportunity to add some height to the header to make it a more pleasant proportion and brighten up the color palette. I feel like the current look is a little drab and this set of brighter colors really makes the application feel more inviting.
On this next version I wanted to take the opportunity to further explore the contact list now that I had more typographic options. I wanted to try rendering the contact list more like business cards or cards in rolodex. The end result is pretty nice and doesn’t require as much additional vertical space as you might think. I pretty much stuck with this look throughout the rest of the process and even adapted it to the existing design. In this step I also tried to put both the find and tags pieces into the sidebar. I noticed that the contacts screen was really the only one that veered from the convention of having the screen name in the blue bar at the top of the left side. So I tried to bring this screen back inline and move both pieces to the right side. I like the clearer look at the top of the contact list and the visual interest the right side items gained, although the tag list is still a bit busy.
I couldn’t complete this exploration without trying something completely different. The business card contact list format can really benefit from additional horizontal space so I tried a layout without the ubiquitous 37signals shadowed left content column. To support this idea I created a contextual action bar under the tab menu that contains all of the functionality for the page.
I truly enjoyed this project, immersing myself in this problem and seeing where the exploration would take me. I appreciate the opportunity to share my ideas for this design with you and look forward to talking more.