Context
Overview
Worked on a design system that became the foundation for Treehouse Lab's flagship product, Hyperion. Over the course of four months, I collaborated with designers and product managers to build a system with over 20 design components.
The design system enhanced consistency, product quality, and team productivity by streamlining workflows and reducing design-related issues.
the product
Treehouse Labs empowers users to confidently navigate cryptocurrency markets through Hyperion, its portfolio management and market intelligence platform.
Source: https://www.treehouse.finance/
The Situation
New features and design components were continuously added to Hyperion, but the existing design system lacked scalability and consistency, resulting in several challenges for the design team:
1. Inconsistent UI elements across different parts of the product
2. Difficulty maintaining design coherence as new features were introduced
3. Time-consuming design adjustments due to the lack of standardized components
This resulted in compromised design quality, reduced efficiency, and diminished trust in the design team, further highlighting the need for a revamped design system.
Our Objectives
Our primary goal centered on creating a scalable design system that could fit the team's current and future needs, such as handling the continuous expansion of Hyperion's features while addressing current challenges.
Key principles behind our design system:
Consistency: Ensure alignment in design elements, styles, and interactions across the product for cohesive user experience and fostering brand recognition
Scalability: Build a system that where components can be re-used and built upon, allowing for the easy addition of new components
Collaboration: Empowering every designer to contribute and utilise the design system, promoting alignment across the team
The Process
Design Audit
Starting with a compilation of each component's use cases, we conducted a component audit to identify design elements that required immediate attention.
Example of the design inventory process in Figma
One example of the issues uncovered was with our icons, where we encountered inconsistent sizes and the use of different icon packs.
Given that icons serve as foundational elements within numerous design components, these inconsistencies rippled through many other design components in the system.
Research
We conducted regular discussions with the design team to understand their workflows and align on the system's direction. We further looked at approaches from established organisations, such as Atlassian, Shopify, Salesforce and IBM.
Examples of design systems referenced
Design Approach
Atoms, Molecules & Organisms
We developed the design system using the atomic design approach, starting with foundational elements like icons and fonts (atoms), progressing to components such as buttons and forms (molecules), and ultimately building full, complex pages (organisms).
This approach was necessary and effective as any edits to small components, like icons, will be propagated across higher-level design elements, ensuring that every component in the system remain updated.
populating the system
As we built the design system, key considerations included Figma page organization, component and layer naming, and the creation of variants.
Snippets of how we documented different elements
Clear documentation of design elements like fonts and icons was essential to maintain consistency across the team. We detailed their specific use cases to ensure a unified approach throughout the project.
We categorized icons into four groups, each with three sizes (12px, 16px, 24px) and two states (default and hover), making it easy for designers to quickly find and toggle between icon variants.
Modular Components
Our components were designed to be modular, offering users the ability to customize a single main component to fit their requirements. This approach minimizes the need for multiple variants while providing ample flexibility for designers.
Documentation
We made sure to include detailed documentation with each design component. This helps designers understand how to use it or where it's already being used within the platform. It's like a handy guidebook that provides context for each component's usage.
How certain components are used
Examples showcasing the use of design components
Conclusion
system Testing
After months of hard work, we were nearing the completion of the design system. Our final step was to validate its usability by implementing the new components to recreate our existing high-fidelity screens.
Re-creating existing designs
This step is important in evaluating whether a component is overly complex or rigid for our designers to work with.
team onboarding
As the design system evolved over weeks and designers became more familiar with it, the entire process streamlined significantly. While ongoing additions to new components persisted, all changes were meticulously documented and updated across our files.
Additional guides in the design system
Results
🔸 Increased design quality
The design system became the team's single source of truth, housing all the latest assets, rules, and guidelines. This alignment ensured consistent design elements and unified everyone's approach across the board.
🔸 Increased work efficiency
Reusable components and standardized guidelines streamlined the design and development process, reducing redundancy. Designers could now quickly use components and focus on other tasks, speeding up development.
🔸 Improve product scalability
As the product grew, the design system easily adapted to new components, maintaining consistency across the team's diverse contributions, even as the scope expanded.
The design system became the team's single source of truth, housing all the latest assets, rules, and guidelines. This alignment ensured consistent design elements and unified everyone's approach across the board.
🔸 Increased work efficiency
Reusable components and standardized guidelines streamlined the design and development process, reducing redundancy. Designers could now quickly use components and focus on other tasks, speeding up development.
🔸 Improve product scalability
As the product grew, the design system easily adapted to new components, maintaining consistency across the team's diverse contributions, even as the scope expanded.