Building a Design System

Building a Design System

The Problem

I was hired to lead the expansion an eventual redesign of the professional product suite, serving all manner of call-center, back-office, and internal technical support roles. As I worked with product managers and stakeholders to help define our long-term roadmap, I realized that the scope of the product portfolio would preclude my designing every piece of the UI myself. 

My real job would not be to produce applications, but to cultivate a user-centered design practice that was consistent and scalable.

The Approach

The situation proposed several unique requirements:

  •  We would need to be able to design software experiences to be combined in flexible configurations to meet various user roles and security  permissions. 
  •  Several independent development teams need to build applications within the same product family.
  •  We would need to maintain a consistent experience across applications to unify the product suite.
  •  We would need to work within the constraints of a lean development team.

The Solution

To meet these requirements, I used the following process: 

design thinking.png

1.Gather User Requirements
Contextual Inquiry and Interviews

2. Define IA around role-specific task flows
Contextual Inquiry and Interviews

3. Prototype Solutions
Axure

4. Distill features as standalone modules
Usability Testing

5. Work with Interaction Designer to fine tune UI components
Usability Testing!

6. Work with software developer to built custom UI component
Usability Testing!!

This allows us to:

  • Add and remove functionality without requiring substantial redesign work by choosing which modules to use in the application.
  • Test and refine user interactions to reuse UI components and task flows where they work, and add new ones where needed.
  • Easily maintain the design and development assets as changes and additions come down the line.
  • Reduce the number of deliverables required for the development process. Now, our Axure prototypes utilize existing components from our library, easily communicating functionality and design requirements to developers.
  • Bonus! Our content strategists are also using Axure to load final copy into prototypes. No more wireframes + annotations + content script + design mockups. Prototypes translate seamlessly into products.

The Results

Two applications have been built using the component library to-date. One is an internal tool for navigating platform data, the other is a client-facing financial dashboard. Both tools have been well-received by their users, and the component library is a huge step towards greater efficiency and better communication for designers and developers.

Tools

  • Axure
  • Usability Testing

Deliverables

  • UI Dev Specifications
  • UI Component Prototypes
  • Usability Testing Results

 

UI Components (Axure)

 Low-fi prototype components translate to visual design and code components

Interactive components, hosted and shared as an Axure library

The excerpts below are representative of the prototypes I worked on across major feature areas. Our team has moved on to produce high-fidelity visual designs as well as working software of these designs. Get in touch if you'd like to hear more about this project.

 
UX KPIs

UX KPIs

Small Business Site

Small Business Site