Pulse Design System

Planning and delivering design documentation to foster effective team-collaboration.

Pulse Design System

Planning and delivering design documentation to foster effective team-collaboration.

Pulse Design System

Planning and delivering design documentation to foster effective team-collaboration.

Overview

Theysaid, a company spun out of parent company Nuffsaid following an acquisition in 2022, needed a brand-new design system for the upcoming product.

Scope
Stakeholder Management, Project Management, Research, Design, Maintenance


Team
Takumi (Design System Owner, Project Manager) Maggie (Design Director)

Project Length
5 weeks

Platform
Desktop and Mobile

Overview

Theysaid, a company spun out of parent company Nuffsaid following an acquisition in 2022, needed a brand-new design system for the upcoming product.

Scope
Stakeholder Management, Project Management, Research, Design, Maintenance


Team
Takumi (Design System Owner, Project Manager) Maggie (Design Director)

Project Length
5 weeks

Platform
Desktop and Mobile

Overview

Theysaid, a company spun out of parent company Nuffsaid following an acquisition in 2022, needed a brand-new design system for the upcoming product.

Scope
Stakeholder Management, Project Management, Research, Design, Maintenance


Team
Takumi (Design System Owner, Project Manager) Maggie (Design Director)

Project Length
5 weeks

Platform
Desktop and Mobile

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 design system boosted efficiency of the development cycle.

the Final Outcome
Shortened average development time and delivered product within 12 weeks.

The design system boosted efficiency of the development cycle.

the Final Outcome
Shortened average development time and delivered product within 12 weeks.

The design system boosted efficiency of the development cycle.

©️Takumi Arai 2024

©️Takumi Arai 2024

©️Takumi Arai 2024