Building a design system from zero
Company
Kraken
Role
Design Systems
Timeline
2022
Before and after of the onboarding experience after the initial launch of the design system
Problem
No official design system
When I joined Kraken, there was no official design system. Teams were building products with various component libraries. The lack of a design system disjointed the product experience, created inconsistencies and caused duplicative work for both designers and engineers. This was costing the company valuable resources while decreasing our velocity.
Goal
Building Kraken’s first official design system
I was hired to help build a new design system from scratch to enhance the consistency and scalability of our product. This involved defining a cohesive set of design principles, creating reusable components, and establishing clear guidelines for usage. By focusing on a unified visual language and streamlined processes, the design system would not only improve the product and user experience, but it would also facilitate faster development, ensuring adaptability and scalability.
Challenges
Reluctance to adopt, conflicting ideas
Building a single design system faced challenges as some teams were reluctant to adopt it, struggling to see its value and believing their products were unique and too complex to align with a shared system. This mindset led to conflicting ideas about how to build certain complex components, creating a lack of alignment that hindered progress.
Overcoming obstacles
Open collaboration and showing value
We overcame these challenges by fostering collaboration among teams during the development of components, engaging them in discussions to understand their unique product features. This collaborative approach included stress testing our components within their designs to ensure they met specific needs and requirements. We held weekly office hours and did live workshopping for building components that teams could easily adapt and use. Additionally, we created and presented a comprehensive deck highlighting the value of the design system, demonstrating how it would enhance consistency, reduce redundancies, and ultimately streamline their workflows, which helped to gain buy-in and support from more teams and stakeholders.
Over time, we were able to show the design system’s value by building out standards, patterns and components that could be adopted by product teams. This enabled teams to spend more time on more complex flows, interactions and research, instead of building out granular components.
Outcome
One cohesive system
In the end, we were able to deliver one cohesive design language for the company to adopt. We established a tokenized foundations library and one cohesive component library. Our tokenized foundations was the basic building blocks that built our more complex, component library. We were able to create an effective and adaptable design infrastructure that better served the product’s goals and user experiences.
Ultimately, this solution still ultimately achieved our goal to increase our velocity, reduce technical debt, increase consistency and increase scalability of our products.
Impact
100% adoption across all teams within the organization, impacting 100 designers and front end 400+ developers
Estimated 40% reduction in resources from design and engineering, estimated $2M cost savings for the company to date
80% increase in product consistency, enhancing user experiences and establishing brand trust