Simplifying Skincare with Dewy
Dewy is a UX/UI conceptualization of a mobile app that curates a product routine for skincare beginners and allows them to purchase tester products. This project was completed during my UX career track at Springboard bootcamp.
Role: UX/UI Designer & UX Writer
Deliverables: User Interviews, Personas, User Flows, Content Strategy, Style Guide, Wireframes, Microcopy, Prototype
The Problem
If you’ve ever browsed the crowded lotion aisle of a pharmacy, you know that skincare can be complicated. In the past ten years, the skincare industry has seen a significant spike in online interest, leading to more and more products being released into the market each month. Despite this over-saturation, most consumers consistently report that their needs are still not being met.
As a weathered veteran of frequent acne battles myself, I set out to look for solutions, blending my skincare knowledge and UX skills to address some of these pain points. Using principles of design thinking, I created Dewy- a mobile app that curates a daily routine for skincare newbies and allows them to order tester-sized products from popular brands. Here’s how I got there.
My Role
I wore all of the UX hats for this project, including user research, UX writing, UX/UI design, branding, prototyping, and testing.
Users & Audience
Like most things, skincare is trickiest to understand for newcomers who are just starting to develop their routine. Because of this, my target users were beginner to intermediate skincare users, specifically people aged 18 to 30, who have had a skincare routine for less than five years.
I created two different personas based on my research to make sure that I was designing with real people in mind.
The Process
User Research
Before beginning to brainstorm solutions, I wanted to fully understand my users and their needs. I studied current trends in the skincare industry and completed a competitive analysis of major skincare apps on the market, including Sephora, Ulta, and IPSY. Most of these apps used some sort of skin type quiz to guide users to the products that would satisfy their specific skin concerns.
To gain more personalized insight, I conducted five remote interviews with skincare users in my target demographic asking these main questions:
What are the most frustrating parts of skincare shopping?
Where do users first go to find products?
What do users like and dislike about the skincare industry?
How do users currently go about making their own skincare routine?
After noting the many frustrations my interviewees discussed, I made an affinity map to help identify common patterns.
User Interview Findings:
Skincare requires too much trial and error to find products that work.
Trying and throwing out products that don’t work is expensive and wasteful.
Consumers don’t trust the promises of skincare companies, so shopping is very difficult.
Consumers don’t know how to create a routine that works for their own skin.
Most skincare quizzes aren’t personalized enough for accurate results.
One of my test user’s summed up almost all of these key findings at the same time when she said…
“I'm just not willing to drop a lot of money unless I've tried a sample of a product. I have to go out of my way to find samples from brands that don’t have options accessible online.”
Sketching
In search of solutions to my skincare newbies’ key problems, I played around with a few different ideas, from educational apps to the gamification of skincare. Eventually I decided to focus on one of the main issues that consistently kept popping up in user interviews- the endless trial and error of products that seems to come with skincare.
With this problem in mind, I began sketching a mobile experience that would allow users to find and purchase tester-sized skincare products to save time and money. To help beginners shop for their skin type, I also sketched an onboarding quiz that curates a custom morning and night routine for the user.
The quiz needed to go beyond the basic format of competitors like Sephora to ask users enough specific questions to accurately identify their skin type and concerns. The quiz also needed to be accessible to beginners by phrasing questions in a way that don’t require a user to have expert knowledge of their own skin.
User Flows
Using my concept sketches, I began to map out the user’s journey into two main flows.
Flow #1 - Signing up and completing the skin type onboarding quiz
To make this quiz stand out from its competitors, I wanted to prioritize the user’s freedom within the experience. This first flow allows the user to move forward and backward in the quiz if they changed their mind about an answer, as well as skip the onboarding quiz altogether and jump straight to the home page if they’d like.
Flow #2 - Placing an order for a tester product
The user has guided freedom in this flow as well, with the ability to purchase straight from their routine recommendations or to browse the app’s “Shop” page and purchase any product they’d like- whether it’s recommended for them or not.
Low-Fidelity Testing
Before beginning digital wireframing, I turned photos of my sketches into a low-fidelity clickable prototype using Marvel to validate my design decisions with five remote usability tests before moving forward. I’m grateful that I tested these choices because I was immediately able to pinpoint a handful of issues with my UI’s navigation from this feedback.
Findings:
The symbols in the bottom navigation bar were confusing for users
Users wanted a homepage or dashboard to return to to see an overview of their profile information
Keeping these issues in mind, I designed my digital wireframes using Sketch.
Wireframes
Responding to the test users’ needs, I added labels to the symbols in the navigation bar for better usability and designed a new homepage with the user’s skin type profile.
Style Guide
After receiving feedback on my wireframe designs, my next step was creating high-fidelity designs in Sketch. But before sitting down to design each screen, I first created a brand and style guide for Dewy in order to maintain consistency across the experience. These guidelines included examples for the color palette, voice and tone, font sizes, images, grid layout, and logo use.
UI & Visual Design
The goal of Dewy’s visual design was to capture the brand’s friendly and inclusive personality, with pleasant, light colors, rounded corners and shapes, and soft gradients. Users report that skincare shopping can often feel vulnerable or embarrassing, so it was important to me to create an interface that felt nonjudgmental, honest, and fun to use. I also drew simple illustrations in Sketch and incorporated them throughout various screens to add a playful feel to the mobile layouts.
In contrast to the complicated nature of skincare, Dewy’s UI is focused on simplicity. The interface avoids cognitive overload by providing the user with only one or two main actions to move from screen to screen. Critical information in the onboarding process is broken up into multiple screens, to lessen the amount of work the user is required to complete.
The interface also makes use of large, bright call-to-action buttons, consistently designed in the brand’s primary color. In addition, the UI is designed to prevent errors by providing clarifying hint text when navigating the onboarding quiz and ordering a tester, and utilizing dialog boxes to confirm a user’s choices.
Voice and Tone
This same emphasis on simplicity and empathy also went into Dewy’s voice and tone guide. As an interface, I wanted Dewy to sound like a conversational, yet qualified friend. Since Dewy’s target user is younger, the copy could be more casual, with headings in sentence case and an occasional use of slang, without sacrificing clarity.
I used hint text under certain questions during the onboarding process to reassure users that each question was being asked only to give them the most accurate results, not to judge them in any way. I also included helpful instructions for determining things like skin type.
I also made sure to enforce consistency in capitalization, grammar, and terminology across the entire user journey.
Prototype
To prepare for my next round of user testing, I used compiled my designs into a clickable Invision prototype.
High-Fidelity Testing
My validation process involved two rounds of testing, each with five different users. I gave each user access to my prototype and asked them to complete three main tasks while also giving feedback on the look and feel of the app.
Tasks:
Complete the onboarding quiz
Swap a recommended product from their routine
Place an order from the shopping tab
Findings:
The first round of testing was largely successful, with each tester being able to complete each task. However, I was able to target a couple UX and UI pain points that caused a few users to stumble.
Some users were confused by the placement of Dewy’s “cart” icon in the bottom navigation bar
Some users accidentally swapped out their products in their routine and realized they couldn’t undo this action
Receiving this feedback, I continued to iterate on my designs.
Iterations
Due to the success of my user testing, I only had minor changes to make at this stage of the design. First, I moved the shopping cart icon to the top right instead of its previous position in the navigation bar. This felt more familiar to test users and I wanted the experience to feel as intuitive as possible. I also added a confirmation dialog box when swapping out a product in case the user hit this button accidentally.
To double-check my designs, I conducted one more round of remote user testing with five new participants. This time none of my users ran into the same stumbling blocks and they all completed their tasks smoothly.
Wrapping Up
There’s no denying that skincare is a tricky beast to tackle. While we unfortunately can’t cure acne with the tap of a button, we can adapt UX processes to give skincare users tools to tackle their skin insecurities.
This project was also a great lesson for me in letting the user lead the design rather than trying to tell people what they want. As a skincare nerd, I went into this design process with my wheels already spinning with potential solutions that I wanted to create for myself. But after interviewing and testing fifteen users throughout the app’s creation, the project changed drastically from my original ideas in the best possible way.
If I Had More Time
Based on the responses from my final rounds of testing, there are a few areas I would have loved to improve and explore. Most of these solutions would give the user more freedom to personalize their own experience.
Improve ease of use for users by allowing them to sort shopping results by “recommended for you.”
Allow users to see multiple product recommendations for each step of their routine at a time, by using a swiping carousel feature.
Do more user research into what people value most in product reviews in order to improve the current reviewing system within the Dewy app. Make product reviews easier to find by adding a quick jump link above the fold on the product detail page.