Your customized companion to achieving glowy, healthy skin.

GlowMate at a Glance

Overview

The skincare industry is booming, and for great reason. Taking care of our skin is not only important in regards to our health, but how our skin looks and feels also has an effect on how we feel about ourselves. Although hyperpigmentation, aging, acne, texture, and scarring are completely normal, the look of our skin can have an impact on our confidence.

With this in mind, I wanted to create an app that helps users not only improve the health and glow of their skin, but also their confidence in themselves.

Enter GlowMate, a skincare app that not only helps users determine ingredients and products that will improve their skin, but also helps users build customized routines that safely incorporate products that they already use. The app helps users determine whether or not certain ingredients/products will fit safely into their routine, and whether or not the ingredient is recommended for their skin type.

GlowMate is the ultimate companion on your journey to glowy, healthy skin.

Interact With Figma Prototype

View GlowMate in Action

Prototyping & Testing

My Process

User Research

Ideation & Prioritization

Information Architecture

Interaction Design

UI Design

Tools

Figma

Adobe Illustrator

Optimal Sort

Miro

Google Suite

Otter.AI

Human-Centered Exploration

Problems Explored

Stress in building skincare routines that are safe and effective.

There are an overwhelming amount of products that are available to purchase; however, many products often contain ingredients that should not be used with other ingredients, or contain ingredients that should not be used if the user will be in the sun. Some of these products are also sometimes not as effective as they claim to be or are too expensive.

This has made it stressful and overwhelming for skincare users to determine what products to use, when to use the products, and how to use the products.

Stress in finding products and ingredients that best address user skin concerns

It is easy to find all kinds of ingredients and products, but there is not an easy way for users to determine which products are safe to use together, or in the sun.

It is also hard for users to determine which products will be most effective in helping users address their skincare needs and concerns.

Goals

Reduce stress skincare users face when developing their various skincare routines.

Make it simple and easy for users to build different types of routines based on their specific skin type, skin concerns, budget, schedule, etc.

Reduce stress skincare users face when determining the best/safest products & ingredients to use in their routines.

Recommend products to users that work safely together, are a good match for the users routine, effectively address the user's skincare needs, and are filled with the best ingredients for their skin.

03

Make it easier for users to safely incorporate products they already use into their skincare routines.

Even after the user's routine is developed, users should be enabled to add products they already use to the routine, and see if the products will work safely and effectively in their routine.

Research Methodologies

User Interviews

Four in-depth user interviews were conducted with people of varying ages, backgrounds, and cultures who frequently use skincare products.

This method was beneficial in determining what processes and tools use to find products and implement products into their skincare routine.

The user interviews also enabled me gain a deeper understanding of user needs, behaviors, and patterns.

Competitive Analysis

In order to optimize GlowMate's position as a desirable solution for skincare users, I conducted a competitive analysis. This involved researching the current market, understanding the strengths and weaknesses of competitors, and identifying how GlowMate could stand out from the competition.

Through this analysis, I was able to determine user needs, collect design patterns, and identify opportunities to optimize the user experience. Additionally, I looked at how competitors addressed user needs and identified potential gaps where I could improve upon their solutions.

Competitive Analysis Findings

User Interview Key Findings

01.

Before trying a product, users want to know that the product has clean ingredients, is dermatologist recommended, has positive reviews, can be safely incorporated into their skincare routine, and what the benefits of using the product are.

02.

Skincare users are overwhelmed by all of the options and are not sure what is safe to use, what will be most effective, what ingredients will fit into their routine, how to fit products in their routine, and which ingredients can be used together.

03.

In a skincare app, users want customized skincare routines that are catered to their skin concerns, skin type, their preferred routine type, and preferences.

04.

In a skincare app, users also want to be able to add specific products to and have the app tell them where it can fit into the routine, and if it is safe for their skin.

05.

In an app, users want to be able to reflect on how they like a product over time, and determine if it needs to be replaced.

06.

Users want to know the price range of products, and want to see recommended products from a wide range of price points.

Empathy-Driven Storytelling

User Personas

After analyzing the above research findings, I created user personas which included demographic information, their goals, pain points, and motivations. I also included a visual representation of the users to help visualize their characteristics and needs. These user personas formed the basis for the design decisions I made throughout the UX design process.

Below is one such persona, Emily.

Task Flows

Next, user and task flows were developed in order to map out how users would move through the website to accomplish their goals. Below are the task flow that demonstrate how users will go about creating an account, completing the skincare analysis, selecting products for the routine, adding a step to the routine, and completing the skincare log.

User-Centric Design Solutions

Wireframes

Next, I used the task flows and user research to begin developing wireframes. I first created low-fidelity wireframes using pen and paper. Then, I created high-fidelity wireframes using Figma. After receiving feedback from peers and my advisor, I began developing a prototype.

Low-Fidelity Wireframe

High-Fidelity Wireframe

Brand Identity & UI Kit

In order to develop GlowMate's brand identity, I first determined the following values that would represent the brand: reliability, trust, helpfulness, simplicity, and inclusion. Using those values, I developed a color palette and chose typography that further represented the brand values. I then created various sizings and iterations of my JoinGo logo. Finally, I created a UI kit to be used throughout the product.

Prototyping for User Feedback

Prototyping

After refining my brand identity and UI Kit, I began developing my high-fidelity wireframes for the task flows that I would like to test. After receiving feedback from my mentor and peers, I used Figma's prototyping feature to develop my first prototype. The interactions and screens created were developed to mimic the task flows created previously.

My prototype included 5 task flows:

Create an account
Complete the skin analysis
Add a product to the routine
Add a routine step to an already existing routine
Complete the skincare daily log

Usability Testing Key Takeaways

In order to determine the areas in which my design needs further iteration, I tested my prototype with users. This helped me discover areas in which my design needed some refinement, parts that worked well, and things that could be added or removed from the design. This processed helped me to ensure that my product is user friendly, accessible, and a viable solution that meets the needs of the target audience.

Below are the results and findings:

Make the function of the category/ingredient buttons more clearly evident.

This could be done by more clearly grouping these buttons with the categories and ingredients rather than having it grouped with the search bar.

This will help users clearly understand that the button helps them switch between how they are browsing products.

Reduce wordiness and reword lengthy sections of the app.

This could help users better navigate the app quickly and efficiently. It would also help them only have to read the most important information.

Specifically, some of the skin analysis answer choices will be reworded, along with some of the sections on the skin analysis overview, and the routine page.

Add an “info” icon to the skin type answer choices.

None of the users who tested the prototype had issues selecting a date; however, multiple mentioned that they didn’t know if they were making their selection the correct way.

Final Prototype Features

Finally, I took the insights and takeaways gained from usability tests, and applied those as I iterated on the final prototype displayed below.

Complete skin analysis to get a customized skin profile.

Select products for your routine based on our recommendations or choose your own.

Product routine match - GlowMate shows you whether or not a product will fit into your routine safely.

Personalized skincare routines based on your needs.

Product Overview_ Avocado Cleanser Screen Thumbnail

We tell you how much of a match each product is for your skin with our "percentage match"

Add your own steps to your skincare routines.

Check off steps on your routine as they are completed.

View the benefits and key ingredients of each product.

Track your progress with our skincare daily log, and get custom recommendations over time.

Final Takeaways

GlowMate has been one of my favorite projects so far. Skincare has always been very important to me, but i've always found it difficult to navigate. There are constantly so many new products and ingredients to try, and so many skincare routine recommendations. It was always confusing to determine what products to use, when to use them, and how to use them safely and effectively. As I started researching this problem, I found that so many skincare users felt the exact same way. So, I decided to take on this issue with the creation of GlowMate.

As I embarked on the journey of creating GlowMate, I tried to keep not only the main problem that I was working to solve in mind, but also the user. The user research that I conducted gave me so much insight into what struggles skincare users face when choosing products and building their skincare routine. One of the biggest insights I gained, was the need for flexibility in an app of this nature. Most users are constantly making small changes to their routine over time, based off of how well products are improving their skin, how their skin feels, and even based on the time of year. Therefore, I wanted to give users the ability to completely customize and even evolve their routines over time. I wanted them to be able to add or remove steps and products to their routine, track their progress towards their skincare goals, receive recommendations over time, and add or remove routines.

Though GlowMate has been one of the projects that I felt the most passionate about working on, there were a few challenges along the way. I think that the biggest challenge was deciding how to brand GlowMate. It was challenging to determine what direction to go in and how to best convey the values of the brand. I wanted the branding to convey reliability, inclusion, simplicity, joy, confidence, and of course "glowy-ness." I went with a bright and cheery color palette that also felt more inclusive. I went with a simple and sleek logo/typography that I felt conveyed a sense of simplicity and reliability. The components are rounded and soft, which I felt seemed more welcoming and simple. I went back and forth on all of these design elements; however, after receiving feedback from peers and research participants, I feel that I ended up making the right decision!

Because of the challenges that I worked through along the way when developing this project, I feel that I am able to better anticipate issues that may come up in the future and plan accordingly for them.

Interact With Prototype