The Communication Studio LLC
Ideas & Opinions
Examines my redesign of a
B2B financial information site.
How I worked on this development team.
What needed to be fixed.
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