Pulse Design System
Owning the system between design and engineering to foster effective cross-collaboration.
Overview
Theysaid needed a design system for their new product line. In two months, alongside conducting customer research, I developed and refined a design system that fosters a consistent design culture that succeeds at scale.
Duration
February -March 2022
Role
Design System Owner
Mentors
Head of Design, Head of Product
Platform
Desktop Web
Objective
Develop a design system that fosters effective collaboration between design and engineering.
A high level of detail is imperative in a design system to operate an effective product team. The design system includes a style system, component library, and all processes making the documentation meaningful. Each technical requirement correlates with the desired qualitative output toward the product, and the design system is the black box enabling making it happen. A world-class user experience requires a world-class design system.
Style System
Reflect the brand and maintain accessibility.
The style system dictates the look and feel of the final product. I designed and iterated the style system with our design director to match the brand and deliver a cohesive user experience.
Beyond representing the brand and looking good, the UI must also be usable. To achieve this, I ensured that everything passed WCAG AA standards.
Open Source Library
Quickly deliver scalable solutions by utilizing open-source libraries.
As a startup with limited resources, we took the approach of leveraging an open-source component library. This allows us to deliver a reliable design system using less resources. This leaves the majority of the efforts up to designing a style guide, building a robust component library, and gaining alignment on a design standard.
Auto-layout and Variables
Hand off feasible designs using Figma's developer-friendly workflows.
To eliminate ambiguity and foster efficient designer-developer communications, I built all components from the ground-up with auto-layout, matching the structure of the React component library.
Our team previously handed off specifications without auto-layout, leading to longer dev times. Delivering a new component library matching a styled React library made it possible for us to design and deliver features with a quicker turnaround.
Single Source of Truth
Ship reusable components through design-engineering collaboration using Storybook.
Using Storybook as the single source of truth encourages designers and developers to collaborate effectively and reduce chaos when it comes to keeping UI complexity low. This aims to achieve frictionless collaboration between teams and an easy-to-learn product for the users.
Storybook as the SSOT
Design and Eng Critique
Maintaining usability as the product continues to grow.
It's typical for new features to introduce new components. Similar to the separation of powers in the U.S. government, there needs to be a system that helps us collaboratively maintain a high quality standard. I facilitated meetings with the design and engineering leads to create the first version of vetting tickets for the design system.
©️Takumi Arai 2024