OVERVIEW

Glow is a startup that wants to help people find the right skincare products and routine that works for them. They understand that skincare can be overwhelming and confusing - with thousands of different products, reviews, and articles. However, skincare is very personal, as everyone's needs are different, so finding the right products is very important. By developing an app, they hope to provide all of the information that someone may need about different products and be everyone's personal skincare assistant throughout their journey.

CHALLENGE

Create an app that helps users better understand skincare and learn about what products and ingredients will work best for them.

role

UX/UI Designer, UX Researcher, Branding

tools

Figma

Duration

April 2021 (two weeks)

Client

Glow

1. Empathize
🌎
research goals
What we're trying to accomplish
  • Learn about different skincare products, concerns, routines, and skin types
  • Learn about what people value when purchasing skincare products and where they hear about them
  • Identify how people establish a skincare routine, and any challenges that come with implementing it
View my research plan
research questions
These were answered through research
  • Why is skincare so important to people?
  • What are consumer's shopping habits like? (i.e., what makes them trust a product?)
  • How do people establish a skincare routine that works for them?
  • Are they able to see results from the products that they use?
  • How do people learn about skincare?
secondary research
Learning more about skincare

There is a lot to know about skincare, and some of the topics I decided to research that would give me a better understanding were:

📈
Skincare has been growing faster than any other part of the beauty industry
🧖🏻‍♀️
Many people find their routines to be a form of self-care and helps them build healthy habits
🌱
There are many active ingredients that address certain skincare concerns
competitive analysis
How do people manage their routines and learn about skincare?

I looked up some skincare apps that are currently helping people manage their skincare routines. I also decided to include Sephora and YouTube because many people mentioned that this is what they use to learn about new products.

Strengths 👍
  • Apps allowed people to enter their current skincare routines
  • Many had a skin quiz to find out their skin type and get product recommendations
Weaknesses 👎
  • I noticed that a lot of people complained that there wasn't enough information about product ingredients, and there wasn't a clear way to compare products together
user interviews
Hearing from our users

I focused the questions around people's experience with skincare, from buying and learning about products, to establishing the routines that work well for them.

You can view the questions that I asked here

The questions were able to reveal the relationship people have with skincare, any pain points that they were having, as well as what they value the most about certain products and brands. Below are a few of the comments that people made that helped provide valuable insights:

empathy map
Understanding our research findings

I synthesized my findings with an empathy map to narrow down on anything that came up frequently. From the user interviews, a lot of people seemed confused about skincare ingredients and the overwhelming amount of product options.

Some insights that helped lead the direction of the project were:

2. Define
👤
persona
Meet Brianna

The insights that were gathered helped define the goals and needs of our target user, Brianna. She is new to skincare, and finds the amount of products and ingredients to be extremely overwhelming. The most confusing part is learning about different ingredients, what they do for her skin, and how to incorporate them into her routine. Her goals that I decided to focus on the most were:

problem statement
This is what we need to solve
"People need a way to understand what ingredients are being used in their products in order to benefit the most from their skincare routine."
ux strategy blueprint
What's the big picture?

‍I decided to do this to consolidate all of the research information that I had and think on a big picture what I'm trying to accomplish and what the benefits are.

The app should act like everyone's "personal skincare expert", that's available to them wherever and whenever
project goals
Aligning our user, business goals, and technical considerations

As seen by Brianna's user goals above, a lot of it focused on being able to find the right products and ingredients that would work best for her, as well as learn about it in a way that wasn't confusing. This aligned perfectly with Glow's business goals, as they wanted to reduce the confusion that comes along with skincare.

feature roadmap
Deciding on what features to add

A full list of features was drafted and prioritized based on user research and our project goals. I wanted to focus on the learning aspect of products and ingredients., which aligned perfectly with the goals of our business and user. I focused on designing the P1 & P2 features.

journey map
What is Brianna experiencing?

I focused on Brianna's journey as someone who is new to skincare, and wants to learn more about different products. Initially, I expect her excitement to be very high, but will start to dip as she realizes the overwhelming amount of products and information out there. This related back to the main pain points that my interviewees struggle with. However, as she starts to look at reviews and compare products, she'll start to feel reassured again, and hopefully her emotions will be positive as she starts to incorporate the product into her routine and begins to see results.

app map
Organizing content

I decided on three navigation items that would help users perform their tasks. It helped to work on this app map alongside the user flow, so that I could see the pages that would be necessary to help users navigate through the task.

Home
  • Morning & Night routine, something users may be referring to daily
  • Routine page content: compatibility, products, a way to edit their routine
  • Ingredient information, such as ingredient of the day and dictionary
Search
  • Users need a way to look up products (search bar or barcode)
  • Could search by concern (with tags) or product type
  • Product overview pages - included ingredients, compatibility, reviews, and a way to compare.
Profile
  • Change any personal information that would help with recommendations
  • Saved products
user flow
Finding the right product

The task that I focused on was users being able to learn more about skincare products and ingredients, and whether or not they were compatible with their current routine. There were a few considerations that I had to help me map out this flow, such as:

3. Ideate
💭
wireframes
Making some design decisions

I began by sketching out some ideas on paper. One thing I considered was if the products should be listed out on the homepage, or if someone should click into them and be brought to a different page to view the products. I decided that it would be better to click into it and be brought to another page, especially because at this point they were entering their products to check compatibility rather than tracking if they were following the routine throughout the day. If the routine was showed immediately on the homepage, it may seem like the main feature of the app, and I didn't want this to take away from the other product analysis features.

As seen in my sketches, I was initially going to have four navigation items, with a "learn" section where people could find out more about products and ingredients. However, I felt that a lot of this could be shown on the homepage to show some of the main features that my app was offering, so I decided to get rid of this since it would become repetitive. As you can see with my wireframes, the homepage has a lot more information than my initial sketches, since I decided to move this information over:

moodboard / logo
Establishing the brand

I put together this moodboard to start thinking about how I wanted my brand to be portrayed. Some keywords that were helpful in finding these images were clean, fresh, minimal, caring and inviting.

There were a lot of ideas that were inspired by my moodboard, however, I decided to go with the first option below, as I felt that it suited my brand the most with it's youthfulness and simplicity.

style tile / Ui kit
Gathering some of the UI decisions

I started creating a reference sheet as I was putting together my brand to help with consistency.

Colour Palette
  • I decided to go with pastel colours because they gave a fresh, comforting, and relaxing feel which is suitable for skincare since it is often associated as a form of people's self-care.
Typography
  • Merriweather (primary font) = look very sophisticated, but still inviting.
  • Karla (secondary font) = lots of character to it, which made it look very youthful.
Images
  • I knew that product images would be important so that users knew what they were looking at.
ui design
Putting it all together

One of the biggest challenges I faced initially was how to work with these light, pastel colours. It was hard to make them stand out from one another, especially within such a small screen size. In the end, I decided to make it work with this background gradient, where I was able to subtly mix the brand colours together. I thought that this was a good use of the colours, it matched the logo, and also added the "glow" effect.

Another challenge was figuring out how to show that a person's skincare routine was compatible. I spent some time sketching out different ideas, but I was afraid that a lot of them would be confused with showing progress, like adding another step into your skincare routine, rather than the compatibility of the current products.

Overall UI Designs:

4. Prototype
💻
objectives
What I wanted to get out of user testing
scenario #1
Finding a compatible product

I first asked users to open up their morning routine and see which product was showing as incompatible. I wanted to test if they knew how to replace the current product with a new one, and if they understood how the compatibility was being shown to them.

scenario #2
Comparing products

Before deciding, users were asked to compare two products. I asked them to choose the one that has the least number of concerns and add it to their routine, to see if they understood the information that was given. It also tested if they knew how to add it to their routine.

scenario #3
Scanning feature

I told the users they were shopping in stores and had the physical product with them. I let them know that there was a quicker way to look up a product besides searching for it, and wanted to see if they knew what I meant.

5. Test
📝
conducting the test
Putting my prototype to the test

The test was conducted remotely over Zoom with four participants. I watched them complete the given tasks on the high-fidelity designs, with the tests ranging from 10-20 minutes. All participants were able to successfully complete the tasks. I asked people to rate how easy they found each scenario, and there was no score that was rated less than 3/5, which was the minimum that I was expecting in my strategy blueprint.

Below are the average scores of how easy the four participants found each scenario:

Scenario #1
85%
Scenario #2
90%
Scenario #3
100%
affinity map
Understanding the findings

Through my usability testing, there were a lot of suggestions that were given, but I decided to split them up into what was suggested for the current features, and what people suggested as features that could come later. I also noted a few challenges that people faced that made them hesitate in their tasks.

Areas to explore 🤔
  • How to make the compatibility stand out more, especially on the morning routine page
  • How content is displayed on the compare page
  • The wording of certain sections to give people better instruction on what they were supposed to do
What went well 👍
  • Design: People were impressed by the use of colours, saying it looks very calm, which aligns with my brand. They also liked the use of icons, as it made content more readable and helped catch their attention.
  • Content: Many expressed that it was convenient that all the information they needed was given (all the research was done for you), and this would help them make confident decisions.
  • Advice: People liked the tips and concerns that were given.
iterate
Priority Revisions

Deciding what to iterate on this one was a bit challenging since there weren't any major concerns that came up. I decided to address the following minor changes:

If you're interested, you can view the final prototype below:

How did this app solve the problem?
People need a way to understand what ingredients are being used in their products in order to benefit the most from their skincare routine.
  • Personalized: Users can enter in the products that they're currently using to see it's compatibility and find new products that would work well
  • Compatibility: Every time they look at a product, the app will let them know if it will work well with their existing routine
  • Informative: A simplified explanation of main ingredients and what they do. Provided the right amount of information to help users make their decision, including tips on how to incorporate it into their routine
  • Clear: Complex information was easily understood with the help of icons and imagery
Reflection
next steps
If I were to take this project further...

When I was synthesizing my research, I realized that there were a few different features that I could build for this app. The main ones that I would want to focus on building next are:

the challenges & the wins
How I overcame the difficulties

I think the most challenging part of this project was figuring out the right amount of information to give people. A lot of secondary research was necessary in order to learn more about products and different ingredients, which I found that I was doing throughout the project and not just at the beginning. In the end, I think that I succeeded in finding that balance, as some of my user interviewees said:

Going back to one of the opportunities highlighted in my journey map, I think I was able to "simplify skincare", and made it easy for people to replace the products in their current routine. Everyone was able to complete the usability tests, and there were no major roadblocks along the way. I believe this was successful as there were many considerations that I made along the way, and prioritized the features and screens that were necessary for users to complete the given tasks.

Next
Headspace - Adding a feature