Case Studies > Complete Trading Application Redesign, IMX.com

IMX, Inc. is an on-line mortgage auction. IMX is attempting to automate a very traditional field, where all the deals are made on a very personal level. This is a very challenging environment and it places unique constraints on the application. For instance, it must be very easy to use, and run on many older machines, because many brokers are not very computer literate and don't like to spend money on technology. Also, the application must be fast over slow connection, and mimic the rich desktop client LOS (Loan Origination Software) like Byte and Point that the brokers and lenders are used to.

Lender client navigation was often confusing to users, because it was organized around functional areas like "trading floor" and "administration" which had many similar looking screens, but with different functionality available, which often confused users, thereby creating more calls to tech support.

I led the initiative to redesign the Lender client to make it more intuitive, lighter and faster, and to improve application usability. The specific usability goal was to try to cut training costs and decrease calls to tech support.

Before The existing interface was organized by company's internal structure: "Trading Floor", "Search", "Administration". This created a confusing user task hierarchy and a lot of similar looking screens which presented different functions to the user. Because of the lack of contrast of the tabs and other graphics on the site, it was also very hard to tell where you were you were. Users kept getting confused and required a lot of training and tech support to use the system. The client was JavaScript and graphics-heavy and required a long time to download.

After I created the new task hierarchy, organized by function: all of the program-centric functions were on one screen, which acted as a central "Trading Floor" and provided virtually one-click access to every area of the system. Because of the number of buttons, I used spatial and color-based grouping, organizing the buttons by their functions. To keep the client light and fast, I removed over 5,000 lines of problem JavaScript, and used native HTML buttons and HTML-table-generated tabs. This allowed the users to customize all of the colors on the system, both to overcome many color-blindness problems and to allow the users to have more control over the look and feel of the application.

Our Solution

In order to design the new interface, I had to understand the user's pain-points. So I worked with QA, business and tech support to understand where the issues are with the current design. After that I proposed the following solutions:

Redesign the Screens According to the User's Task Hierarchy

The existing task hierarchy simply did not reflect the way people used the system. For instance the user would perform minor edits of the program in the "Administration" tab, then have to navigate to the "Search" tab in order to see how the program performed and if the edits were effective. To accomplish this, the user would have to click three times and again re-select the very same program he or she was editing under the "Administration" tab from another, very similar looking program list under the "Search" tab. If the user was interrupted somewhere in the process, he or she had a hard time telling where they were in the process and how to get back to the starting point.

I redesigned the task hierarchy around functional requirements to have one single "Programs" tab which was a single starting point for the entire user experience. Every other system function became either a "trading" button or an "admin" button, accessible with one click. We also provided a consistent programmable "Back to..." button that changed its name according to where the user was in the workflow and had its own unique "navigation" color. The users liked this new screen layout, because it organized the tasks according to the user's own mental model of the system.

Lighten the Client

The client application was very heavy with a lot of JavaScript, graphics and rollovers, each of which took a long time to download and run and did little to improve user experience. To lighten the application, I removed over 5,000 lines of JavaScript and redesigned the UI using HTML-rendered tabs and HTML-native buttons. This had many usability benefits:

• Very "real" and unmistakably "clickable" buttons and high-contrast tabs
• Programmable button text
• User-customizable button and tab colors
• Very light application with lower download times

Provide Customizable Colors

Because we used color as well as space to help the users differentiate between the button functions ("admin" was always top row, "trading" was the bottom row) we had to design a way to help the users with partial or complete color-blindness. To accomplish this, I adopted the idea of a color palette page used to customize the Yahoo home page for use by IMX:

Because the application now used HTML-rendered buttons and tabs, all of the application colors were completely user customizable via a dynamic CSS sheet, rendered via JavaScript in one of the frames. This design not only allowed the users to overcome color-blindness problems, but also allowed greater control over the look and feel of the entire application.

Benefits and Return on Investment

Because our usability goals included customer support calls and training time we were able to determine by how much both of those have decreased as a result of our efforts to improve usability. Customer satisfaction was a harder item to measure, but we were happy to receive an overwhelmingly positive response to the new navigation design and the color-customization functionality.

• Slashed support costs by $100,000/yr.
• Saved 2 weeks/yr training for 1,000 users.
• Increased use and improved customer satisfaction.

Greg Austin
VP of Sales, IMX, Inc.

Michele Buschman
Director of Product Development, IMX Inc.

Kat Agustin
Broker Trading Executive, IMX Inc.



 Back to Case Studies

 Research and Design Services

 Workshops