Haven Design System
UX RESEARCH | UX/UI DESIGN | USABILITY TESTING | PROTOTYPING | DESIGN SYSTEM
Timeline: 2023 - 2024
Overview: In a fast-growing product environment, our team faced challenges with design consistency, cross-functional collaboration, and scaling. As the product evolved, maintaining a unified look and feel became increasingly difficult, affecting user experience and onboarding.
Our team of designers, developers, and product managers decided to build a robust design system that would serve as a single source of truth for design principles, patterns, components, and guidelines. The goal was to create a tool that not only facilitated consistency in the design but also fostered a common language between designers and developers. This case study outlines how we successfully developed this design system and the positive impact it had on our team and product.
Problem
The product faced inconsistencies, a lack of clear design guidelines, scaling challenges, and inefficient cross-functional collaboration, all of which hindered both design quality and team productivity. These issues made it difficult to maintain a cohesive user experience and streamline workflows.
Goal
The goal was to create design consistency, establish a common language between teams, improve efficiency, and future-proof the design process for sustainable growth. This would ensure a cohesive experience and streamline workflows as the product and team evolved.
Approach
We approached the creation of the design system in an iterative, collaborative, and user-centered way. The process unfolded over several phases, ensuring that the needs of both designers and developers were met at every step.
Research & Discovery
We began by understanding the challenges faced by both design and development teams through interviews and workshops with key stakeholders, including designers, developers, and product managers. This research, along with an audit of existing UI components, highlighted inconsistencies and identified key themes for the system's development, such as the need for clear typography and color guidelines, a shared understanding of UI components, and reusable code components to speed up development.
Defining the Core Principles
We defined key guiding principles to align the team around a common vision, forming the foundation for all design and development decisions. These principles emphasized consistency, simplicity, modularity, scalability, and collaboration, ensuring a unified, flexible system that could evolve with the product and facilitate clear communication between designers and developers.
Building the System
With the principles established, we began developing the design system components through close collaboration between designers and developers. We created design tokens for consistency in colors, typography, and spacing, and developed a comprehensive color palette, typography guidelines, and layout grids. A reusable UI component library was built, including buttons, inputs, and navigation. Developers implemented these components using Vue.js, ensuring flexibility and reusability, while a style guide documentation site was created for easy reference and collaboration.
Documentation & Onboarding
We prioritized clear documentation to make the design system easy to use, including a website with components, guidelines, code snippets, and best practices. We also created a contribution model for team members to suggest improvements and provided onboarding materials to help new team members quickly get up to speed.
Result
The launch of our design system aimed to ensure consistency, improve collaboration across teams, and accelerate time to market. It also focused on scalability and streamlined onboarding, making it easier for new team members to contribute quickly and effectively.
Takeaways
A successful design system requires close collaboration between design and development, with clear guidelines and iterative feedback to ensure scalability and meet evolving needs. By creating a unified system, we improved product consistency, fostered collaboration, and streamlined delivery, reducing errors and rework.