Design System & Site Redesign for Similac

UX / UI Design

Project Takeaways

  • Similac.com was redesigned to overhaul the look and feel, improve usability, and achieve business goals of improved consumer acquisition, and increased sales.
  • The site redesign included migration to a new CMS platform and ecommerce vendor integration.
  • A design system was created to support the redesign, as an easy to use single source of truth for our team and partners to reference specs, documentation, and interface functional annotation.
  • The UX team advocated for the value of the design system and ROI to the leadership team. We established new software processes and studio practices for agency adoption.

Similac is the number 1 brand of baby formula chosen by hospitals, and recognized by consumers as a long trusted brand. It is made by Abbott Nutrition, a leader in nutrition science, research and development with the goal to deliver nutrition products and education that meet the changing needs of families across the world. To give babies a strong start, Similac offers a diverse line of research-driven products that provide the essential protein, minerals, and other nutrients to support an infant’s growth.

Site Redesign

To stay relevant and maintain its trusted brand status in a competitive market, Similac's website was planned to be overhauled and launched 2021. The Similac brand was refreshed in anticipation of the redesign to update the look and feel. The UX team partnered closely with UI and visual designers to advise design and styling of components and wireframes as the system was developed.

wireframe
Similac UI Design
New Similac UI
Progressing levels of fidelity

Working directly with the strategy and analytics teams, we made improvements based on data, research, and best practices to address user needs and hit business goals. To connect our users with Similac’s high quality content faster and easier, we consolidated existing content, reduced page count, developed more scannable content, and increased the ability to filter by attribute on landing pages. We built in solutions to increase consumer acquisition, from the site through organic traffic as well as paid media.

Similac user flow
Sample user flow

The redesign included some big technical changes; migration to a new CMS platform, incorporation of an ecommerce vendor, creation of a design system, and new third party integrations. With the help of our business and development partners, we implemented technical solutions that would improve functionality, with user needs, and business goals in mind.

ux planning
ux planning

Design System Creation

As the redesign touched every part of the site, the creation of a design system was critical. It was designed to be the baseline source of truth for the Similac design team and project partners, to build off of, improve user interactions, create efficiency, and save money over time. This resource houses component catalogs, documentation, functional annotation, style & use guides with links to supporting software apps and platforms.

Similac design system
Design system dashboard
Similac design system
Similac design system
Similac design system
Similac design system at a glance.

Our small UX team advocated for the creation of the design system and adoption of new studio software and practices. We pitched the value of a repeatable design system to the leadership team emphasizing increased efficiency and savings over-time, by reducing instances of costly customizations and creating a more structured and guided way for our team to build solutions for product problems.

I had the opportunity to contribute to every aspect of the design system's creation. We leveraged design thinking and atomic design principles to build the system. I worked as a designer and architect to create user flows, sitemaps, wireframes, prototypes, and UI elements, leading the design on some key sections of the redesign.

Outcome

The design system was implemented for the Similac web redesign, the impact of which was felt across all teams that contributed to the redesign project—it helped to build trust and improve transparency among teams and disciplines, while unifying the interface and reducing the need for expensive custom design solutions. The Similac redesign is set to launch in 2021.

Tools

Sketch, Abstract, Overflow, Invision, Zeplin, Zeroheight, Adobe Experience Manager, Magento, Adobe Rendition

Design system diagram
Working process and design system ecosystem