Tim Rittenhouse
UX Designer

Alpha

Enterprise Design System

TL;DR

Problem

Design variations in a suite of software products created an inconsistent experience for the user and increased design & development costs for the company.

Solution

I collaborated with designers and developers to build a design system that unified the components, patterns, and overall user experience across all products in the suite.

Result

A more consistent user experience, faster design times, and lower development costs

My Role

UX Designer

Easier, Faster, Better Design
Enterprise UI: very functional, not very delightful

Enterprise UI: very functional, not very delightful

Backstory

PeopleFluent is an enterprise talent management software company. They sell several different software modules that can be mixed and matched to create a customized product solution. Each module had a slightly different design which resulted in an inconsistent and confusing user experience.

As a contributing UX Designer on this project, I collaborated with 3 Front-End Developers and 6 other UX Designers to build, test, and maintain a design system that improved product quality and reduced costs.

What is a Design System?

A design system is a guide that keeps teams aligned when creating digital products.

There are 3 parts:

  1. Components - The actual pieces used to design each module

  2. Guidance - The rules for using each piece correctly

  3. Reference Site - A central location where teams can access components and guidance

Audit

I started by auditing our existing products and extracting the best components and patterns to use as a foundation. These included simple things, like buttons and headers, and more complex things, like login workflows and deep user tasks.

Alpha

Refine

From that foundation, I collaborated with other designers to establish a unified look and feel that could be applied to all modules, including future modules that haven’t even been developed yet. We defined things like typography, colors, and page layouts.

Alpha

Design

Once we established basic styling rules, I set about designing more detailed mockups of our components and patterns. This required extensive visual design, interaction design, and collaboration with Front-End Developers to create working code.

Alpha

Test

I selected a few pilot projects in which to test my designs and see if they functioned as well in the real world as they did on paper. Sometimes, they worked perfectly. Other times, they didn’t fit in the context of the product and needed to be redesigned and retested.

For example, I designed the pattern for forms. I had to figure out how to assemble every type of input field into a layout that was user-friendly and would work in every conceivable user scenario - logging in, scheduling an interview, conducting a performance review, registering for a course, etc.

Alpha

Release

We released Version 1.0 of the design system with 80% of components any project might need. A “marketing” campaign accompanied the release to educate—and win hearts and minds.

Alpha

Document

Once we found a working solution, we collaborated with our developers to create more extensive documentation and guidance for the finished components and patterns. We then posted that documentation on our reference site for everyone to access.

Maintain

I was responsible for managing new additions to the design system, but contributions were decentralized, with other teams encouraged to share new patterns, guidelines, and code. Versioned editions of the design system are released regularly.

50%
Faster Design
25%
Lower Costs
3x
Greater Usability