Johnson’s Baby Ingredient Transparency
DESIGNING AN INTERFACE TO CONVEY THE “WHAT” & “WHY” OF JOHNSON’S PRODUCTS
TOOLS: ADOBE XD, ADOBE ILLUSTRATOR
TEAM: ERIN SKURDAL (manager), ALEX GROSS (senior designer)
Project Summary
J&J Design is a design studio that operates as an internal design team that creates compelling end-user solutions across all the company’s business groups: Consumer, Pharma, Medical Devices and Corporate Communications. During my 10-week summer internship, I worked on the Consumer Healthcare team. My first project assisted the Johnson’s Baby team, where I designed an enhanced ingredient list experience for the product description pages of the Johnson’s baby website. I created a working prototype on Adobe XD to communicate iterative ideas to various stakeholders, working directly with the product owner to figure out which flows to move forward with. I worked directly with the product manager to iterate and build a new transparency tool. This transparency tool, an integral feature to the Johnson’s Baby website, aims to educate consumers on the ingredients that go into Johnson’s products. My prototypes helped expedite the iterative design process for the final features that shipped in September 2021.
🏃♀️ Onboarding a running project
Quickly after being introduced to the team, I met with my product manager to ramp me up on the existing project. We honed in on a main persona to align our focus on what innovative features we could build to make their lives easier.
PROBLEM
“How can we be more transparent about our ingredients in a way that will make sense to consumers?”
The current Johnson’s Baby website features a comprehensive list of ingredients inside a product, but does not resonate with customers. Customers cannot differentiate complex ingredient names let alone understand the “What?” and “Why?” behind Johnson’s Baby products.
⬇️ SKIP TO SOLUTION
🍼 Caring for Baby & Caring for Planet
Johnson’s Baby User Persona
⚠️ How to differentiate types of ingredients? They all look and sound the same!
Experimenting with a couple different ways to make information about natural, naturally derived, naturally identical, and synthetic ingredients (what a mouthful!) was definitely a challenge.
original ingredient list
⚠️ Seamless integration with existing architecture
One of the main challenges of innovating the transparency tool was that it was limited to drop-down menus. This allowed me to think about what information would benefit being at the surface level versus “hidden” in a drawer. The pill buttons on the original website are an anomaly for each of the products and have no consistency. So this wasn’t a feature that we could explore.
Wireframes & Initial Iterations
Wireframes and brainstorming — Johnson’s Baby 2021
Information Architecture
💃🏻 Cross-functional teamwork with Brand Design
I collaborated with the Brand Experience Design team to create and select appropriate icons for this experience. We explored the key factors of Johnson’s Baby products that were relevant to highlight.
SOLUTION
Caring for Baby & Caring for Planet
The new transparency tool was created to improve parents’ experience when searching for the best products for their babies. It highlights consumer friendly explanations about each carefully sourced ingredient, and how the product cares for both baby and the planet. We further broke down the list with an ingredient breakdown percentage visual and complementary subcategories.
Design System
🔑 3 Key Features
Caring for Baby & Planet — My main objective was to establish a consistent hierarchy that adhered as closely to the current architecture of the Johnson’s Baby website as possible. We concluded that blue would be the main interactive color, which applies to both icons and links. All icons, once clicked, snap to their respective content area.
Ingredient Breakdown — Each naturally derived ingredient was originally marked with an asterisk, but how could we further make these ingredients digestible to consumers? Using a leaf icon for a visual indicator of naturally derived, we added easy-to-understand descriptions of what each ingredient does.
Enhanced mobile shopping experience — The original website did not have a mobile scroll feature that would allow customers to shop the product. It was an interesting challenge to prototype a mobile scroll that would automatically show up as a user scrolled through the interface.
What’s next?
As of today, parts of the experience have been updated to reflect the requirements of our business partners. Design prototypes and files were handed off to the development team to successfully ship the product in September 2021. The next step would be to scale this ingredient transparency initiative to other brands under J&J Consumer Healthcare. I’m grateful to have joined a team that shipped out a majority of the design contributions I’ve made throughout my internship.
