Redesign Strategy on the Web

We usually participate in the full development life-cycle of a website –strategy, wire-frames, content, design and coding of the application itself. As such I have taken for granted certain aspects of the process: I anticipate the need to have new content created for the application, the need to develop a visual hierarchy using typography and color, establishing the navigation structure, and so on. Recently, however, we have been requested to put together a plan for improving just the UI and content organization of an existing website.

The complexity of the website is what gave me the idea for this article: the site serves four different audiences, has an e-commerce component, is content heavy, and has several training and testing applications integrated within the site. The components were all there and our mission was to update the UI and organize the content in a fashion which would improve usability, conversions, and eliminate user frustration.

Identify the Problems

I realized that I couldn’t simply distill the essence of the site into one statement of value and a single call to action element – the site was big and did many things at the same time, and for different audiences , too. Luckily for us the client had done some legwork and had a summarized document expressing their biggest concerns, some usage statistics and feedback from focus groups. I would recommend everyone to do this as step one – identifying what does not work on an existing site gives the needed perspective for the UI designer to get started.

Looking at the design I wrote my own “critique”:

1. Website does not tell me what it does from first glance; there is no tag line in the header, the main message is convoluted and lost in between clutter of content
2. No hierarchy in navigation; there is no established starting point; I feel threatened to start looking around because of too many unorganized links
3. Overabundance of color and contrast. Website does not use color to guide visitor but assaults its senses like a week old blue cheese stuck under the seat a car in 100 degree weather
4. Outdated design, poor typography makes me think this site has no authority and thus will probably not satisfy my needs for a solution
5. Misuse of contrast: a lot of sections are highlighted resulting in a page where everything is important and thus at the same time ignored
6. Misc. information that draws the focus of the visitor that is a result of someone saying "we need this on the homepage".

Understand the Content

My second step was to write a short summary about the purpose of the site in my own words, keeping in mind the target audiences, and the problem areas that the client summarized from focus groups. I find that it helps if I use pen and paper (or marker and whiteboard) at this point to simply jot down the audiences and what they do with the site. I used short bullet points, each bullet point having no more than two or three words to summarize the functionality of the particular user type. It looked something like this:

I’m simplifying the list here a bit from the real thing, but I just want to show that I am establishing the needs of different types of users. I’m not sure if the little information I actually have shared about the site makes a difference at this point, but It should be easy to understand from that list that the website offers online training and certification courses in food and alcohol safety. The website is also a reliable resource for state regulations, a central location to find teachers and proctors for the courses, and many other things.

Andrew Chak in “Submit Now – Designing Persuasive Web Sites” says that the first step in persuading a visitor to stick around for an additional second is to introduce yourself (the website). Understanding the content will help you establish the content for the homepage that will answer the following questions:

• What does this website do?
• Who is this for?
• What can I do on this site?

Create Structure - Chunk It!

At this point I had a couple of ideas of how all the information could be grouped and structured. The current sitemap has over 90 pages in it and displayed almost that much on the homepage itself in a completely unstructured way.

People have limited capacity and attention for processing large groups of information and this is where Chunking comes into play. Chunking is a “technique of combining many units of information into a limited number of units or chunks, so that the information is easier to process and remember”. This comes from a book every UI designer should own called “Universal Principles of Design” by William Lidwell, Kritina Holden, and Jill Butler. I love using the word and the practice to create simple and easy to navigate menus.

One of the ideas was to group the site by visitor type. I sketched some wireframes and created tabs for each user type on the website. I thought that perhaps I could use a tabbed navigation at the top with the type of user, eliminating a lot of the existing secondary navigation elements and only exposing them after a user has clicked through to the next page. The problem with this approach, however, was that a lot of the functionality of the site was similar and shared across user types and I strongly believe that the same content shouldn’t overlap on different sections of the site. I also believe that the navigation and content structure should be so simple that a visitor could easily visually parse the page, select the point of interest and arrive at a page with the required information spending very little effort. Sometimes this leads to those humongous dropdown menus that help very little because while trying to simplify they actually assault you with too many choices (insert example here).

Brainstorming the approach above I realized that the split of content shouldn’t be based on user type, but on user action! My bulleted list above can be summarized with only 4 verbs in total – Purchase, Manage, Teach, and Learn. These activities kept recurring through all the user types and it was only logical that they should be my focal point for content organization and grouping. Step three in my process of content organization was to split functionality of the website based on “action”.

I continued to break down the existing website into those four categories and allocated major components of the site to each verb:

1. Purchase
   • Explain what products are offered
   • Allow people to sign up for classes
2. Manage
   • Control courses
   • Assign Classes
   • Check results
3. Teach
   • Certify instructors and proctors
   • Manage Classes
4. Learn
   • Take class
   • Access regulation information
   • Check my score

I wanted to establish some visual cues that I could give to the client to initiate the conversation about my proposed strategy. I believe mock ups of the new framework work the best – a lot of people interpret information much better when it’s visual, so I continued to play with some wire-frames. Once I had the content for the homepage summarized in simple blocks, I picked a 960px template (which can be downloaded here), and started blocking in the elements.

Putting It All Together

I realized that exposing all four “actions” on the home page would be difficult without a dynamic component that would cycle though them. I also did not want to hide core functionality behind a click or two. I created a navigation menu which summarized the functionality covered by that section of the site and bound a “slider” element to each button. Hovering over the navigation would change the slider below it exposing a short call to action element for that section and some additional useful links. This type of approach would allow me to cleanly explain each section without needing the user to click and would set the expectations of the visitor correctly.

As Steve Krug writes in his book “Don’t Make Me Think”, a user’s patience and good will with the site quickly diminished when his expectations are not met. Using a simple, clear, and self-explanatory navigation structure on a website is the easiest way to guarantee that we don’t upset the visitor with content that he wasn’t looking for. Each “landing page” of a section would again expose more information and functionality of that particular section – creating natural funnels that would guide the visitor to the action and features of the site they are looking for without an overly complex navigation bar with too many sub items.

To conclude I would like to remind that simplicity is beauty. Even the most convoluted and content heavy websites can be distilled to be lean and elegant. Starting with the correct navigation and content hierarchy will help you design the rest of the site and make it simple to navigate, friendly to visitors, and effective at conversions.