BrainCo Design System: Scaling Efficiency & Consistency in Product Design & Development
During my internship at BrainCo in Summer 2024, I was thrown into an autonomous position to address inefficiency and inconsistency in product design & development.
While the team were discussing the solution as implementing design tokens, I was able to lead the effort of a comprehensive design system for 3 products in collaboration with front-end and back-end, scaling efficiency and consistency for designers and developers.
Beyond building the design system, I also conducted team workshops to boost relevant understanding, introduced strategies for scaling the system in the future, and gained stakeholder buy-in of establishing a global design system for the company's growing 13 SaaS products.
Role
Lead UX/UI Designer
Team
2 UX Designers, 3 Software Engineers
Platforms
Design Systems, Tablet & Mobile App
Timeframe
May - Aug 2024 (3 months)
1. Overview
The Fast-Growing Startup Needs a Design System to Scale
Problem Statement
Fragmented Design & Development Process
BrainCo is a neurotechnology startup. Over the decade that it has been founded, it has branched to 13+ digital SaaS products.
As the company continues to scale, developers and designers have become extremely frustrated with the design and development process: The lack of UI consistency within and across products has cause development inefficiency and design redundancy.
Solution
A Tokenized Design System
I designed and implemented a design system tokenized and codified to the engineering level for 3 products. This is the first ever design system at BrainCo.
My work includes:
UI auditing for 3 products
Design system benchmarking
Component prototyping, documentation, and developer handoff
Quality assurance
Strategy roadmap
Design system workshops
Impact
Scaled Efficiency & Consistency in Product Design & Development
I was excited to see that my work accelerated feature releases and reduced redundant design work, while also improving collaboration between design and engineering, leading to a more cohesive user experience across products.
I was able to gather the following metrics through conversations with designers and developers as well as product benchmarking.
~40%
reduce
Developer Handoff Time
~34%
reduce
Designer Prototyping Time
3
products
UI Consistency
1. Understanding the Problem
Why do we need a design system, and what kind of design system is needed?
Context
Ongoing Digital Transformation for an Existing B2B and B2C App Suite
"StarKids" is an existing product suite that includes both B2B and B2C versions. Due to business needs, the developers need to integrate data in the B2B and B2C apps, thus leading to code refactoring. This is a natural time to assess our current practice for opportunities to improve.
The Original Problem
Themeswitching cause headaches for designers and developers, leading to higher operational cost for the company
B2B (for institution use)
Available on iPad, Android, and Desktop
B2C (for family use)
Available on iPad, iPhone, and Android
I conducted a UI audit across 2 products (B2B and B2C version of the same product suite). and I found that there are most of the components are shared across the products with color being the primary difference, while there are lots of inconsistencies in the design and code, making it hard to theme-switch in the code.
This has caused extra workload for both designers and developers, leading to higher operational cost for the company.
👆 Example of a component
The Real Problem
A Lack of Guidelines in Components and Styles
The problem of themeswitching turns out to be just the tip of the iceberg. Through conversations with my manager, I realized that there seem to be more problems at hand. And these can all attribute to a lack of guidelines in components and styles.
Reassessing the Current Practice
How Did the Current Practice Introduce Inconsistencies?
To align on needs and priorities, I conducted interviews with designers and developers in the company about the current product building practice, and journey mapped their pains and gains throughout the process.
Key insights:
The lack of guidelines have led to a series of problems including inconsistencies in design components, inefficient code classification, unsynchronized design and development, etc. By solving these problems, we can also boost efficiency, consistency, and communication.
Without a unified design system, scaling BrainCo’s products meant increasing inefficiencies—longer development cycles, higher risk of design debt, and an inconsistent brand experience.
Having a design system that is tokenized and codified to the engineering level can lead to fewer design inconsistencies, reduced amount of QA time, and less cost. It would also mean more efficient resource allocation, faster time to ship, more pleasant experience for the users.
Designer and Developers' Needs
Through conversations with designers and developers, I identified the following user story:
As a designer, I want to quickly understand the existing design system so that I could reuse the style and components in my work and maintain it in the future.
As a developer, I want to quickly get the info I need from the design system file so that I can implement the changes efficiently and accurately.
Benchmarking with Current Practices
I looked into Material Design, Apple Design, Nord Design, Ant Design, etc. to understand the key elements that a design system may incorporate, and how components are classified and named.
Key insights:
Our design system should include component prototypes, default + variants, and spec, etc.
Our components should be reusable, customizable, considerate of edge cases, and accessible.
Our token names should be intuitive for designers and developers. Value, primitive tokens, semantic tokens, component-specific tokens, and components should be connected properly.
Building the Design System
How might we create a design system that is clear and easily applicable for both designers and developers?
Design Library
I documented and defined component design and implementation guidelines, tokens, components, anatomy, specs, and edge case examples.
Design Components
I automated the workflow using a variety of tools. For example, I used EightShape Specs to quickly generate anatomy and layout specs. The documentation of the specs has proved helpful as our developers did not have access to the Figma Dev Mode.
Design Tokens
Through conversations with the developers and designers, we have come to conclude that we use "component_status_element" as a format for naming the design tokens.
E.g., primary_filled_button_default_text
I used Token Studio to retrieve the json file for developer handoff.
Outcomes for Stage 1
I laid out a basic structure for the design system and design tokens, in collaboration with other designers and developers. The design system was presented in a clear and easily applicable way.
Stage 2
Refining the Design System and Everything in Between
We have the Design System, now what?
… An opportunity exists in refining the design system and design delivery to enable designers and developers to scale the design system more efficiently and accurately.
Introducing an Iterative Design Delivery Process
As I was building the design system, I collaborated with developers and streamlined the design delivery process. I proposed a workflow and specified the responsibilities for designers and developers in terms of defining the specifications and tokens, making sure that the process can go smoothly. The process has been adopted and has shown success.
Optimizing the Product Management
Because the design system is an internal tool, it doesn't involve our PM, and we have to manage our progress on our own. Due to limitations on budget, we were not able to use task management tools such as Jira. I thus created a master doc to document the design and development progress, with QA feedbacks.
During the iterations, I also found that the existing token setup can add to unnecessary complexities and optimized the design tokens accordingly.
Optimizing for More Efficient Maintenance
Improving Team Efficiency by 6 times
Before:
82 tokens
component_status_element
E.g., "outlined_textfield_hover_container"
After:
14 tokens
element/status
E.g., "input_indicator/primary"
Improving Team Efficiency by
6 times
Optimizing for Designer Use
Allowing for Easy Scanning when Selecting Colors
Before
Hard to scan and use
component_status_element
E.g., "segmented_control_active_label"
After
Easy to scan and use
component/status_element
E.g., "segmented_control/active_label"
Note: After confirming with the developers, I learned that this change didn't add to extra workload for our developers.
Outcomes for Stage 2
I successfully built and implemented the design system for 2 existing products. This successfully boosted design and development efficiency, enhanced design consistency, and promoted communication.
Design team
Improved the perceived efficiency and eliminated the need to recreate components.
Development team
Reduced the maintenance costs by up to 6 times.
Communication
Improved the sync between designers and developers and inspired internal collaboration.
Stage 3
Ensuring the Scalable Growth of the Design System
The design system that I built solved our initial problems and improved efficiency, consistency, and collaboration. But is it sustainable?
How might we effectively advance and evolve our current design system to meet future needs and challenges?
Learning about the Industry Best Pratices
I researched into resources shared by design system experts, where I learned a lot of about design system's maturity levels, health, etc.
Photo credit to Brad Frost
Gauging the Team's Vision
I conducted semi-formal interviews with 2 designers and 1 developer on their vision for the design system for the next 3 years.
Key insights:
We need to boost the design system's adoption and make sure that it evolves like a healthy product.
The team is satisfied with the newly adopted design delivery process, and the team hopes to continuously explore ways to collaborate together.
Besides the design system that especially caters to the existing apps, the team also wants a global design system.
Everyone sees the design system as a necessity, but it was never seen as a priority by key stakeholders.
From the research, I drafted a comprehensive roadmap covering 6 key areas to work on. I presented this roadmap during the middle of my internship. During the remainder of my internship, I touched upon all the tickets in the "Now," "Next," and "Future" stages.
For maintaining the existing design system, I adopted a design system governance process template from Brad Frost and revised it based on our team needs accordingly.
Conducting workshops with the team
I conducted workshops with the team of 12 designers (4 UX/UI designers and the rest working on branding, motion, packaging design, etc.) and our dedicated developer to call for collaboration on the design system.
Because most of our design team are not UX/UI designers, and have not been exposed to the idea of design systems yet, I did a flash course on the design system and atomic design before going into the topic. Then I invited them all to discuss how we might collaborate together to use and contribute to the design system.
Present the Value of Design Systems
I presented my work to stakeholders and earned stakeholder buy-in for building a global design system for the company's products.
Outcomes for Stage 3
I successfully helped the team develop a deeper understanding of design systems. I received positive feedbacks from the team, and my work sparked discussion on how we could work together on the design system.
My contribution also directly led the team to start the initiative of establishing a global design system. I proposed to establish a global design system across all BrainCo products. This proposal was adopted, and during the remainder of my internship, I worked this effort with three other designers, organizing our current design assets and components across 7+ products.
Zhaoyi Yang
Founding Designer & Design Lead, BrainCo
"Ariana has made a remarkable impact on our team as a UX Designer. During her three-month internship at BrainCo, she played a key role in organizing the design tokens and demonstrated an impressive understanding of building design systems. Her data analysis skills and excellent presentation abilities truly set her apart.
She collaborated effectively with various designers and developers, fostering a positive working environment. At the end of her internship, she provided a thorough summary of her methods and insights during the design team review, which was both insightful and well-received."
This industry experience has boosted my understanding of design systems and helped me accumulate crucial experience in collaborating with developers for design handoff. As I pushed for design maturity within the team, I also found myself passionate about optimizing team processes.
I don't just create designs; I build systems that empower teams to work more efficiently and deliver more meaningful user experiences. With a keen eye for detail and a commitment to continuous improvement, I'm excited to bring my passion for design systems and user-centered design to organizations seeking innovative solutions.