Accelerating Development with a Scalable Design System
Atomic Design of React-Ready Library
UX Design
UI Design
Role
UX/UI Designer
Year
2024
Team
Design Product Engineering
Responsibilities
Component Creation Design Implementation Documentation Stakeholder Alignment Governance
Challenge
The product development process was stagnant and in need of quicker iterations. The teams did not utilize a design system for developed surfaces and the challenge was to identify common components, streamline design elements, create tokens and variables, and implement design system components to new responsive surfaces.
Research
I contributed to the initial audit which included designed screens in Figma and developed surfaces both in staging and production. The research focused on heuristics and design principles as a base to start a foundation for the design system.
Key Insights
Product Processes
The engineering team had been developing screens without input from the design team, and there were developed components that did not have a design source.
Design Heuristics
There were inconsistencies in heuristics and patterns among foundational elements and components across applications.
Consulting with the engineering team I identified the React library of developed components named MUI, which led the front-end engineering team to provide a list of all the components utilizing the library's API.
This directly impacted the velocity of the component creation process for the design system, as using an existing library based in Google's Material Design as a foundation helped inform properties and values for the new scalable system.
The audit showcasing research from Figma designs, stage, and production of screens, and an example of a "pagination" component in developed surfaces which matched an existing React library MUI.
Foundation
Based on the previous research insights, the design team began the creation of foundational elements and components for the design system. Beginning with selecting a new font and icon library for consistency across apps, typography scale, selecting values for color tokens, spacing, elevation, and adding semantic values for better variable implementation.
Utilizing the Atomic Design methodology, each UI component was broken down into atoms including foundational token and variables for more effective development.
The subatomic elements which structured the foundation of the design system.
The components where organized each by page, with their dedicated documentation guidelines and properties set up to be able to turn into React code.
Implementation
I contributed with updating different application surfaces, as well as created new functionalities - all within the constraints of the design system. I implemented the design system to existing surfaces of different applications and improved the design heuristics creating consistency across software in the ecosystem.
User experience and interfaces were improved as implementation of new components and foundations were established.
Micro-interactions for new functionalities and patterns created to enhance user experience and create more engaging and intuitive digital environments.
Development
Through constant collaboration broken down into sprints within an agile environment, I aligned with stakeholders throughout the product cycles. Figma Design System components and their properties where turned into code through Storybook powered by the company's SDK.
An example of a story in Storybook with a developed "button" component based on Figma properties.
Surfaces developed with consistency and velocity as POCs and MVPs across applicatons within an ecosystem.
Results
The Design System improved product process with a faster development cycle, where the end result showcased consistent design heuristics and an enhanced user experience flow.
35% Engineering Velocity Increased
After the creation of the design system and development of each component through code, surface engineering for each app and tool was faster per sprint.
Client Oboarding Streamlined
Other teams as Client Success were able to support onboarding clients through new tools, alleviating workload on the engineering team and increasing customer satisfaction through quicker integrations.
UX Flows & Patterns
Design heuristics, patterns, and flows in the ecosystem were updated with the new design system, improving client retention & product processes.
More Case Studies
