Accelerating the finding of product-market fit with Design System for a Startup
Developed a design system to enhance efficiency, minimize repetition, and accelerate time-to-market for our projects.
Senior UXUI Designer, 2022 ~ 2024 at ONOW Enable
01 Project Overview
1.1 Background
I joined ONOW in February 2022 as their first UX/UI designer, alongside a junior designer. I quickly advanced to a senior role, leading a team of three members: one senior and two juniors.
Initially, our focus was on traditional coaching methods. However, after the pandemic, ONOW shifted towards technology-driven solutions. This transition led to the development of the SaaS Platform ONOW ENABLE in 2023. The Tinker Design System (UI Library Kit) was subsequently created to design ONOW ENABLE products, aimed at empowering female migrants.
1.2 Problem
As a startup, producing prototypes quickly is crucial for success. While we initially focused on visual and usability aspects, we realized this was time-consuming. To achieve product-market-fit, we must iterate rapidly, fail fast, and pivot to improve our chances of success. Additionally, the use of disparate UI libraries across products hindered scalability and created complexity in maintaining consistency and efficiency.
1.3 My Role
As a senior UXUI designer, I was responsible to define the scope and timeline, guiding strategic decisions and managing the system's development. Besides, I provided mentorship to junior team members and advocated for design system adoption within the organization.
1.4 Scope and Considerations
Developing a design system alongside product creation presents a unique challenge for our small UX team. With a strict two-month timeline and limited resources, we must be strategic in prioritizing which components to focus on first.
1.4.1 Exclusions
1.4.2 Inclusions
1.4.3 Next Steps
1.5 Timeline
With a tight three-month duration set for the initial version, I carefully planned a timeline based on the scope outlined above and presented it to stakeholders. Upon approval, we began by auditing the existing components in our products.
02 Implementation Part I
2.1 Process
Each system utilizes its own unique approach. In our quest for knowledge, we have studied the case studies of various systems and have chosen to incorporate elements from Eightshapes Specs's Process and Brad Frost's Atomic Design Approach. Our refined process is as follows:
Despite the complexity of our approach, we did not follow a strictly linear path. We work in parallel, meeting daily to discuss progress and ensure timely delivery of our projects.
2.1.1 Audit
Within a span of 10 days, we conducted a thorough audit of all components utilized in our products, including the styles.
The structure depicted in the following image was originally created by Honza Toman and has been modified to suit our specific requirements.
This audit results in the creation of an interface inventory, complete with screenshots of each component.
2.1.2 Synthesize
Once all the components are acquired, we proceeded to synthesize by analyzing the anatomy, types, sizes, and styles of each component. We also reviewed key questions to check for similarities and ensure that important pieces are not overlooked.
2.1.3 Design
The subsequent phase involved initiating an ongoing series of components, following the principles of Atomic Design.
2.1.3 (a) Color Palette
With a focus on accessibility, we crafted a palette that harmonizes with every facet of our system. This palette is thoughtfully structured into four categories: Brand, Feedback, Accent, and Neutrals.
2.1.3 (b) Typography
We chose the 'Inter' font for its cleanliness and high readability, crucial for engaging users in complex tasks within our products.
2.1.3 (c) Iconography
Following discussions with our developers, we selected Material Icons due to their clean design and widespread recognition, aligning perfectly with our design principles.
03 Implementation Part II
3.1 Process Cont'd
3.1.1 Building components configurable and composable
We adhere to the principle established by Nathan Curtis of EightShapes Specs - “Make the common configurable and make the uncommon composable”.
We have implemented his suggested 'Subcomponent' method, which effectively addresses a multitude of design system challenges such as detaching instances, avoiding the need to create new components from scratch each time, and preventing the endless addition of properties to components when current options are insufficient.
3.1.2 Publish
As the library is published, we included a changelog within the library and make a good practice to add change description every time we published and updated the system.
3.1.2 (a) File Organization
As part of our ongoing efforts to enhance efficiency and consistency in our design process, we understood the task of organizing our design system in Figma.
We adopted a structured approach to organize our design system in Figma, comprising the following key components:
04 Current Progress
4.1 Next Steps
We've moved forward with the next steps we promised, and here's where we stand now.
4.1.1 Design Tokens
We began implementing these design tokens in December 2023. Despite working on other projects simultaneously, we made steady progress each cycle. Now, we've successfully applied all color, typography, space, border and elevation tokens across our products.
4.1.1 (a) Naming Convention
Before implementing design tokens, we collaborated with our developers to define a naming convention system based on our usage and needs. This involved creating a naming hierarchy that we currently use to name our tokens. Our naming convention system is structured as per the image below.
The pages are organized in
Naming Convention
Documentation
Documentation Format
Principles
Lookup List
Tokens Application Tracker.
4.1.1 (b) Tokens Pipeline
After tokens naming is finished, the tokens are then passed into engineering site according to this pipeline.
While this pipeline draws from our initial experience, the successful integration of tokens into our design system has had a significant impact on our development processes.
4.2 Documentation
We documented our components once we were confident they were reliable for our products. After applying our first MVP components, we studied their behavior and usage, making continuous iterations where needed. The documentation process began in March 2024. Instead of documenting immediately after creating components, we defined their usage within Figma while applying tokens to each element. We use Figma and Supernova for documentation and reference sites.
Accomplishments and Results
Our Design System has been an indispensable asset for our UX team, dramatically increasing our design production speed by fourfold.
Faster Time-to-Market
It has significantly sped up our time-to-market. We efficiently developed the ONOW ENABLE CRM platform within three months using its capabilities. Our CRM team now iterates rapidly with early adopters, and we create prototypes for future projects, allowing us to test assumptions before release.
Provide Rapid Testing
It helps us shape our products for upcoming cycles, aiding decisions on whether to continue developing certain features by facilitating rapid testing.
Streamlined Workflow
TDS provides our small team with a structured workflow and guiding principles for decision-making.
Consistency across all of our products
Achieved consistency across all our products , ensuring a unified look and feel, and enhancing the overall user experience.
Lessons Learned
While I've previously built dedicated UI libraries for small products, developing a robust design system for a SaaS product like this has been a novel experience. Despite not being experts in building and managing design systems, this endeavor has provided invaluable insights.
Research Matters
It's important to research and consider project needs instead of blindly adopting features from other systems.
Proper File Organization
As the design system grows, maintaining proper file organization becomes increasingly critical. Implementing measures to prevent variant explosion ensures a manageable and scalable system.
Handshake with Developers
Even with the UI library, it is crucial for developers to participate and understand their coding practices and preferences right from the beginning. This collaboration ensures that design components are seamlessly integrated into the development process. Although we may not have initially ensured their participation during the initial component building phase, we made sure to incorporate it in our second iteration along with the implementation of design tokens.
Role of Design Tokens
Design tokens efficiently maintain consistency in the system. However, it's equally important to establish a naming convention system that reflects the design decisions associated with each token.