Global Design System

I was part of a team that led the development of a comprehensive design system for Better Your Health, a parent brand overseeing multiple sub-brands within a unified e-commerce platform. While each sub-brand retained its distinct identity, they shared a consistent digital experience. My focus was on creating global design system that encompasses the foundational elements and components for all the brands.

Context and Challenge

Better Your Health is an online platform that sells nutritional supplements from various brands. Its primary purpose is to offer a convenient, single-cart shopping experience for users to purchase supplements addressing different health needs.

This project faced two primary challenges. Firstly, it was crucial to maintain brand consistency across multiple sub-brands while simultaneously preserving their unique identities within a cohesive design system. Secondly, the project had to address the shortcomings of existing, fragmented design systems that proved ineffective in supporting the diverse needs of each sub-brand.

Brand Identity Audit

TO START

As a team, we all the designers conducted a comprehensive review of each sub-brand's design assets, meticulously analyzing their color palettes, typography, and visual elements. We used a Figjam board for collaborative visualization and analysis of the foundational elements, components, and overall structure of each existing design system.

To facilitate a comparative analysis, screenshots of the website were integrated into the Figjam board where the brand audit was conducted. This integration, alongside detailed component information, enabled a direct comparison between existing components and their actual usage, ultimately informing the definition of the components to be included in the new global design system.

Creating the Design System

I began by creating a Components checklist that outlines all the foundations, elements, and components necessary the design system, whether they need to be created or updated. This helps maintain organization and ensures we stay on without overlooking anything.

Starting with Foundations

Core Design Principles: A set of guiding principles that foster consistency and uniformity in the user experience, providing a clear and concise reference for designers and developers.
Layout Grid: A flexible grid system to ensure consistent layout and spacing.
Typography Scale: We developed a typographic system with a universal scale and brand-specific variations, defining font sizes, weights, and spacing. Prioritizing readability, especially on smaller screens, the system employs a modular scale based on the golden ratio for visual harmony. This flexible system adapts seamlessly across different screen sizes and devices.
Color Palette: A consistent color system was established, with a universal palette and brand-specific extensions, to ensure visual harmony and evoke the desired brand personality.
Media Sizes: Based on specific aspect ratios, ensure visual consistency throughout the site and limit the number of components.
Cropping System: Optimal placement of product images within containers, respecting spaces and proportions.

Key Features

Implemented a system that allowed to easily switch between different brand styles. This included:

Color Palettes: Customizable color palettes to match each brand's unique aesthetic.
Typography: Flexible typography settings to adjust font sizes, weights, and line heights.
Iconography: Brand-specific icon sets to enhance visual consistency.

Created multiple variations of core components to suit different contexts and brand preferences. For example:

Buttons: Various button styles (primary, secondary, tertiary) with customizable colors, sizes, and states.
Input Fields: Different input types (text, email, password) with adaptive styling and validation states.
Cards and Tiles: Flexible card layouts with options for image placement, content density, and action buttons.
Navigation and Footer: Responsive layouts, collapsible/expandable elements, with brand-specific customization options for images, content, and on/off features.
Content Sections: Responsive layouts for all brands with customizable image, text, and button placements, offering flexible layout construction options.

A crucial resource to guide designers and developers to build consistent and high-quality user interfaces. Created this documentation for the elements which required them. For example

Buttons: Since this element incorporated both regular variations and design tokens, it was crucial to clearly document its construction and usage.
Tiles: With many variations and toggleable options within each instance, it was essential to clearly communicate to the team when and how to adjust these properties.

Playground how to use file

Created a user-friendly 'How-to' guide for designers, providing clear instructions on using the design system. This includes a playground file with detailed descriptions and instructions for all necessary elements.

Iterative Design and Collaboration

The lead designer fostered a collaborative environment with designers, art directors, and product managers. This included regular design reviews and feedback sessions to refine the design system and ensure it met the needs of both users and developers.

Key Outcomes

By implementing this comprehensive design system, we achieved the following:

Increased Design Efficiency: The reusable component library significantly accelerated design and development process.
Enhanced Brand Consistency: A cohesive user experience was achieved across all sub-brands.
Improved User Experience: A well-structured and accessible design system resulted in a more intuitive and enjoyable user experience for all users.
Successful Development Handoff: Clear and concise documentation facilitated seamless collaboration between design and development teams.

By prioritizing user experience, efficiency, and brand consistency, we successfully delivered a design system that empowers Better Your Health to deliver exceptional digital experiences.

Project Details

BETTER YOUR HEALTH | 2024

This project and all its assets are the intellectual property of Create the Bridge, and Better Your Health. My work is displayed here for portfolio purposes only.