Design Systems

The past six years, a lot of my work has been on design systems. I made significant early contributions to the design system at O’Reilly Auto Parts. But most notably, I’ve been a senior-level designer on the DesignOps team for the last five years, largely working on our design system, AXIOM.

Skills Used:

  • Figma, FigJam, Figma Dev Mode

  • React

  • Component creation and co-creation (UI & UX design)

  • Working with product teams and developers

  • Writing documentation for product designers to reference

  • Ongoing governance to ensure product team compliance

  • Style guide

  • UX Audit

  • QA of implementation

Background

The UX Department at Edward Jones is huge now, but when I was hired on as a contractor in early 2020, it was only about 10 designers. We had a design system that contained a descent amount of components, but it was very visually dated and didn’t cover the breadth of components needed for complex financial applications.

Why a design system?

Because nothing enables scaling quite like a design system. It helps ensure:

  • A consistent experience for end users

  • Time savings for both designers and developers

  • Accessibility

  • Strong branding and consistent look and feel

  • Designers spend less time on visual UI choices and have more time to focus on real usability and experience solutions

What we did

Gathered needs

We wanted to make sure we covered everything that was in our old design system, and we worked closely with product designers to gather what kind of components our diverse financial apps would benefit from.

One of the biggest components I personally designed were tables – as a financial institution, our applications have a lot of tables. We previously didn’t have a component, but there was a real opportunity there because of both the frequency of use and complexity of tables (sorting, pinning, collapsing functions, etc).

Designed components in Figma

We created flexible, ready-to-use components in Figma for our product designers to use. Our design system ended up having over 50 components, so it was important that we kept things organized. We thoughtfully organized our components in the library and carefully used variables, variants, and props to limit the bloat and make things easy for designers to swap out.

Ensured accessibility

We specifically chose colors which easily meet AAA contrast requirements in a variety of circumstances. Although we’re only required to meet AA standards, we held ourselves to a higher standard. I created a matrix to illustrate which colors can be used on other colors as a background, particularly useful for error messaging or if a designer wanted to use a non-white background.

We also worked with an accessibility specialist embedded on our team to ensure that functionality, keyboard controls, and screenreader behavior were appropriately accounted for.

Guided consistent development in our React Library

We passed off our designs and requirements to our developers embedded in DesignOps using Figma Dev Mode. We had routine reviews of both behavior and appearance, ensuring every little detail and behavior was working as intended. We also made sure that tokens and naming conventions were consistent between React / Storybook, Figma, and Knapsack (our documentation site).

Wrote documentation for designers & developers

We have over 100 designers and 100 developers who use our design system across various product teams, so self-service documentation is paramount to efficient and consistent design system adoption. We published full scope documentation on our documentation site, Knapsack. This included branding, accessibility, voice and tone, and more. For each component, we publish anatomy, padding and spacing information, behavior, usage / context guidelines, best practices, accessibility information, and any relevant developer information.

Ongoing support

Some designers and developers still had questions about their specific contexts, or slightly varying use cases. We have a dedicated Teams channel for supporting those questions, and I am an admin of the Jira and ServiceNow projects which handle our formal intake process.