design	demo	makeover

Lifetecnet

This web-based application helped drug manufacturers adhere to government standards for quality control in the products by tracking ingredients and production. The product was near its release dates, but was suffering from usability problems in early training trials and demonstrations. We were asked to perform an evaluation of the product and make some suggestions for last-minute improvements in both the visual design and (if possible) the interaction design. The total cost of the evaluation and new design work in 2001 was $5,400.

This first screen is a typical screen from within the product. The main menu of commands runs down the left side, with screens appearing to the right and a toolbar of commands along the top (Home, Help, Messages, FAQ, and Logout). The client knew it was confusing, but had been working with it so closely for so long that they couldn't really see the problems.

Typical screen from product - Before (Click to enlarge)

This window shows the redesign we proposed.

Typical screen from product - After (Click to enlarge)

Here are some of the interaction changes to look for:

• We changed the overall appearance of the command area so that it doesn't look like files and so that it was easier to see which items went where in the hierarchy. With more time and thought, we probably would have changed how this worked - it had too many commands and was too long to be useful. However, it wasn't possible to make that level of change.
• We moved the toolbar commands, which were very infrequently used, to be part of the menubar on the left.
• We added a new orientation mechanism to the top left of the window that always tells the user where he is in the process.
• We changed the appearance of buttons: the blue Add Items button is a command that operates "within a page". The Orange buttons below the orange line indicate commands that finish the current process.

And some of the visual design changes you might see:

• We removed a lot of visual noise and cut way down on the use of the orange color. Orange is a corporate color, but was very hard on the eyes.
• We developed a new overall color scheme that used a lot less white (glaring) and made good use of the company blue.
• The strong, contrasting dark blue has been removed from the tables and headers.
• We created a new look for headers to group information more easily - the strong gray bands make it easy to see how information on the page is in parts.
• The empty table now has four empty lines in it.

Sub windows

This next screen is what came up if the user clicked Add. it's a Product Search window. Now you can see the command menu and windows get out of sync - the orange highlight shows that we're in Order Management > PR > Create, but the page title says "Product Search". It's hard to tell what is really going on.

This product search process was the first of 3 steps needed to add a product to the original page we saw above. We found this confusing - in a traditional interface this would have been handled with a separate popup window, so that the user could see that he was off making a selection that would then return him to the original main window. Here, it's impossible to see that.

Typical screen from product - Before (Click to enlarge)

In our redesign we suggested using a separate window for this, much as a traditional UI would. And since this is the first of 3 steps, we gave it the overall appearance of a wizard. Bringing up separate windows is more engineering work, so our alternative suggestion was to give the appearance of a popup window - let the user know this is a side task.

Typical screen from product, using Popup Window - After (Click to enlarge)

Some parts of the product were just confusing. The product search screen had so many different ways to search that it was quite difficult to know where to begin, what was required, or what would result.

A portion of a confusing screen - Before

We found a lot of problems here. There are just too many choices and it's hard to figure out which one will do what. There are two Search buttons, and two completely different ways to search on the same page. And then there are differences. In Buyer you search using "Search Product" and in Vendor you search with "Description", but they are essentially the same. And it's hard to tell how many of these fields need to be filled in to do different kinds of searching. Most importantly, none of these choices are really phrased in the user's own language, or with the user's tasks in mind. In our new window the first step tries to identify, up front, how the user wants to find a product.

A proposed Wizard to guide the user - After

We offer two ways to search: the Buyer Catalog or the Vendor Catalog. Within those two areas, each choice is described. Once the user has made a choice and clicked Next, he will see ONLY the fields he needs to fill in for the type of search he's selected. This is just a sample of the hundreds of improvements we suggested for this product.

Copyright ©2008 Two Rivers Consulting Corporation. All Rights Reserved.
Telephone: 978.352.2585 and ask for Hagan Rivers
We are located on the North Shore of Massachusetts
Email: moreinfo at tworivers.com (we don't link to our email address so we won't get spam)

Two Rivers Consulting Corporation never sends mass mailings (spam). If you think you have received spam mail from us, then you have been misled. We detest spam mail and we do not support its use. The Coalition Against Unsolicited Commercial Email can help you track down and stop unsolicited email.