Thinx Inc. Design System

Building a scalable multi-brand design system in Figma to unify Thinx, Speax, and Thinx(BTWN) under one cohesive digital framework, streamlining collaboration and accelerating product launches.

Role

UX/UI Designer, Design Systems Lead

Industry

E-commerce, Health & Wellness

Duration

The Challenge

Thinx Inc. had multiple brands (Thinx, Thinx(BTWN), and Speax), each with distinct branding, typography, and visual language. Marketing needed to present them as sister brands under one umbrella, with shared navigation and cross-site links. Designers, developers, and marketers were working across separate systems, leading to duplicated effort, inconsistent experiences, and misaligned communication

Benefits of a Unified Design System

Creating a single, atomic-design-based system in Figma solved these challenges by:

Providing a single source of truth across three brands
Enabling rapid iteration through reusable components
Reducing wasted time on redundant design and dev work
Creating plug-and-play flexibility for marketing and product teams
Improving communication between design, development, and brand
Ensuring scalability, accessibility, and consistency across platforms

The Approach

Research-Driven

We ran interviews, usability tests, and internal audits of marketing and product assets to understand gaps and redundancies.

Human-Centered Design

We built flexibility into the system so each brand could maintain its unique voice, while feeling connected to the larger family.

Collaboration

Design, product, content, and engineering collaborated continuously to ensure accuracy, feasibility, and empathy across all components.

Design System Thinking

We used Atomic Design principles to structure the system, with everything built in Figma for maximum transparency and ease of use. Each piece was annotated for states, accessibility, and interactions, ensuring smooth developer handoff.

The Challenge

Benefits of a Unified Design System

Creating a single, atomic-design-based system in Figma solved these challenges by:

Providing a single source of truth across three brands
Enabling rapid iteration through reusable components
Reducing wasted time on redundant design and dev work
Creating plug-and-play flexibility for marketing and product teams
Improving communication between design, development, and brand
Ensuring scalability, accessibility, and consistency across platforms

The Approach

Research-Driven

We ran interviews, usability tests, and internal audits of marketing and product assets to understand gaps and redundancies.

Human-Centered Design

We built flexibility into the system so each brand could maintain its unique voice, while feeling connected to the larger family.

Collaboration

Design, product, content, and engineering collaborated continuously to ensure accuracy, feasibility, and empathy across all components.

Design System Thinking

Library Contents

The design system followed an Atomic Design structure:

Assets (Atoms): Colors, typography, spacing, borders, icons, imagery
Elements (Molecules): Buttons, form inputs, labels, navigation links
Blocks (Organisms): Cards, sliders, product modules, content banners
Sections (Templates): Navigation bars, footers, product grids, educational modules

Each component included states (hover, active, disabled, error), documentation for responsive breakpoints (HD desktop, desktop, tablet, mobile), and notes on microinteractions and animations. Documentation was versioned to track old and new assets, ensuring smooth transitions without breaking live experiences.

Library Contents

The design system followed an Atomic Design structure:

Assets (Atoms): Colors, typography, spacing, borders, icons, imagery
Elements (Molecules): Buttons, form inputs, labels, navigation links
Blocks (Organisms): Cards, sliders, product modules, content banners
Sections (Templates): Navigation bars, footers, product grids, educational modules

The Solution

The result was a flexible, multi-brand design system that unified three distinct audiences under one umbrella. The library could scale to support new landing pages, campaigns, and product education modules without starting from scratch. Developers had a shared language with design, reducing QA cycles and speeding up launch timelines.

Impact

Streamlined design and dev cycles across three brands
Reduced inconsistencies and redundant work
Improved cross-team collaboration and communication
Delivered scalable, accessible, and user-friendly experiences
Supported tri-brand navigation and cross-brand shopping, driving higher engagement

Key Takeaways

This work wasn’t just about efficiency—it was about creating a human, accessible, and adaptable system that balanced brand individuality with family cohesion. By structuring the library through Atomic Design in Figma, we gave Thinx Inc. the foundation to design faster, communicate better, and scale seamlessly across multiple brands.

Key Takeaways

Other projects

Know Your Flow Tool

A personalized digital quiz that helped new users find the right Thinx products by turning their cycle routines into clear, customized recommendations.

Thinx (BTWN) ReDesign

Launching a teen-focused product line with a digital experience designed to balance the needs of both teens and their caregivers.

Speax ReDesign

Rebranding and redesigning a legacy site to unify three brands under Thinx Inc while doubling conversion rates and driving cross-brand growth.

Zest Website Design

Designing a sleek, modern e-commerce experience for a new customizable furniture brand launching in China.

Uni K Wax Rebrand

Redesigning the brand identity and digital presence of a national waxing studio to reflect its premium in-studio experience and drive franchise growth.

MICHELLE FLACKS

MICHELLE FLACKS

MICHELLE FLACKS