Indigo Design System

Role: Product Design Lead, Contractor management, Stakeholder collaboration

Screen shots of web applications before and after the design system was implemented.

Challenge:

USAC’s (Universal Service Administrative Company) online tools and applications were not a part of a cohesive experience. As a result, users were burdened learning difficult systems and teams were not functioning efficiently.

Goals:

We set out to build and sustain a design system called Indigo. Encoded in HTML and CSS, this design system needed to create a visual language and foundational component library to support USAC program web applications and tools complete with documentation available to internal and external partners.

Process:

Reference Designs

We started with compiling page design concepts spanning products and platforms to normalize the visual language and component design decisions. The goal of reference designs is not intended to be explorations of project-specific details, but a reference for designing a visual language and identifying core components across products.

Prioritize System Parts

We conducted a workshop with the USAC teams including developers, program project leads, and design and UX to identify what parts the team would prioritize for this system.

As a result, we set the goal for V1.0 of the design system to build the foundation by creating a compressive, scalable visual language and build atomic components most often reused and combined to make user experiences. We emphasized data collection and displays through normalization of form controls and standardize UX patterns and best practices.

Design, Develop, Document, Publish

The process to make and maintain Indigo required cross-functional collaboration. Using an agile approach, we set up sprints to include design critiques and regular reviews to keep tasks a manageable size and identify and address problems quickly. We checked components were meeting 508 and WCAG accessibility standards throughout.

Screen shot of Sketch application used to design the components.

Design

Design the parts using Sketch and tested functionality in InVision.

Screen shot of the developer's page of the indigo design system.

Develop

Build and test HTML / CSS / JS for all variations of the part.

Screen shot of a page used to document button usage guidelines.

Document

Record the basic guidelines and uses of the part in a shared document and in code to ensure proper inclusion and adoption.

Screen shot of a page of the live component library.

Publish

Create a page on the Design System documentation site for users to access the information.

How good are the parts?

Indigo’s QA process ensured that each item was:

  • High visual quality

  • Flexible to variety of content

  • Accessible

  • Cross-browser

  • Functional

  • Mobile-friendly (adaptive, but not yet fully responsive)

Select images above to enalarge

Result:

The Indigo Design System is continuing to be updated, expanded, and applied to legacy and new products today! Within the organization, utilization of the system increased design and development collaboration. It also served to improve efficiency in developing new tools, leading to a more cohesive, higher-quality user experience at less cost.

Externally, Indigo presented a unified, single USAC to stakeholders and succeeded in simplifying the most high-profile systems with potential to touch millions of users. It created a foundation for building accessible and usable products.