The detailed information for mobile phone accessories appeared as a sort of “data dump”. The information was all there, but it wasn’t being structured in a useful manner. We ran several groups of usability tests with potential customers and found specific issues with the navigation:

Solution

In particular, people had trouble navigating the different categories of accessories (“what are Imaging Products?”), determining whether their phone would be compatible, and most critically, finding the “Buy Now” button.

My visual designer companion and I addressed these and more issues in the following mock up:

We invented the “Is Your Phone Compatible” tool, redesigned the category browsing to expose more detail, and included a task-based navigation, as well.

Particularly noteworthy:

• The payments are always running, unless manually overriden, so I invented a “CD-player style” control scheme near the top of the page
• “Date of Payment” was often referred to as the most critical piece of data, so it gets its own special treatment
• Comments are separated between System and User messages with a monospaced font for the System messages
• Efficiency was a key concern for the system, so I included the option of inserting a comment based on frequently-used comments instead of typing the same thing over and over.

The home page of the American Airlines main customer-facing site was suffering from an overabundance of options, confusing displays and inaccessible flyout menus, not to mention numerous front-end coding issues, noted on the screenshot below (click for larger version):

Solutions

I combined options wherever possible, made judicious use of “more” links for options that were just as valid but not as popular, used clear displays and labels for ancillary functions, and standardized form input types. The first screenshot below is of the final wire frame made for a new version of the home page, and the second is a designer’s interpretation of what the final result might look like:

Finished IA

Proposed Design