Ideas & Opinions

Examines my redesign of a
B2B financial information site.

How I worked on this development team.

Dealing with the Legacy

What needed to be fixed.

Getting It: Workflow Map

The concept and business needs.

Looking for Patterns: Problems & Solutions

Here's a quick checklist of some of the things that I often find myself doing in the course of a client engagement.

Interaction Designer's Role

As Information Architect and Interaction Designer, I often work concurrently across several different levels:

Conceptual	Capture Business Requirements in a document Organize design parameters into a Style Guide document Communicate the requirements and style guide to business unit, project management and coding team members by creating an internal site. In Design Specifications map the form and functions of the sections, pages and features of the site, so that we have a coherent overview of the service Redirect the focus of the site appropriately towards the client's actual business requirements.
Structural	Optimize the HTML of the pages (speedier display, easier management) Reduce the byte count (reduce page size / wait time) Simpler, cleaner code, organized in templates Headering "tags" embedded in templates to handle dynamic content CSS cascading stylesheets (rapid updatability) Create manageable graphics library Institute a development process that is seamlessly integrated with the code developers
Behavioral	Reconcile inconsistencies Eliminate redundancy Remove workflow dead-ends Reduce unnecessary clicks
Presentation	Clarify confusing terminology Reconcile unclear or missing on-screen directions Improve poor layout Correct distracting/inappropriate use of color
Customer Service	Define Customer Assistence parameters Embed customer support features (effective online help, step-by-step wizards, MouseOver popups, sitemap, etc.) Recommend features that would make the service competitive Craft appropriate enterprise-wide operational guidelines

Legacy Issues: The Usual Suspects

Here are some of the most common problems I've found in existing websites.

No Summary Overview

You are allowed (or required) to work with a broad range of attributes but are given no concise overview. You have to scroll through a looooong page in order to find out what's there. There are no references, no clues and no context.

Redundancy

There are several versions of the same feature.

They all looked somewhat similar

They all performed variations on the same function

But they each had different titles.

Inconsistency

You see the "same" page at different places in the service - under a different name - but it operates differently in each case. Buttons have different names and appear in different positions from page to page. Terminology varied across the site.

Scale/Scope

Some choices had literally hundreds of items to choose from. But there were no filtering tools to assist in making the choice.

Extraneousness

The navigation structure imposes unproductive pages and extra mouseclicks on vital processes.

Incompatibility

The legacy site maintains totally different - yet functionally incompatible - versions of a feature. This meant that you could perform certain functions on one, but not on the other.

different management tools
totally different behavior
totally different page design

Poor Layout

Many of the pages in the legacy site are simply badly designed. Some of the most common offenses:

Excessive white space in the upper regions of the page wastes valuable presentation area

The focal information area is crammed to the bottom and overflows the page boundaries

Disjointed layout of data boxes

Distracting use of color (colorful boxes draw attention away from the focal table of information)

Inappropriate use of color emphasizes information that is not really important

Obscurity
There was often no way to tell what to do next - or where relevant tools/information/assistance might be.

Workflow: Use Case to Conceptual Map

A "conceptual map" is often the first step towards understanding and defining how something works. Here is an overview guide to my structural redesign of the Search & Subscribe process of the site and the pages that follow in this document:

The critical functions are:

Run the search (to get Search Results)
Modify the Search (or make a new search)
Manage My Saved Searches
The Searchbar provides direct access to all the main features