Design System

How can I create a design system that ensures consistency across the brand and product?

As the sole designer in the newly formed design team, I worked closely with the VP of Design and Art Director to determine the direction the brand, unifying all digital products, creating a scalable design system that matched the product and vision of the Eddie by Giddy brand.

‍

‍

‍

Before making any decisions I conducted a full design audit of the existing framework, UI components, colors, typography, and existing design system.

What I found:

• Redundant components: multiple versions of buttons, variants, and minor differences of the same content
• Inconsistent spacing: related to type hierarchy, leading to usability and accessibility issues
• Misalignment with brand: the brand had evolved into a more sleek and modern direction, while the site still used outdated, harsh tones and rigid layouts
• Developer pain points: engineering feedback highlighted the lack of correct documentation, leading to differences between the original design and published digital products

I also conducted a detailed competitive analysis of premium e-commerce health and wellness brands to identify design patterns that resonated with our target demographic.

‍

‍

‍

Expanding on our key goals and strategies.

Working with the design team, we aligned on key goals:

• Unify visual identity across all digital platforms. (Email Marketing, E-commerce, B2C channels)
• Modernize the interface to reflect a more premium, trustworthy experience
• Build flexible, reusable components that reduce dev/design time

After many stakeholder meetings and ideation sessions, I mapped out the foundation of the new design system:

• Color System: a balanced color palette using the brand's signature color with rich accents to reflect masculinity and trust without feeling clinical
• Typography Hierarchy: selected modern, accessible typefaces with clear scale for better readability
• Spacing & Layout Grid: created consistent spacing tokens and a responsive grid system
• Component Library: defined sets of components—buttons, form elements, cards, and banners—with multiple states (hover, disabled, error, etc.)

‍

‍

‍

I built the new design system in Figma with organized styles, variables, and interactive components.

Throughout the process of documenting and creating these design blocks, I referenced many great design systems and benchmarked them to create the foundation of Eddie by Giddy's design system. From my findings, I designed a design system that included:

• Atomic structure: from base componets to full-page templates
• Documentation: clear usage guidelines for each component for the development team
• Collaborated with devs: provided handoff, references, and redline specs

‍

The design system refresh significantly improved both the internal workflow as well as our user experience.

As the sole designer, this project pushed me to balance design vision with practical scalability, all centered around user experience and improving internal workflow

Working alongside seasoned creative leadership, I learned to build not just a design system—but a design foundation that supports product growth and brand evolution.