A Day in the Life of a UX Designer: Part III – Explore and Assess the Alternatives

Of course, this is my  favorite part of the usability process and if I had a choice, I’d spend all my time in this phase! This is when we get to begin sketching out ideas based on all the information and criteria we’ve established for the website or web application.

Sitemap or Task Flow Diagrams

For websites, I usually begin sketching a clear picture of the sitemap. The sitemap is literally a visual diagram indicating each page of the site, and how users will be able to get to each page from the homepage. In doing this, we get an understanding of which pages need to be accessible from our Primary Navigation menus, Secondary Menus, and other Global navigation menus.

Sometimes I’ll receive an initial sitemap from the client in the info gathering process or“Identify the Problem” step in the form of an outline or basic flow chart. If that’s the case, then at this stage, I revisit that initial map and refine and formally construct my version of the sitemap.

I include special notes on each page about the purpose and focus of that page, and my recommendations for text content, images, video or other media that should appear on that page. This sitemap can also go through some refinement and revisions together with the client, depending on the complexity of the site.

If it’s a web application, then I would prepare a  task flow diagram because normally the screens consist of dynamically generated content, rather than static content. Because it’s dynamic, we can only plan for the purpose of the page, key pieces of information that should be displayed there, what a user should be able to accomplish on the page, and in what order. For example, if I was creating a task flow diagram for a company directory application, I might need to map out the Search Screen, the Results Screen, and an Individual Profile Screen. After I make each individual task flow map, then I can weave them all together into a larger map to show how each set of screens are accessible from the main menus of the application.

Wireframes

Once we know what pages or screen types are needed in the user experience process, then we can begin to roughly sketch out the layouts. The intent is to show:

  • Relative placement of functions, content, icons or buttons on each page
  • Relative importance of each element within the page or the  Information Hierarchy
  • Sample text content wherever applicable

The key thing to remember when evaluating Wireframes: we are not looking at the visual graphical treatment. We are trying to determine how the page should be organized and what things we want the user to experience first, second, third, etc. based on its prominence within the page.

To keep the layouts looser and easier to critique, we keep wireframes unrefined and raw, perhaps sketching with a sharpie on notebook paper or using software like Visio, Powerpoint or Balsamiq.   We’re getting our many ideas out onto paper so we can move things about, adjust, cross out, add on freely and try out multiple scenarios until we get to our strongest variation.

Visual Treatment

After we have a solid set of working wireframes, I can begin applying the visual design layer, the color and graphic designs for our new screens. This is essentially the artistic expression of the brand. In Round 1 of my process, I begin by choosing the homepage or the main screen or dashboard of the application, plus one secondary page. I explore various visual stylings as a set so that the client can see how the design translates to at least these 2 screens. Usually my packages include 3 distinct variations of these sets. From the 3 unique directions, the client can decide which direction they want to explore and develop further or which options they’d like to merge, and apply to the rest of the screens in Round 2.

Sometimes the client will choose to test these variations with his/her users to see how they respond and find out which ones best capture the brand aesthetic and attributes he/she trying to communicate. I find this to be a valuable part of the design process and can be as formal or informal as possible. In our field we say it’s best to “Test Early and Test Often” because there’s  so much more room to make corrections and adjustments BEFORE the site is built, than AFTER.

Then we review the designs in Round 2 together to gather the client feedback for the last and final round of web page designs. We refine and make any last changes, and then prepare the layouts for delivery or testing.

Now we have created the visual language of our site!

Read Part IV

Karen Fojas Lee is the owner and creative director at Nomad Chique – a boutique visual design consultancy that specializes in both  consumer and B-to-B websites, information portals, transaction-based  portals, and Web applications. It offers businesses high-end, custom  Web designs and solutions using the latest technology and usability design practices that user experience design has to offer.