Audit and Global Design System
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.
CROSSFIT
2023 TEAM PROJECT
BETTER YOUR HEALTH
2024 TEAM PROJECT
// BRAND AUDIT
// COMPONENT INVENTORY
// DESIGN SYSTEM
// PLAYGROUND FILE
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.
The Design System
To start, I created a Components checklist, which has a list of all the foundations, elements and components needed to be created or updated if already existed, for the design system.
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 robust theming 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.
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.