Neutrogena Skin360® is an app that combines decades of expertise with a database of over 10,000 images of real people – of all ages, genders, ethnicities, and skin tones. This breakthrough technology helps customers find the products they need, and also provides a daily routine in order to maintain healthy skin. Both apps were very unorganized, had very few users engaging with it, and a low rating on stores.

I was hired to go in and figure out what was wrong with the app, how it could be improved at a low cost, explore what other competitors were doing, and redesign both the appearance and functionality of it.

Table of Contents

Understand User & Needs

Demographic report

The users from the website are the same users of the app. So in order to understand the most common user demographic, I gained access to Google Analytics 4, and drilled down into the demographics overview page, which broke down who the users were.

To better understand the user’s needs, I reviewed all feedback from the App Store and Google Play. I gathered and organized all of the negative reviews, and the positive reviews. This helped me understand what users were not satisfied with, and what they wanted. I also performed usability tests later on, so stay tuned.

Understand Business & Needs

I had several business partners on my team that helped me understand the business and its needs. I reported to the Business Product Owner, and the Technical Product Owner. I also reported the DXD team, which was every UX designer for each major consumer health brand of J&J: Tylenol, Zyrtec, Benadryl, Listerine, Aveeno, Band-aid, Lubriderm, Clean & Clear, Rogaine, and more.

We also had the support of different agencies. Gartner helped us determine problems within the native app. Grafton helped us develop the prototypes, and PerfectCorp provided us with AI that could scan and analyze the user’s skin.

Neutrogena had 2 versions of Skin360. There was the native/mobile app for iPhone and Android, and the progressive web app for the browser.

The business needs evolved as we gathered more insight as to what users really wanted. However, the first thing that the business wanted was for the app to have the right brand identity. Both apps did not look like they were owned by Neutrogena. The second major need was to hook users with the PWA, and send them to the mobile app, so that we could gather more 1PD. The third major need from the business was to increase scans from the PWA.

Usability Testing

Once I understood who the user was and wanted, and who the business was and wanted, I ran a couple usability tests.

The first test I performed was an advanced UX study, using a tool called UserZoom. I set this study up so that users were going straight through the experience, and their screens were being recorded. I was asking specific questions based on my hypotheses such as “Is this feature helpful? Why? Why not?”. I had the opportunity to do as many of these as I wanted, but I chose to limit it to 15 recordings. After all of these recordings were made, I sifted through them and found many areas within the app where users were confused or stuck.

The second test I performed was 4 different user surveys. I set up this test to send female participants between the ages of 20-40 from North America through 3 leading competitors PWAs, and our own. The surveys asked very simple qualitative questions like “What did you like about this experience? What did you dislike?”, and at the end I asked them which brand’s app they liked the best.

When both of these tests were over I had a lot of unbiased insight into what was working, and what was not.

Competitor Analysis

Competitor analysis

In order to determine the best competing products, I searched blogs for “best skin analysis app”. I went on the App Store and Google Play marketplace and searched for similar keywords that we were spending money on for our app. I also went on google and searched for skin analysis tools that were web-based, because ideas found in a PWA could be applied to a mobile app and vice versa. I spoke with my business partners and asked them what tools they’ve researched in the past, and gathered a huge list of references.

Once I had the list of competitors, I placed all of the PWAs in a spreadsheet and ranked them by ratings, reviews, downloads, etc. I downloaded all of the apps to my phone. Several apps required a payment subscription, so I had to avoid those, but many were mostly free to use. So I basically captured all of these experiences via screenshots and quickly placed them all into pseudo prototypes so that my team and I could view them easily, and comment on them at any point in time.

As I went through the process of building these prototypes, I went through each experience in detail, and discovered many solutions to problems that neither me, nor my team had thought of before.

Brand Guidelines, Design System, & UI Libraries

Brand guidelines and design system

When I first started working for Neutrogena, they had been hiring many different agencies for years, so there was a different style guide for each agency. There were print style guides, and style guides for digital. This was a problem, because many times they conflicted with each other. The website had been designed by multiple agencies as well, so it lacked consistency. As the first internal UX designer, it was my job to look at 4 different sources of information to create an internal digital style guide and UI library. The 4 sources were a print style guide, a digital style guide, their website, and the J&J design system Vital DS.

Finally, there was an opportunity for Neutrogena to have its own cohesive UI library with proper grid systems for mobile and desktop. Creating the proper typographic settings for each HTML tag made all of the content consistent in style, and therefor seem like it was all coming from the same brand.

I was able to ensure that all components were AAA compliant (visible for people with poor vision or color blindness), using a popular plugin called Stark.

Application Audit

Application audit

The next step in my design process was to audit the PWA and the mobile app. Having a document that lists all areas of improvement on hand can dramatically speed up the production of a wireframe, and it can also increase the quality because less details will be forgotten.

Once I had all of my major discoveries captured, I created a powerpoint deck where each slide had the title “Problem” and “Possible Solution”. I titled this problems_solutions.pptx, and shared it with my business partners. They really liked this approach, because I shared ways we could solve different user problems without even getting into design yet. No budget was invested into design, development, or testing. Having a lead developer on the call was great, because they were able to identify technical limitations and capabilities before concepts went into design.

When I had my style guide and UI library organized, I was also able to notice more flaws in the app when it came to branding.

Collaborating With Business Partners

At this point I had a list of complaints and recommendations from 15 participants. I had discovered 25+ other features that solved important and unimportant problems, and an amalgamation of visual and functional improvements written on a prototype. We obviously could not afford to create every solution possible, or add every feature I discovered, so it was time to discuss the solutions with my business partners.

So we created an impact effort matrix to help prioritize tasks based on their potential impact and the amount of effort required to implement them. This was a great time to bring in other business partners, because the copywriter knew how much effort content required. The developers had a better idea of how much effort was required to build certain features. The product owner had a good idea of budget constraints, and how much each concept would impact the conversion rate.

During this phase of the design process, I introduced the development team to the design system. I shared with them the 12 column grids for both mobile and desktop. I showed them the benefits of the design system, which were mainly reusable components, and how they could leverage it to speed up future development.

User Flow Alignment

User flow alignment

Before I started working on the wireframes, I wanted to ensure that the user flow was optimized. The old version of the app required the user to login before they could use it. There was also no direct way to sign up; they had to select login, and then choose to sign up from the login page.

There was also no connection between the PWA and the app, meaning the scan information from the PWA had a separate disconnected database, and users were confused when they downloaded the app, because none of their data was available.

So I created a new user flow which enabled users to try the app for free without registering, an ability to sign up directly from the welcome page, and the ability for the databases to be connected so that their data would be imported from the PWA.

Wireframes

Wireframes of neutrogena app

Now that I had my impact effort matrix all organized, and the team was happy with it, I focused all of my attention only on the upper left quadrant (low effort / high impact items).

I had done a lot of research, and if I had multiple ways of solving a problem, I would wireframe multiple options.

In order to save time and money, I kept my design process very agile. I provided wireframes without images, color, or even real content, so that my team would not get hung up on the visuals and focus on the core functionality. Many UX designers prefer to sketch solutions on paper, but I find it faster and cleaner to draft wireframes on a computer.

Share & Test Again

Before improving the fidelity of the wireframes, I shared them with my BPO, TPO, copywriter, and developer. The shared knowledge from the team helped guide areas of improvement and unnecessary features.

I also shared the wireframes with the DXD team (UX designers of Tylenol, Benadryl, Listerine, etc). We had a weekly meeting where different UX designers presented their work, and inputs from many professional UX designers were shared and discussed.

I created a private chat group called “Fantastic 5”, that was comprised of the lead UX designer of Tylenol, Motrin, Aveeno, Clean & Clear, and Neutrogena. In this chat, we shared designs with each other and provided feedback, and it was extremely helpful for all of us.

There were a couple occasions when there were 2 different solutions to the same problem, and nobody was sure what to do. So I created a user survey inside of UserZoom and asked 50 female participants from the US which version they liked the most. I would then share the quantitative results with my BPO and TPO, and they gave me the green light to polish up the preferred version.

Prototyping

Neutrogena Prototype

After I gathered more information from sharing and testing, the first thing I did was I moved the ideas that were rejected into a different file, and archived them. At this point, I would receive a copy from the copywriter and revise all of the language until it was catchy and legal.

The way I would approach converting the wireframes into high fidelity prototypes would be one screen or page at a time. If I knew that something would be reused, I would make it a component in my Neutrogena UI library. Each component or page would receive proper colors, typography, and visual assets that aligned with the brand.

Once all of the designs were done, I would create the interactivity, transitions, animations,  that were needed in order to page all of the pages behave like the application. Then I would ensure that all of the visual assets were downloadable, and published. Then I would store the prototype link in Jira, which was our project management system.

User Acceptance Testing (UAT)

User acceptance testing

The development team never delivers a staging link that looks exactly like the prototype. In our case, a lot was missed and it was my responsibility to compare the staging link to the prototype and outline bugs and other inconsistencies.

It was also my responsibility to remind them about the design system, and the benefits associated with it. If they had any questions, they would ask me if they understood the functionality correctly and for clarity on things that weren’t quite obvious.

So I shared a spreadsheet with them, where I input the page, importance, theme, issue, and a screenshot of the issue. We had a status column, where they would mark if it had been resolved, or if it was still in progress. The use of the spreadsheet really helped both parties, and we were able to rapidly fix all of the bugs and visual flaws.

The Conversion Rate Increased By 53%!

After much UX research and countless user interviews in 2022, we discovered that users didn’t want to track the progress of their skin over time. So we decided to decommission the mobile app, and focus all of the budget on thee PWA, which was a one-time use experience.

The implementation of the PWA design happened in Q4 of 2022, and at the end of Q1 of 2023, we measured the new average conversion rate and it had jumped 53%.

Design Tools

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

Leave a Reply

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