React Components Design System

My Role

Sole designer embedded in a global engineering team for an early start up.

Responsibilities

Created consistency across the platform by leveraging MUI React component libraries for Figma composed and element components, creating Storybook frames, and developing comprehensive documentation in GitLab for components, patterns, and usage guidelines.

Figma Storybook Frame for Typography

The Process

UX Audit & UX Strategy Development

I reviewed all pages in the application and logged the usage of elements and styles for all permissions levels. Then reviewed business goals, customer complaints, and interviewed key stakeholders. After the data was gathered I analyzed and created a user experience strategy.

Roll Out Plan

The fastest and easiest way to get the UX strategy in motion was to:

  • Create a simple color strategy that would work for enterprise branding

  • Use only standard MUI components for at least six months

  • As modules were being worked on, update tickets were added to the sprints

  • Communicate the standards using Storybook

  • Document the strategy and usage in Gitlab

Storybook Implementation

When I joined the team, the engineers already had Storybook installed. To facilitate its use, I designed component variations and states in Figma, creating frames for engineers to use as a visual reference and to ensure accurate implementation.

Documentation

I created detailed documentation in GitLab to guide developers in using the design system. This documentation included component specifications, usage guidelines, and links code examples, aiming to streamline the development process and reduce implementation errors.

Composed Page Layouts Across Devices

Challenges and Outcomes

The initial testing with Storybook was promising. However, subsequent Storybook updates introduced breaking changes and compatibility issues, causing significant challenges for the engineering team.

Despite the Storybook issues, the underlying design system I implemented still proved valuable. It provided a centralized source of truth for UI elements and improved consistency across the platform.

To adapt to the Storybook limitations, we established a workflow where developers directly referenced the Figma component designs through links embedded in the GitLab documentation, ensuring that designs and code remained synchronized.