See Similac Website

A design system was implemented in close partnership with development and brand stakeholders specifically to ensure brand cohesion across all platforms while simultaneously reducing design debt and overhead costs. This is beneficial for a few reasons:

Reduced Design Debt: By consolidating styles and components, the system prevents the proliferation of inconsistent or redundant design variations (often called "design debt").

Single Source of Truth (SSOT): It provides a shared language and reference point for Designers, Developers, Product Managers, and Marketing. This drastically reduces miscommunication and ambiguity.

Cost Savings: The accumulated efficiency gains across design, development, quality assurance (QA), and bug fixes ultimately lead to substantial long-term cost savings.


I was directly involved with every component of the system, from styling, image creation to final page layout delivery.


Style sheets were created to easily pull-thru brand colors and fonts

Working from the Atomic Design System principles:

• Atoms were styled first (basic HTML elements like buttons, inputs, and labels)

• Molecules followed, combining these atoms (e.g., a search field made of a button, label, and input)

• Organisms (such as the Header and Footer) were built from the molecules

• Finally, these elements were assembled into Templates, leading to the construction of full Pages

These are a very brief example of these elements

I leveraged the approved wireframes to architect high-fidelity, production-ready layouts. This involved the careful integration of brand-specific imagery, final marketing copy, and necessary legal disclaimers, resulting in fully fleshed-out pages ready for handoff to our development team.

The final deliverable successfully launched a new look and feel, ecommerce pages, reduced overall pages, and is successfully managed thru a new CMS (AEM). And the design system delivered a 30% decrease to future page updates.