Kenvue

DateJuly–Oct 2022

RoleArt Direction
UI Design
Illustrations

ClientJ&J Consumer Skin Health

TeamBrandon Huynh (Art Direction)
Brian Castillo (UI/UX)
Cassandra Irizarry (Copywriting)
Devin Schvaneveldt (UI/UX)
Stephanie Pipes (Creative Direction)

Overview

I established the design system and visual style for Kenvue’s Skin Health professional site—an on-brand adjacent space dedicated to providing dermatologists clinical data and product information for their patients.

Highlights:
• Led the Art Direction
• UI Design Decisions
• Created + Curated Visuals
• Learned Dev Best Practices

Context

Johnson & Johnson’s split its business to streamline its consumer health and pharmaceutical brands. They needed a site to house all their resources so that derms could easily provide patients with recommendations on products, ingredients, or skin conditions.

Our ChallengeUnify all the skin health brands in the professional space without any official brand guidelines available to us yet.

Our GoalsEngage derms to continually learn and obtain value from Kenvue and its brands.
‍
Provide value in procuring patient and product info, clinical data, and product samples.
‍
Keep it clean, clear, and concise with communication rooted in science that feels relatable, not overly academic.

Additional considerations my team put together to help drive the direction early on.

Elevate and Engage

Pages feel like a product catalog. Functional but not engaging. Feels dated, transactional, and impersonal—no reason to revisit.

Showcase Strength

Strong data folded under resources and multiple clicks—easy to miss. Too many PDF downloads for what should be HTML pages.

Patient Friendly

Pages are copy dense. Not approachable visually. Resources may at times be detailed to patients.

The Head

Dermatologists and primary care physicians
Pragmatic and empathetic, looking for resources to simplify tasks, demonstrate top performance or redefine efficiencies, so when they take on more, they can do so without burden.

The Heart

Nurses, physician assistants, and office managers
Looking for a resources efficiently and confidently. Expect to find new ways to engage and educate themselves, and patients.

COLOR AUDIT

Starting off on the Right Tones
‍

I leveraged Neutrogena’s and Aveeno’s brand colors to inform our initial palette—the only bit of Kenvue knowledge we had was that the primary color would be green.

I worked with our UI/UX team to ensure accessibility was met, landing on muted tones so that the array of brands could shine individually, and still family together.

CURATING IMAGERY

Looking for some “DAM” images

Our budget was tight, so we needed to be resourceful and cost effective. I honestly can’t recount how many hours I spent on J&J’s Web DAM (Digital Asset Management) sifting through pages of assets for any photos or graphics we could potentially use.

graphics & illustrations

Elevating what we have
‍

Existing feedback said professional MD sites felt impersonal and dated, so we knew visuals would help facilitate a more engaging experience. The one issue with using existing brand assets was that they’re heavily tied to their specific brands, and we felt this space shouldn’t lean into one brand more than another.

In an attempt to bring new life into the existing assets, I created illustrations and icons inspired by existing Neutrogena graphics, leveraging brand familiarity—but refreshed.

PRODUCT CARDS

Simplifying the UI
‍

Knowing multiple brands would exist side-by-side, I designed the product cards with an open-space concept which allowed each product to co-exist on the page.

This minimal approach also left us room to inject the official look and feel later on. Iterations I designed are highlighted in blue.

PIVOTing

And then, it arrived.
‍

In September 2022, J&J announced Kenvue as its planned new consumer spinoff and the brand colors finally arrived at our doorstep. The company was also going to lean heavily into a consumer-focused voice—even towards professionals. We now needed to inject the new branding into our existing layouts and visually align them to match the new brand narrative.
‍
Major changes:
• Emphasized branding through type, color, and photography
• Ground content more professionally by removing illustrations
• Placed everything on a clean, crisp white

Modular System

Extending the care kit
‍

We utilized the brand’s modular “care kit” grid system which integrated well with some adjustments to our original grid. The modular system also allowed content to easily be interchanged across the various multi-branded pages to come.

Takeaways & CLOSING REMARKs

Build a solid, flexible foundation
‍

As a designer whose greatest strength is visual design, this project tested my ability to lay out the groundwork before tackling anything visual. I challenged myself to document all the necessary info that was obtainable since we had little to start with.

Not shown are other page variants and their mobile versions. TOO MUCH time was spent juggling updating mobile layouts in tandem with finalizing the initial overall look and feel. If I could’ve done anything differently, I would have advocated a more streamlined workflow.

Our initial direction aligned to our clients’ need for a professional-facing site that differentiated itself from consumer. But with the brand’s consumer focused positioning (derms are consumers too), consistent branding across all Kenvue platforms was the way to go.

—
Special thanks to Stephanie P. for guiding me through my first project at this scale as an Art Director, fresh out of school. And to Devin S. and Brian C. for all the casual and insightful jam sessions in Figma.