Challenge

My client had the beginnings of a design system, but hadn't yet introduced it across their product portfolio. Core components were missing, documentation was limited, and development teams lacked a shared foundation for implementation.

As a result, design and development efforts were fragmented, leading to inconsistent user experiences and inefficiencies across projects.

My approach

I saw a clear opportunity to bring consistency across the product portfolio, so I took a lead role in evolving the design system and getting it into regular use.

To make this happen, I:

  • Expanded the system with a full set of core components and added proper documentation.
  • Introduced UX writing guidelines to support more consistent digital experiences.
  • Helped coordinate the rollout of a React component library to simplify implementation for development teams.
  • Ran frequent design reviews and collaborated with accessibility experts to improve usability.
  • Enhanced accessibility by adding better keyboard support, ARIA labels, and refining interaction patterns to meet standards.

Expanding according to product needs

Over time, while working on multiple projects, I improved the design system by adding more components and clear instructions based on what each project needed.

This helped keep the design system focused and useful for developers and made sure things stayed consistent across different products.

Image description

Building a React component library

I took the lead in starting and managing the process of turning all Figma components into React components.

I worked closely with developers to make sure each one looked and worked exactly as defined in the design system, helping create a consistent and reliable set of components that would appeal to other development teams.

Image description

Adding advanced details

I enhanced the design system by introducing additional components and advanced documentation, such as z-index elevation rules for UI components.

I also coordinated the addition of important accessibility details, such as ARIA labels.

Image description

Outcome

By taking a proactive approach, I put together a core set of frontend style rules and reusable UI components that helped simplify the design and development process.

Rolling out a React component library made it easier for project teams to hit a high level of design accuracy and meet accessibility standards. Having realized the value, 10 teams signed on to use the component library in their projects, which helped create a more consistent user experience and speed up delivery across the company.

10+
Active projects using the library
80%
Component reuse across projects
Zero
Frontend engineers needed to implement