Pulse Design System
Owning the system between design and engineering to foster effective cross-collaboration.
Pulse Design System
Owning the system between design and engineering to foster effective cross-collaboration.
Pulse Design System
Owning the system between design and engineering to foster effective cross-collaboration.
Duration
February -March 2022
Role
Design System Owner
Mentors
Head of Design, Head of Product
Platform
Desktop Web
Overview
When Theysaid pivoted to a new product, I joined the team to plan, build, and maintain a design system. As a startup wanted a scalable system as fast as possible. Leveraging my background in software and design, I established a system that quickly brings feature specs to deployment.
Duration
February -March 2022
Role
Design System Owner
Mentors
Head of Design, Head of Product
Platform
Desktop Web
Overview
When Theysaid pivoted to a new product, I joined the team to plan, build, and maintain a design system. As a startup wanted a scalable system as fast as possible. Leveraging my background in software and design, I established a system that quickly brings feature specs to deployment.
Duration
February -March 2022
Role
Design System Owner
Mentors
Head of Design, Head of Product
Platform
Desktop Web
Overview
When Theysaid pivoted to a new product, I joined the team to plan, build, and maintain a design system. As a startup wanted a scalable system as fast as possible. Leveraging my background in software and design, I established a system that quickly brings feature specs to deployment.
Objective
Develop a design system that fosters effective collaboration to deliver high-quality product.
The quality level of a design system is critical for the success of a SaaS product team. The design system includes the style system, component library, and all processes making the documentation meaningful. It all works together with human talent to deliver one thing: a great user experience.
I interviewed engineers and designers to understand the qualities we look for in our product. Then, I documented and shared a set of inputs can install to achieve the outputs. This acts as the requirement-gathering and team-alignment for the new design system.
Objective
Develop a design system that fosters effective collaboration to deliver high-quality product.
The quality level of a design system is critical for the success of a SaaS product team. The design system includes the style system, component library, and all processes making the documentation meaningful. It all works together with human talent to deliver one thing: a great user experience.
I interviewed engineers and designers to understand the qualities we look for in our product. Then, I documented and shared a set of inputs can install to achieve the outputs. This acts as the requirement-gathering and team-alignment for the new design system.
Objective
Develop a design system that fosters effective collaboration to deliver high-quality product.
The quality level of a design system is critical for the success of a SaaS product team. The design system includes the style system, component library, and all processes making the documentation meaningful. It all works together with human talent to deliver one thing: a great user experience.
I interviewed engineers and designers to understand the qualities we look for in our product. Then, I documented and shared a set of inputs can install to achieve the outputs. This acts as the requirement-gathering and team-alignment for the new 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.
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.
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.
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.
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.
Shipping a scalable app with limited resources.
Shipping a scalable app with limited resources.
Shipping a scalable app with limited resources.
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.
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.
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.
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.
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
Storybook as the SSOT
Storybook as the SSOT
Design and Eng Critique
Maintaining usability even 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.
Design and Eng Critique
Maintaining usability even 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.
Design and Eng Critique
Maintaining usability even 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.
the Final Outcome
Shortened average development time and delivered product within 12 weeks.
the Final Outcome
Shortened average development time and delivered product within 12 weeks.
the Final Outcome
Shortened average development time and delivered product within 12 weeks.
©️Takumi Arai 2024
©️Takumi Arai 2024
©️Takumi Arai 2024