Step 1.

Research & Analysis

The primary driver for a new design system was a significant Threecolts rebranding, introducing a vibrant visual language with a rainbow gradient for the parent brand and distinct product colors derived from it. Key elements included the Inter font family for unified typography and the adoption of Google Material Symbols for iconography, supplemented by bespoke icons. The brand tone was upbeat and focused on impactful change.

threecolts.com 1.0 → threecolts.com 2.0

An audit of existing product UIs (built with the previous, less visually distinct system) revealed key areas for improvement. While major component gaps weren't the primary issue, the existing components felt dated and didn't align with the new brand aesthetic. Furthermore, they underutilized modern Figma features like color variables and Auto Layout, hindering design efficiency.

Consultations with designers who worked on the previous system and those currently using it confirmed the need for a visually refreshed and more flexible component library that better leveraged Figma's capabilities to ensure consistency and streamline workflows across Threecolts' diverse product range. The challenge was to translate the complex new brand identity into a scalable and user-friendly design system.

Guiding Principles

After completing analysis, I identified five key principles that would need to be factored in during the development of our new design system:

• Strong New Brand Identity: The high contrast black and white, the rainbow gradient and product-specific colors all needed to be included in the new system - but used very deliberately.
• Outdated Components: Existing UI elements required a modern visual refresh.
• Figma Feature Opportunity: Leveraging variables and auto-layout was crucial for efficiency and scalability.
• Consistency Across Products: The system needed to accommodate the parent brand and individual product identities cohesively. One Threecolts product should resemble another.
• Universally Useful: The design system must be usable and useful—not only in product designs, but also in marketing designs, video etc.

Step 2.

Defining the Solution

Our approach centered on translating the core elements of the new Threecolts visual language into a structured and efficient design system within Figma.

Color and Typography

• Visual Language Framework: Establishing clear guidelines for applying the parent brand's rainbow gradient and the product-specific color palette across UI elements. This included defining rules for accent usage and ensuring brand recognition while allowing for product differentiation.
• Component Library Overhaul: Redesigning existing components with a modern aesthetic that aligned with the new brand. This involved a focus on clean lines, improved visual hierarchy, and adherence to the established color and typography guidelines.
• Figma Feature Integration: Systematically implementing Figma features like variants and properties to create flexible and easily configurable components. We also heavily utilized Auto Layout to ensure responsiveness and maintainability. Color variables and, where appropriate, variable modes were implemented to manage the complex color palette and potential future theming needs.
• Foundations Definition: Clearly defining and documenting the core design tokens for color, typography (Inter font family with defined scales), spacing, and sizing. This provided a consistent and scalable foundation for all components.

Step 3.

Building and Iterating

The development of the design system was a collaborative effort with the three other UX designers on the team. We divided component responsibilities and held regular review sessions to ensure consistency and address any challenges.

Button and Calendar Components

As the team worked, our iterative process involved:

• Building Component Prototypes: Building initial versions of key components in Figma to test their flexibility and usability.
• Team Review Sessions: Sharing these prototypes with the wider team (design and engineering) for feedback and incorporating their suggestions.
• Pilot Application: Selectively applying new components to existing product designs to identify any integration issues and refine the system based on real-world use.

Step 4.

Final Design System and Outcomes

The result was a comprehensive design system in Figma that served as a central resource for the entire design team. Key outcomes included:

• Brand Alignment: A UI that consistently reflected the modern and vibrant Threecolts brand, including the parent gradient and product-specific colors.
• Increased Efficiency: Designers could now build interfaces more rapidly using well-structured and easily customizable components leveraging Figma's features.
• Improved Consistency: The defined tokens and standardized components led to greater visual and functional consistency across all Threecolts products.
• Scalability and Maintainability: The system's foundation in design tokens and Figma variables allows for easier updates and future expansion.

InventoryLab and Tactical Arbitrage User Interface Examples

What I learned

Building a design system for a complex brand with numerous products requires a strong understanding of both the brand identity and the practical needs of the design team. Key points included the importance of:

• Clear Documentation: While concise, ensuring core principles and component usage were well-documented was crucial for adoption.
• Early and Frequent Collaboration: Regular communication and feedback loops with the design team were essential for creating a useful and adopted system.
• Iterative Refinement: The system wasn't perfect from the start; continuous iteration based on usage and feedback was key to its success.