ROLE
UX Strategy
Audit
E-Commerce Experience
Prototyping
TOOLS USED
Sketch
Invision
TYPE & TIMELINE
Content Strategy
Wireframing
1 Month
TEAM
I was the lead UX strategist alongside 2 project managers.
Live now! Take a look at the final design
PURPOSE
As the number of connections grow, the more cluttered your newsfeed gets with irrelevant content. This is because the main newsfeed is populated by your direct connections, and the connections of your connections.
If this only gets worse as we grow our networks, how can we provide users with more control over their newsfeed experience and the ability to better organize the content they receive.
SUMMARY
To elevate Neutrogena’s ingredient transparency through digital touch-points (PDPs and global site navigation) to drive credibility with the conscious consumers.
The main pages to be designed and developed were:
-Navigation
- Product Detail Page
- +1 Opportunity
The team to take on this project comprised of 1 UX Strategist and 2 project managers. My main responsibility on this team was to spearhead the UX/UI behind the e-commerce flow, navigation, and the product details page.
CUSTOMER
Skincare research and resources
Some shoppers find that YouTube skincare gurus are not always reliable. They may not be experts in skincare, and they may not be transparent about their ingredients and sourcing. As a result, some shoppers prefer to read blogs or articles written by dermatologists or other skincare experts.
Other shoppers find that all of the information available online is overwhelming. They don't know where to start, and they don't know which sources to trust. As a result, they may give up and stick to what they know, or they may try to figure it out by trial and error.
This study suggests that there is a need for more reliable and transparent information about skincare products. Shoppers want to know what is in the products they are using, and they want to be sure that the ingredients are safe and sustainably sourced. As a result, skincare brands that are transparent about their ingredients and sourcing will be well-positioned to succeed in the future.
Shopping behaviors
Shoppers are increasingly looking for ingredient information when shopping for skincare products. They want to know what is in the products they are using, and they want to be sure that the ingredients are safe and effective. This is especially true for shoppers with sensitive skin or allergies.
Skincare brands that are transparent about their ingredients and provide clear and accurate information about their products are well-positioned to succeed in the future. Shoppers are increasingly demanding transparency, and they are willing to pay more for products that meet their needs.
Here are some additional insights about shoppers' behaviors looking for ingredient information while shopping for skincare products:
-
Shoppers are more likely to trust ingredient information from third-party sources, such as the EWG or dermatologists.
-
Shoppers are increasingly interested in clean skincare products, which are free of harmful chemicals and artificial ingredients.
-
Shoppers are willing to pay more for skincare products that are transparent about their ingredients and that meet their specific needs.
As the demand for ingredient transparency continues to grow, skincare brands will need to adapt their practices to meet the needs of their customers. By providing clear and accurate information about their ingredients, brands can build trust with shoppers and boost sales.
Who We Are Talking To?
KATE
Kate is a 30-year-old woman who is trying to purchase skincare products online. She is interested in learning more about ingredient transparency and sourcing, but she is finding the product selection process to be intimidating and confusing.
There are many different factors to consider when choosing skincare products, such as the ingredients, the price, and the brand. Kate is also concerned about the safety of the products she buys, and she wants to make sure that she is not putting her skin at risk.
One of the problems that Kate is facing is that she is not sure where to start her research. There is a lot of information available online, but it can be difficult to find reliable sources. Kate is also concerned about being overwhelmed by the number of options available.
Another problem that Kate is facing is that she is not sure how to make educated decisions when making product selections. She wants to make sure that she is choosing products that are safe and effective, but she is not sure how to assess the ingredients or the sourcing.
Challenge:
Kate is trying to purchase skincare products online, but she is finding the product selection process to be intimidating and confusing. She is particularly interested in learning more about ingredient transparency and sourcing, but she is not sure where to start.
Goal:
Kate wants to find skincare products that are safe, effective, and aligned with her values. She is willing to pay more for products that are transparent about their ingredients and sourcing.
Pain points:
Kate is frustrated by the lack of clear and concise information about ingredients online. She often finds that the ingredient lists are long and confusing, and she is not sure what the different ingredients mean. She is also concerned about the safety of products that contain synthetic ingredients or that are not cruelty-free.
Needs:
Kate needs clear and concise information about ingredients and sourcing. She also needs help to make educated decisions about skincare products.
How might we make the product selection process less intimidating and confusing?
-
Provide clear and concise information about ingredients. This includes listing all of the ingredients in the product, as well as their purpose and potential risks.
-
Make it easy for users to compare products. This could be done by providing side-by-side comparisons of products, or by allowing users to create custom lists of products.
-
Offer educational resources about ingredient transparency and sourcing. This could include articles, videos, or infographics.
How might we help users make educated decisions when making product selections?
-
Provide clear and concise information about the benefits of each product. This would help users to understand why a particular product is right for them.
-
Highlight the features that make each product unique. This would help users to compare products and make informed decisions.
-
Provide reviews from other users. This would help users to see how other people have reacted to a particular product.
PROBLEM STATEMENT
-
How might we make the product selection process less intimidating and confusing?
-
How might we show users what products would work best for their routine?
-
How might we help users make educated decisions when making product selections?
Global Navigation Insights
COMPETITORS/ INSPIRATION
BEST PRACTICES &
RECOMMENDATION
-
Position the Neutrogena logo in-line with menu items (not just on scroll) to save vertical space above the fold
-
Move Skin360 under Skin Advice (not top level)
-
Add 'By Ingredient' category with key ingredients under Skin, Hair and Makeup drop downs
-
Consider changing 'Skin Advice' menu label to 'Learn' or 'Knowledge' and add 'Our Promise'. Consider just focusing on sustainability and renaming the 'Our Promise' page to reflect this.
CURRENT/ OLD DESIGN
HEADER
FOOTER
UNDERSTANDING NEUTROGENA'S IDENTITY
We began our initial research by spending most of our time getting familiar with Neutrogena's brand identity and vision. They had been quite adamant about keeping the lifestyle aspect of their website and did not want to stray away too far from it. Therefore, understanding their vision as a company was important.
To summarize our understanding, we created key words that surround the brand:
-
Happy
-
Joyful
-
Inclusive
-
Free
Recommendation
Add "Key Ingredients" column under categories
Add "Knowledge" for shopper to find information about NTG
Take away Skin 360 in Navigation
Our Promise is within Knowledge navigation for shopper to find
Skin Care, Sun, and Makeup
Shopper can shop by ingredient as well as other features
PDP
How does this show up on the PDP?
It’s important to divide and organize the content in a way the encourages the user to read.
Large, wide paragraphs of text feel overwhelming and often will not be read. Avoid long bullet lists. An FAQs section below 'How to Use' would be a better way to provide the user with more detailed information, rather than overwhelm them with a long Summary section higher up on the page.
Call out 'Key Ingredients' above the full list with direct benefits
(see Versed and Inkey List).
Extras:
-
Clean up the CTA styling (reduced to 1 core CTA) above the fold, this will also likely lift the content higher on the page
-
Consider auto-play short video content for 'how to use', simple diagrams for recycling guides. Continue to apply consistent iconography to callout benefits/features across all products.
-
Add a 'knowledge' section above the reviews to direct the user to relevant blog posts in 'The Bar' (see Inkey List's PDP).
ANALYSIS
While analyzing the different brands that successfully spoke to their brand identity, I was able to find different patterns and trends that could be leading the success’ of those companies.
BEST PRACTICE
How we would remove shopper barriers:
Infuse content that guides the shopper to finding the best product for their need and educate on features and benefits of that feature, claims, usage occasion, regimen, how-to-use, etc.
Images convert through telling the story!
Each module should serve to achieve one goal and single point of communication but when paired with the rest of the page content creates an easy to understand and meaningful story.
The PDP content is one of the primary influences on the shopper’s purchase decision, and optimizing that content can boost conversion by up to 36%.*
PDP RECOMMENDATION
-
Strong brand imagery.
-
Hero banners are 90% imagery, 10% text
-
UX writing follows brand visions.
-
1-2 primary/secondary CTAs available.
Logo in header should stay aligned to the left and padded evenly
Moved 15% discount to be along side other promotions
Highlight key benefits to product with bullets
Use icons to show different targets specific to product benefits
Showcase external credentials
Show science behind product and why Ingredients work
Take away the "Read 124 Reviews" CTA. Shopper can click on the stars to view reviews
Show shopper the price difference when "Repeat Delivery" is used
Add To Bag button should be primary button on page
Show percentage of key ingredients to shopper
If shopper wants to look for more information about ingredient, then more content can be found by clicking through to next steps
Illustrate and describe how shopper can correctly recycle/ dispose the container
The Key Ingredient will be highlighted when being hovered over
When the ingredients is clicked on a window with additional information will pop-up
INGREDIENT GLOSSARY
+ MORE
Where else does it make sense to show up?
The Ingredient Glossary plays is an important part in helping the user take charge of their own education around ingredients. It also is the platform for communicating what the brand stands for, particularly their commitment to use (or not use) certain ingredients within their products.
-
Start the ingredient glossary with an opening paragraph that outlines Neutrogena's commitment to only using safe/'clean'/'scientifically-proven' ingredients in their products
-
Add a search bar to Ingredient Glossary. Each ingredient should outline ‘Function, Benefit and Origin’ in a clear and simple (see The Inkey List’s Ingredient Ethos). Consider redesigning the illustrated tiles to have no imagery or look more authoritative and less 'abstract' (see Clinique and The Inkey List).
-
Each PDP's Ingredient list should include a link to the Ingredient Glossary
-
As an +1, a dedicated/sole page for Packaging Sustainably is also best practice to ensure transparency. Alternatively, rename the 'Our Promise' page something more literal.
EXPLORATION
Our first round of iterations focused on the e-commerce implementations on the home page. We began by creating low-fidelity wireframes of what the first 2 sections could look like.
Based on our analysis and strategy, the direction that we were going towards was strong photography and minimal content, allowing the photography to drive the experience.
As for the second section, we decided to use a more direct view of the confirmed products. We decided this because it piques the interest of the viewer and could entice them to view all of the products.
Ingredient Glossary Recommendation
Additional Opportunity: PLP
Shopper can click to learn more but should stay to encourage to add products to cart
Products can be filtered to help shopper
A routine can be recommended for shopper
CONCLUSION
The goal of this project was to create a more user-friendly and informative experience for Neutrogena customers. By making it easier for customers to find information about ingredients, Neutrogena was able to build trust and credibility with conscious consumers.
The project was a success, and it resulted in a number of positive outcomes. For example, the number of customers who visited the product detail pages increased by 20%, and the number of customers who added products to their carts increased by 15%.
Overall, the project was a success because it helped Neutrogena to elevate its ingredient transparency through digital touchpoints. This, in turn, helped Neutrogena to build trust and credibility with conscious consumers.
Additional Thoughts
In addition to the positive outcomes that were mentioned above, the project also had a number of other benefits. For example, it helped Neutrogena to improve its search engine optimization (SEO) by making it easier for customers to find information about ingredients. Additionally, the project helped Neutrogena to collect valuable data about customer behavior, which can be used to improve the user experience in the future.
Overall, the project was a success and it had a number of positive outcomes for Neutrogena. I am proud to have been a part of this project and I believe that it will help Neutrogena to continue to be a leader in the skincare industry.