Case Study

Design System

UI / Accessibility / Strategy

Fluxx is one of the world's most popular platforms for grants management. As an in-house senior product designer, I lead the creation of a design system to standardize UI and UX patterns for a mature, data-dense SaaS platform with more than 500 institutional clients and tens of thousands of daily users.

Problem: A fragmented user experience across client-configured sites

Goal: Standardization of common UI elements and streamlined development of new features

Team: 2 designers, 1 product manager, product and engineering leadership as stakeholders

Timeline: 6 months from planning to first implementation initiative

Background

Fluxx began as bespoke database software for a single nonprofit, growing over nearly a decade into an extremely robust and flexible SaaS platform, handling everything from form-building, to customer management, to custom Ruby scripting. During that process, tight timelines and a lack of design leadership had lead to a fragmented UI that was frustrating for users and diffucult for engineers to maintain.

A typical Fluxx dashboard
A typical Fluxx dashboard

Process

In preparation for the development of a design system, my design partner and I started with a 2-week design sprint. We audited the existing app for usability issues, explored product parallels, and mocked up "ideal" states for the most common UX patterns.

An annotated view of a Fluxx dashboard during the design audit
An annotated view of a Fluxx dashboard during the design audit
Dashboard navigation before and after design sprint
Dashboard navigation before and after design sprint
A re-designed Fluxx dashboard, the result of a two-week design sprint
A re-designed Fluxx dashboard, the result of a two-week design sprint

The results of the design sprint were socialized with product and technical leadership, and lead to the creation of the platform's first full-on design system.

From this holistic view, we set about isolating and standardizing the building blocks of a universally applicable design system. Spacing, colors, and typography guidelines were built in Figma, and used as the foundation for the development of subsequent components and patterns. Eventually, these values were published as platform-agnostic design tokens, to streamline the building process for our developers.

Fluxx Design System Tokens Library

While building a new front end from scratch would have been ideal, there weren't enough engineering resources to support such a giant project. Instead, the design team collaborated with product managers to isolate upcoming new features to start building design-system aligned components opportunistically. This way, every sprint included work to flesh out the React library of design system components and patterns.

An example component, re-aligned to design system standards
An example component, re-aligned to design system standards

I worked closely with engineers to fine-tune the structure of the built prototypes, and contributed usability tweaks to the developed prototypes directly via Git. I also designed a documentation site for Fluxx engineers, with live examples of React components and exportable code snippets.

The Fluxx Design System interactive documentation site

Solution & Further Considerations

After designing and compiling hundreds of individual patterns and variants, the Fluxx design system is now in regular use, powering dozens of shipped features. The library comprises portable design tokens, UI components, a CI/CD pipeline for automated and manual QA, and an internal documentation site. New feature development has massively accelerated, and even retrofitting legacy components takes less time thanks to the tokenization of core styles.

While components built with the new design system have been well-received by users, I would have liked more time in the process to put more holistic examples of design system patterns through user acceptance testing. The incremental approach that Fluxx favored was a business necessity, but being able to build a brand-new front end would have had a much bigger impact on the user experience, and would have allowed for true A/B testing of new and old components.