Case Study: A Robust Design System

I follow a component-based strategy in UI/UX design. Any project, no matter how large or small, can be broken down to an atomic level. This is the approach I took when creating a complex map-based tool for a federal government agency in four weeks. Although a digital process already existed, it was incomplete: at some stages, users had to take out a highlighter and a stack of old maps to draw routes themselves. Our goal was to consolidate the entire process into one new web-based application.

User research revealed that the key challenge of this project would be developing a consistent visual language for displaying route data and status.

Color
Color obviously plays an important role in any design, and for this project a restrained color system proved to be a key asset. The existing application applied color randomly. In a map showing 70 different routes (very often the case), each route would get its own color. Although users leaned on this as a way of differentiating routes, it was unwieldy, and not meaningful throughout the rest of the site.

My revised color palette centered around user actions. On a map full of routes, the user’s focus would now be drawn towards what needed their attention most.

Route Cards
The existing system also had no visual language for representing the routes: arguably the most important element of this tool. I knew the project couldn’t be successful without a flexible system for displaying routes that remained consistent throughout the entire user experience.

In their simplest form, routes are displayed as a small card. The status of the route is displayed via a color bar locked to the left of the card. The status message above the title gives more detail as to the reason for the route’s status. Only the most vital data is shown here.

When in list view, the route card is expanded. More information is shown about the route’s edit history, and the call to action shows what action is left to be done, if any. On hover, a detailed dropdown displays a tertiary level of data.

If implementation is successful, this new map tool has the potential to save the federal government almost one billion dollars in costs.