UX & UI Design, Project Management
My agency started working with Neutrogena® in 2019 to help them design and develop their skincare app. The app was decommissioned in 2022 to instead move towards a WebApp offering the same services of helping a user understand their skin better and find products to assist with differing skin concerns, which was primarily done to support more users in accessing the options available to them without having to log into an app or check in.
With this came several different versions of the WebApp: Neutrogena© US, Neutrogena® Canada, Walmart, Walmart Canada, CVS, CVS Perch (in-store kiosk), Neostrata, India, and Brazil. All of these versions of the WebApp had nearly identical designs with the major differences being the products featured, differing copy, some image swaps, and in some cases, translations for international versions of the WebApp, such as Canada and Brazil.
I was not the sole UI designer for this project, but have worked on and supported the different design variations throughout the course of our partnership with them, as well as assisting with prototyping, usability testing, Project Management, developer support, QA phases for each new release, and working closely with the copywriter to ensure all CMS fields were covered for each version.
.svg)
.svg)
The UX design process involved creating clickable prototypes from design concepts and conducting usability tests with each major overhaul of the WebApp to understand user needs and pain points. A/B testing has also been used to gauge users reactions to different landing page designs.
In addition to identifying any friction within the experience, the purpose of the usability tests were:
I conducted usability tests with 10 users for 60 minutes each, which were recorded via Loom with the users consent. They received a voucher when the test was completed. The criteria for testing was that testers must follow a skincare routine or be interested in learning how, have an interest in mainitaing and improving their skin, and generally purchase new skincare products to address needs. The users were recruited via email to users who were already subscribed to the Neutrogena© newsletter and selected from that list randomly to avoid any bias.
Based on various instances of usability testing from 2020-2021, actionable insights were implemented throughout the experience, such as placing the onboarding experience of selecting your skincare goal appear before you scan your face, adding a QR code to the desktop version of the scan screen, and adding more detailed and personalized tips for users' skin goals and how it may help their skin throughout the experience, from the landing page all the way to the routine screen where you receive personalized product recommendations. "Skin tips" were added for users based on their skincare goals as a result of usability testing. The focus was to use friendly and inviting language throughout and educate the user about skin health.
There have been many iterations of the visual design phase for Neutrogena© Skin360™ that my agency worked on. We primarily worked in 2 week sprints to ensure quick progress and growth of the experience to benefit users. Myself and one other UI designer started with the mobile app back in 2019 with a few goals in mind for the business; educate users about common skin concerns, promote products that would help mitigate those concerns, and guide users on how to select skincare goals for themselves to stick to. The app transformed into a WebApp experience that offered the same features, and has been expanded on since then.
Our design team was given a style guide (which has since been updated to reflect the Neutrogena© brand) which was used throughout the experience. A friendly blue was used as the primary color for call-outs and UI elements, and a yellow was used as the secondary color for buttons. A user is offered various skincare goals throughout the experience, and a unique color is assigned to each of them to be easily identified. A user is also able to click on each potential skincare goal to find out more information about recommended ingredients for that goal as well as general information about each. After the experience, a user can get an email of their routine breakdown, which I have designed a few different versions of; you'll see an email design example below.
I worked closely with the copywriter from 2019-2025 to ensure that all content was gathered for the various instances of the WebApp as mentioned above (Neutrogena© US, Neutrogena® Canada, Walmart, Walmart Canada, CVS, CVS Perch as an in-store kiosk, Neostrata, India, and Brazil). Much of the copy is the same, but translations were required for international versions of the app, alt text, and a lot of the skin concerns would have varying copy per instance to support the recommended ingredients. I additionally supported much of the QA process during the 2 week sprints. Each time a new feature was released or there was a large design overhaul, I was involved with the process of making sure all business requirements were met and there were no gaps in functionality or experience for the user.
On top of being a designer for the project, was a project manager as well, where I would support both the business needs and provide assistance to the developers. Our team has supported Neutrogena© up until 2025.
