Abbott Labs

Site Audit

Atomic Design System

🏆 Recognized by Design Rush as one of six Best Colorful Web Designs, January 2024

How can two different eCommerce brands be visually united under one parent company?

Summary

Abbott was looking for a new brand expression for both Pediasure and Ensure EURISA websites that was unique enough for each distinct brand but able to callout to the other site as part of the Abbott family.

Role

I audited the Pediasure site and documented the current style guide for web. I worked in a team of three designers for both site redesigns but was the primary designer in the later stages of the project.

Research

We performed audits on Pediasure’s competitors, both existing Abbott sites, and the Ensure Buy Now page to get a big picture understanding of the product space, improvement areas, and user pain points.

We then combed through both sites to document existing components, rank their effectiveness, and finished with an analytics assessment to get a baseline of user engagement.

User Pain Points

Difficult to navigate on mobile even though a majority of users visited on their phones

Lack of next step hierarchy, too many CTAs

Purchasing on Amazon comes by surprise when browsing the site

Charts and diagrams are unclear and wordy

Goals

Analyze existing websites on thematic, content, and technical bases

Create foundational site components to provide consistency between regional pages that have fallen out of date

Find an updated expression of existing style guidelines

Achieve distinct web style guidelines for each brand that still align with each other under the same corporation head

Visual Design Elements

Scrollable Mockups

Pediasure Homepage

I combined the best parts of three different blue sky homepage exercises to find a balance between kid-friendly silliness and parent mindfulness.

Static

Scroll

Static

Scroll

Pediasure Registration Page

Email capture was essential for Abbott on both Pediasure and Ensure sites so Abbott could easily reach their audience with recipes, updates, and marketing materials.

Static

Scroll

Static

Scroll

Ensure Homepage

The color yellow is a through-line between brands, translating the childlike fun of Pediasure into joyful aging for Ensure.

Static

Scroll

Static

Scroll

Ensure Buy Now

Users needed enough information on the product before being funneled to the purchase site or location.

Static

Scroll

Static

Scroll

Impact

Redesigning the Pediasure and Ensure websites within existing brand guidelines is expected to bring a refreshed user experience, enhancing engagement and maintaining brand trust. Careful planning was be essential to strike a balance between consistency and distinctiveness, ensuring both websites maximize their future impact.