Abbott Nutrition: Boilerplate Design System

UX / UI Design

Project Takeaways

  • Our UX team created a future-forward Boilerplate design system to be repurposed for all Abbott Nutrition brands.
  • Built for reuse; as each nutrition brand (Similac, Ensure, etc.) redesigns its site, the Boilerplate is duplicated and styled to the individual brand guidelines.
  • The Boilerplate design system is an easy to use single source of truth for our team and partners to reference.
  • 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.

Abbott Nutrition is a division of Abbott, the global healthcare company. As a leader in nutrition science, research and development, Abbott Nutrition is behind some of the world's most trusted names in pediatric, adult, and healthy living nutritional product brands such as Similac, PediaSure, Pedialyte, Ensure, ZonePerfect, and Glucerna.

Opportunity

Several Abbott Nutrition brands were preparing for a web redesign. The portfolio of products is diverse spanning multiple markets, demographics, and use-cases. The site redesigns also included a CMS platform migration to Adobe Experience Manager and e-commerce platform integration. Abbott Nutrition shares some difficulties that other enterprise organizations face; scaling, maintaining consistency in the developer/designer handoff, and knowledge sharing across different teams. This created the perfect conditions for our studio to propose the creation of a scalable design system.

Solution

The UX team proposed the Boilerplate, a standardized design system template. Each Abbott Nutrition brand uses the Boilerplate as a starting point to build its design system. The Boilerplate is duplicated and styled according to the individual brand guidelines (Ensure, Similac, etc.).

The Boilerplate is universally designed to accommodate the range of Abbott Nutrition user and business needs, knowing each brand is different. It is the baseline source of truth for studio teams and project partners to build off of, to 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.

boilerplate ui
The Boilerplate dashboard

My Role

As a member of a small UX team, I contributed to every aspect of the Boilerplate's creation. We leveraged design thinking and atomic design principles to build taxonomies, component libraries, user flows, wireframes, and prototypes. I had the opportunity to lead the design for some key sections of the system and share presentations with stakeholders for buy-in. Our work would not be possible without our extended studio team of visual designers, writers, project managers, stakeholders, developers, and business technology partners.  

process diagram
Building a branded design system based on the Boilerplate foundation.

Outcome

The Boilerplate was created to make our design process more efficient, scalable, and consistent, and to bring teams together, bridging the gap between developers, designers, and other project partners. Our team advocated for the creation of the Boilerplate 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 teams to build solutions for product problems. The response since launch has been overwhelmingly positive.

boilerplate uiboilerplate ui
Global header components & atoms documented with functional interface annotation.
boilerplate uiboilerplate ui
Atom, component, and template specs integrate directly into  the design system with Zeplin.

Tools

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