Design System

Principal Designer (2021–2024)

A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared library and visual consistency across platforms.

My Role

I led this initiative by project managing the creation of the design system, contributing foundations and components, supporting engineers in its delivery and implementation across platforms, establishing its scalable governance process, and advocating for its continued investment. The team for this initiative included all Product Designers, Front-End Engineers, and the Director of UX.

The Challenge

As a fast-paced startup, early product development at Beam Benefits prioritized speed above process. Because a design system wasn’t established, components were designed repeatedly and engineers duplicated code across pages and platforms. The process was not only inefficient for new product releases, but also limited our ability to make large-scale changes, maintain consistency across experiences, and fully implement WCAG AA accessibility standards.

Creating the system

The design system was created by the product design team in collaboration with front-end engineers. Initially, I led the design team in defining a style guide based on brand guidelines and best practices. From those styles, we created reusable components and patterns in a shared library. While providing design leadership, I also partnered with engineering to facilitate effective collaboration during QA and development of styles and components. The design system has grown over time and currently includes 95 styles and 40 components.

Creating components

Built upon the design system’s style guide, components were then created for those used most frequently within our platforms. They included buttons, input fields, search fields, radio groups, checkbox, forms, modals, cards, pagination, tables, sliders, and steppers to name a few. I established a process for all component creation, which included research into component usability and best practices, design critique, accessibility audit, the creation of accompanying documentation, and engineering QA. This structured process ensured all components met our standards within visual design, usability, and accessibility and created shared ownership across designers who both created and used the system.

Documentation & guidelines

Each defined style and component was accompanied with documentation that noted specific implementation guidelines, visual references, and design principles for creating patterns, interfaces, and other design deliverables. This documentation acted as a design check to ensure that all criteria of the component had been considered, and also as a useful reference to engineers as they developed styles & components.