Great design and UI doesn’t happen overnight, Everlater.com’s front-end process.

This is a guest post from Natty Zola, founder of Everlater.com, the webs best free travel blogs.

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.
Lastly, we build the UI, making sure to use proper markup and flexible CSS. By now, we have analyzed past performance, reviewed and set our goals, and designed a flexible interface based on data and goals. Now it’s simple execution of the mockups. Depending on the complexity of the Javascript this takes between three days and two weeks.

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.

Advertisements
Great design and UI doesn’t happen overnight, Everlater.com’s front-end process.

2 thoughts on “Great design and UI doesn’t happen overnight, Everlater.com’s front-end process.

  1. Good process. I’d suggest that for complex transactions you prototype it using something like Balsamiq (http://www.balsamiq.com/) or Axure so that you can get a feel for what it’s like to click through it. Going through it dynamically rather than statically can help you find usability issues.

  2. Natty great post. Everything you are saying here rings true, especially in the startup company environment. You have to be nimble and ready to change quick. Your one step ahead of many companies by really reaching out to your users and doing testing.

    Its also very hard to fit in design updates into small dev cycles that are typical of a startup. You really have to plan your steps and build, like you said, flexibility into the site. Can’t wait to see the new design you guys crank out.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s