In 2022, Neutrogena.com, owned by parent company Johnson & Johnson, attracted 13 million users in search of skin care, hair care, and cosmetics products, such as facial cleansers, moisturizers, sunscreen, and skin treatments. However, the website suffered from inconsistent design styles due to relying on multiple external design agencies and high employment churn rates that hindered the formation of an internal business team.

To address these issues, I was brought on board to work with a few colleagues to improve the website. However, before we could make any improvements, we needed to diagnose the website’s problems. While I didn’t have access to all of the sales data, I was able to use tools such as GA4, UserZoom, HotJar, and some preexisting reports to gain insights. Additionally, I took the initiative to gather as much information as possible while the business team was still being recruited.

Table of Contents

Understand User & Needs

Google analytics demographic overview
User archetypes

To better understand the most frequent user demographics, I obtained access to Google Analytics 4 and analyzed the demographics overview page. I also obtained a pre-existing deck on Neutrogena’s user persona and collaborated with the team to streamline the data into three user archetypes.

Acquiring Existing Reports

Gartner Digital IQ
Olay comparison

Prior to conducting a website audit, I received several insightful reports from reputable agencies such as Gartner. These reports highlighted various weaknesses in Neutrogena’s overall ecosystem and provided valuable insights from competitors that served as inspiration.

Website Audit

home and pdp audit
website audit 2

At this stage, I wanted to gain a consumer perspective of the website and explore the top 10 pages with the highest traffic. Given that most users accessed the site through mobile devices, I captured mobile screenshots of each page.

Rather than listing out the issues, I decided to design prototypes alongside each screenshot and suggest potential ways we could enhance each page. My goal was to anticipate the consumer’s needs and preferences by drawing inspiration from our global design system and the solutions implemented by our competitors. I also made sure to improve any incomplete or cluttered components by presenting low-fi designs that depicted a more modern and streamlined appearance. Furthermore, I incorporated any noteworthy features that were absent from the pages.

Initially, these recommendations were speculative and required validation through data analysis. However, as time passed, the audit prototype evolved into verified suggestions for improvements.

Brand Guidelines, Design System, and UI Libraries

Design system and UI library

When I began working at Neutrogena, they had hired multiple agencies over the years, each with their own style guides for print and digital. This resulted in inconsistencies and conflicts between the guides, which also impacted the website’s design. As the first internal UX designer, I used four sources of information – a print style guide, a digital style guide, the website, and the J&J design system Vital DS – to create an internal digital style guide and Ul library.

This presented an opportunity for Neutrogena to have a cohesive UI library with proper grid systems for mobile and desktop, which in turn created consistency in style across all content. I ensured that all components were AAA compliant, making them visible to people with poor vision or color blindness, using a popular plugin called Stark.

Diagnosing High Traffic Pages (Home Page Example)

UserZoom test

Using GA4 data analysis, I compiled a list of the website’s most frequently visited pages, starting with the home page, and then conducted an advanced usability test on UserZoom. I enlisted 50 participants who were young women and had shopped for skin health products within the past six months, which is the most common customer demographic for our brand. These participants were asked to complete approximately 10 common tasks that a typical customer might perform on the home page without using the navigation. During the study, their screens and voices were recorded for analysis. After the study was complete, I analyzed the results and discovered a variety of issues and opportunities for improvement that emerged.

Home Page User Tasks:

  1. Once you see the homepage, take some time to look around. Describe what you see. What are your initial, subjective thoughts about this page? (Be honest, we can take it!)
  2. Use the search function to find “Hydro Boost Gel-Cream”.
  3. Without using the navigation menu or search function, find skin moisturizer products.
  4. Without using the navigation menu or search function, find skin cleanser products.
  5. Without using the navigation menu or search function, find the best-selling products.
  6. Without using the navigation menu or search function, find products for the current
  7. season.
  8. Without using the navigation menu or search function, find anti-aging products.
  9. Without using the navigation menu or search function, find products that treat acne.
  10. Without using the navigation menu or search function, find makeup products.
  11. And so on…
 
Another way I was able to make data-driven decisions, was by looking at our behavior report in GA4. Here I was able to see where users were going. I noticed that most of them were just searching for a product or concern they already had in mind and the majority of users were going to PLPs to find a product to buy.
Home Page Behavior Report
Home page behavior report

I used a tool called Hot Jar, which allowed me to see a heat map for clicks, and a heat map for scrolling. Here I learned that most users were using the navigation to get to where they wanted to go, and very few people were scrolling down the home page at all. Nobody was really interested in the body content of the home page.

Home page heatmap

At this point I knew so much information from the most popular page. I knew what users wanted, what was painful for them, where they were going, and how they were getting there. What I couldn’t see is new ideas and solutions that were never introduced to the home page, or even the brand. So I decided to look at the leading competitors’ home pages for ideas. I looked at Covergirl, L’Oreal, Paula’s Choice, Clinique, and Olay. I took screenshots of their most prominent components and tried to describe their purpose, and how they benefited the consumer.

Competitor analysis

Then I synthesized all of my findings into a summary, so that I could get a grasp on who was doing what, and if there was anything we were missing. This is when I realized that our website needed blog articles on the home page to educate the consumer about skin health, and a loyalty program to increase 1PD acquisition.

Feature Summary

Feature summary

Navigation IA & UI

Tree test tasks

After we noticed that most customers were viewing PLPs to find products, and not topic landing pages or blogs, we decided to move all of the topic landing pages to the side, and create more PLPs. This solution created more navigation menu items, but it made it easier and quicker for users to find the exact product they were looking for.

Next I worked on the Information Architecture (IA) by running a tree test in UserZoom. I gave the participants the 6 common tasks using the old navigation and then the same 6 tasks within the prototype. Then I prepared and cleaned the data. I iterated on this a few time, and kept getting the success rates higher, completion time lower, and confidence level higher.

Once I had the navigation hierarchy optimized, I looked at 10 to 20 leading brands to see how they displayed their navigation menu. I took a little inspiration from DTC brands like J. Crew, Nike, and Apple and came came up with a much simpler and intuitive menu interface.

Navigation comparison before and after
Desktop navigation before
Desktop navigation after

Buttons, Header, Footer, Forms

Button style guide

During my website audit, I took screenshots of all the unique button styles and discovered that there were a total of 9 primary CTAs, 6 secondary CTAs, and 9 tertiary CTAs. To address the issue of having too many CTA variants resulting from multiple agencies working on the site, I proposed reducing the number of CTAs to just 2 – one for light backgrounds and one for dark backgrounds (such as the black footer). I also made sure that the new CAs had a minimum height of 44px to prevent the “fat finger problem” and that their font and color matched the latest style quide.

When I undertook the redesign of the header, I aimed to reduce its vertical space consumption while incorporating the new information architecture and navigation UI. To maintain consistency with my new form field styles, I updated the search field accordingly. After examining the headers of other leading competitors, I identified an opportunity to enhance our header by adding a language toggle and a wishlist.

Header before after

Upon examining the current footer design, I identified several issues that needed to be addressed. The floating slogan at the top was unclear and the typographic hierarchy needed improvement. The form fields had duplicative labels and the form itself was easy to overlook. To rectify these issues, I gave the form a gray background to distinguish it from the rest of the footer without taking up additional vertical space. I improved the typographic hierarchy and standardized the hyperlinks to be consistent with the rest of the site, in all caps. I updated the information architecture to reflect changes in the business, such as the removal of the care club. In addition, I updated the bank card assets too SVGs and made the legal information links more visible.

Footer before
Footer after

During my analysis of the site, I observed that there were numerous variants of form fields, which made it challenging to use them. The input fields were only a single line, which made it difficult to differentiate them from field labels. Additionally, there was no form focus or validation options, and no option to show a password if needed. To address these issues, I updated the input fields to enclosed rectangles and added a subtle blue glow for focus. I implemented form validation with semantic colors to indicate whether a field was filled out correctly. A successful field completion would turn the border green with a green check mark, while an incorrect field would turn red with an error symbol and a description of the error below the field.

Form fields before after

New Business Partners

After spending 11 months working alone on Neutrogena.com, a business team was finally recruited. This team included a BPO, TPO, Google Analytics Expert, Scrum Master, and more. With their help, I gained access to a wealth of previously unseen data. One key insight was that in 2022, Neutrogena had spent over $800,000 on free shipping, despite only 1% of users actually checking out.

Working together, we were able to make some strategic business decisions. We decided to limit free shipping to orders over $35 or to customers who signed up for our new loyalty program, MyNeutrogena™. Additionally, we developed more landing pages to attract users and encourage them to make purchases however they preferred. We provided links to retailers such as Amazon.com, where customers could buy Neutrogena products and still benefit the brand.

Loyalty Program

loyalty program

To incentivize customers to make purchases on the site, we implemented a change that required them to provide 1PD (First Party Data) in exchange for free shipping. To further enhance the customer experience, I was assigned the task of designing a loyalty program called MyNeutrogena™’

To gather ideas and inspiration, I looked at successful loyalty programs from brands like Sephora, Starbucks, and Amazon. I then designed a banner that could be displayed on various pages of the site, including the home page and register page. The banner featured three perks of the loyalty program, along with a clear call-to-action button that directed users to the registration page.

Ingredient Glossary

Ingredient glossary

The ingredient glossary page had high traffic, but it wasn’t shoppable, meaning that when customers clicked on an ingredient, there were no products to purchase. Additionally, there was no space to recommend products since the ingredients did not have their own dedicated pages.

Other issues I identified included the lack of a breadcrumb trail, a dropdown filter that required two clicks to jump alphabetically, non-ingredient topics included in the glossary (such as acne as the first item), non-ADA compliant fonts, and abstract illustrations.

To address these issues, I recommended adding a breadcrumb trail to navigate back, an alphabet of jump links, dedicated sections for ingredients, realistic ingredient photography, and individual pages for each ingredient to make recommendations and facilitate shopping.

Campaign Pages

Landing Pages

In parallel to all of the website redesign work, I was also responsible for designing campaign landing pages for se real product lines.

To speed up the turnaround rate on these, I made the components reusable. I also created actions in photoshop which automatically remove the background of the product images and added a cast shadow to the products.

FAQ Page

Faq Page

After evaluating the business requirements and looking at leading consumer health brands for inspiration, I found several issues with their FAQ page. Specifically, the separation between questions and answers was inadequate, the visual hierarchy was not well-defined, the page required too much vertical space, and the inclusion of an image was unnecessary. Additionally, the disclaimer was not needed and the questions were not properly categorized

Product Listing Pages (PLPs)

Product Listing Page

To begin my process, I conducted an audit of the PLP, identifying and marking all the issues I found. Next, I analyzed how competitors were designing their PLPs. For the third step, I conducted an advanced usability test using UserZoom to gather consumer feedback on what they liked and disliked. Armed with these insights, I began rebuilding each component to meet both user and business needs. During this process, I noticed that the breadcrumb navigation was missing, and that the mobile banner and embedded text needed to be separated.

Additionally, it became apparent that implementing quick filters would make it easier for users to navigate and find best sellers and other relevant information.

I made several changes to the PLP to enhance the user experience. To ensure consistency with other modern mega brands, I reformatted the product filter and sort component. In addition, I introduced a fixed progress bar on the PLP to gamify the shopping experience and encourage consumers to purchase more products. Lastly, I redesigned the product cards to be cleaner and more visually appealing.

Design Tools

Figma, Illustrator, Photoshop, UserZoom, Excel, Powerpoint, Jira

Leave a Reply

Your email address will not be published. Required fields are marked *