Through my experience designing three (soon to be four) front ends for Everlater.com over the past year and a half, I’ve come to believe that great design and UI doesn’t and can’t happen overnight. Like most everyone, we like to iterate fast, extremely fast, but absolute speed is the enemy of good design and UI. We use a simple process to brainstorm, create and build front end interfaces. While not flawless, this process creates a structured workflow that guarantees an improved user experience. Moving from step 1 to 5 should take time – each step requires intense critical thinking, a heavy dose of creativity and each must be completed before the previous.
Step 1: What have we learned thus far.
(This step mostly applies to a redesign but first time web site builders can use simple mockups and paper UI to substitute a live site.)
The first critical step is to analyze what we’ve learned from our UI thus far. We gather information from Google Analytics, internal statistics dashboards and user focus groups and use the information to figure out what is going well and what is not. Where are we losing visitors, what happens in our conversion funnel, do users and visitors always know the next step they should take, when we direct users and visitors to take actions do they actually do it, etc. We write down two lists; concrete learnings based on data and assumptions based on observations. We spend about a week on this step.
Step 2: Review and set goals.
Now that we know how people are using our site, we review the goals we’ve set for what we want a user to do. How is our front-end/UI helping and harming users achieve our goals? By combining what we’ve learned in step 1 and reviewing our goals for users in step 2, we’re able to identify key areas where we need improvement and learn what to leverage in our new front-end. The last part of step 2 is to re-assess the goals we’ve set and make sure they don’t need to change. If they do need to change, we incorporate the modifications into the goal performance analysis. This step usually takes us at least a week.
Step 3: Iteration.
Finally we are ready to pull out the sketchpads and fire up Photoshop. We prefer to use Photoshop from beginning to end but do what works best for you. The tools don’t matter in Step 3, the key is iteration. We take one view at a time and systematically construct the important UI elements that drive users to achieve the goals we’ve set in Step 2. We modify and review our mockups many times, consistently iterating on both the design and the messaging to drive users to take our desired actions. We limit desired actions to a maximum of two per view. We usually design two or three different versions of each view so we can compare and try different hypothesis. We try to gather as much feedback as possible in the process. At the end we have a thoroughly thought out set of mockups that drives users to take our desired actions. This step usually takes three weeks.
Step 4: Integrate flexibility.
Even though we’ve now spent over a month planning and designing a new interface or redesign we know we’ve done stuff wrong. Without a time machine we compensate for our inevitable errors by spending time thinking about how to build flexibility into the design so we can modify and tweak based on new information and observations. Flexibility to us means turning UI elements into modules which can be easily changed, moved or removed. This step usually takes one week.
Step 5: Build.
We just went through this whole process and will release a new redesign of Everlater.com soon. We strongly believe in data driven design and development. We also believe that to do something incredible it takes time, iteration, and dedication. Our process is designed to deliver useful front-ends that are intuitive, beautiful and help our users successfully use our product. I’m very curious for comments on our workflow and what has worked successfully for others.