top of page
kOZHA
mockup screen 1.png
mockup screen 2.png
Overview

Finding ways to help people in their skincare journey by teaching them about the products and ingredients in them

Role

UX Researcher
Information Architect
UI Designer
Visual Designer

Tools

Figma

Illustrator 

Overflow

Milanote

Constraints

3 months

iOS App

Start

test

empathize

define

ideate

prototype

As part of my capstone project for UX Bootcamp at Springboard, I performed a design thinking project with waterfall methodology over the course of 3 months. I chose this project in particular because it is something that I am passionate about in addition to wanting to help facilitate the experience of those who are unfamiliar with the skincare world because nowadays it's so easy to get overwhelmed with so many products and ingredients on the market.

Problem Statment:

How can we help people with their skincare journey?

Solution:

The objective of this project was to design a platform that enables users to easily access it (e.g. in a store) and use it as a search engine. When they log in, users can search for a product by typing its name or by scanning its barcode. Users also have the option to learn about the ingredients in the products by scanning the ingredient list, a feature that is made accessible through OCR technology (Optical Character Recognition), which makes the list more legible and easier to get more information about.

Secondary + Primary Research

To kick things off in the right direction, first I performed desk research by examine the skincare industry so I can learn more about the market that I'm building this platform for.​ The growth of the skincare industry can be attributed to purchases made by male consumers who are becoming more conscious about their skin. Performing the secondary research, I discovered that:

Frame 13.png

Although the skincare industry is dominated by women, these statistical findings encouraged me to design an app that anyone can use irrespective of sex. Egalitarianism has always been a concern of mine and inclusive design is something that I strive for.

Given that this was a user-centric design project, I wanted to familiarize myself with my users' shopping preferences and their pain points, to design an app that would address their needs and accompany them in their skincare journey.

I administered a survey to 46 participants to examine potential users and find the right interviewees for this project.

Frame 14.png

After administering a survey I chose 5 young professionals with different career backgrounds and varying degrees of experience using/with skincare products. The subject group consisted of two skincare experts, one intermediate user, and two users with limited skincare experience.

Synthesizing the findings

To summarize the findings from the interviews I created an Affinity Map, to better organize the data. I used the tool Milanote to virtually create sticky notes. 

Frame 15 (1).png
Frame 16.png

map 1

map 2

Based on the gathered data, these were the main pain points that the users were experiencing:

- They were all aware of the importance of skincare, even the ones who didn't have a regime but they were open to learn more

- Ingredients intimidates them, and none of them can say that they can name every ingredient from the list

- Finding the right product for their skin type is a long and complicated process.

The 2 How Might We questions that I identified after provided feedback from the interviews were:

1. How might we help people to discover better skincare products based on their skin type?

2. How might we educate them about the ingredients in the skincare industry?

The next step is to synthesize all of my findings into a persona that will guide me throughout this project, so say hi to Sasha! Being that this is an inclusive design, Sasha identifies as a non-binary person and is a skincare beginner with a drive to learn more about it because they notice some imperfections on their skin. Skincare should be made accessible to everyone and by making Sasha non-binary I am trying to exemplifying inclusivity and breaking gender stereotypes with regards to skincare usage.

meet Sasha!

Sasha.jpg
Persona 

Sasha is 26 years old and lives in Venice, California. They work as a surf instructor so their skin needs constant protection from UVA and UVB rays. Sasha is not in the habit of wearing sunscreen, so they notice some damage to their skin, with a little redness and fine lines on the forehead.

Frustrations

There are a variety of skincare products on the market and Sasha does not have the resources to make an informed decision about which products are appropriate for their skin type.

Goals

To invest in a good SPF product that will not harm the ocean’s coral reefs.

Quote

“You cannot stay young forever!”

Creating Sasha's Flow

Following the waterfall process of this design thinking project, the next step in the process was to brainstorm ideas and to figure out the way to design an app that is user-friendly and takes into account the gathered research material based on our persona.

Before sketching the app with pen and paper, it was important to create Sasha's flow through the app, more precisely the red routes that they will take.

user flow.png

user flow

I have always enjoyed doodling and sketching random things from an early age, so the sketching aspect of this project brought me a lot of pleasure/enjoyment. I got the inspiration for sketching this app from the minimalist movement and wanted to reduce the cognitive load of the user, in order to design a user-friendly app with an aesthetic like that of Instagram or Tumblr.

(Unfortunately, I was not able to perform the guerilla usability test due to the Covid-19 pandemic, however, I sent early sketches to my mentor and a couple of friends, and made any adjustments necessary based on their feedback.)

sketch(1).jpg
sketch(2).jpg

sketches

Designing in Figma

When turning these sketches into the wireframes and high-fidelity screens, and later on for prototyping, I used my favorite tool Figma. Visual and interaction design is very important to me as a UX designer, so I spent most of the time on this part of the project.  When creating mid-level wireframes, I really wanted to focus only on Sasha's flow, so they can be closer to achieving their goals. 

onboarding.png
onboarding
product list.png
product list
welcome.png
welcome
product page.png
product page
skin type.png
skin type
ingredients page.png
ingredients list
home page.png
home page
camera.png
camera
search.png
search
new product.png
new product page

style guide

For the design aesthetic of this app, I strived to be gender-neutral and opted for minimal colors, clear imaginary and some abstract elements. The choice behind the colors was to create a softer look that is clean and safe. It is intended to be visually appealing and is meant to entice the user. The blue-purple color provides a sense of trust, and the minty green represents nature and health. For the logo, I chose the word "Kozha" which translates to "skin" in Serbian, the country from which I originated.

cover.png

style guide

It was important to test a working prototype with real users for the purpose of this assignment, so I designed high-fidelity screens using Figma where I also incorporated some edge case screens.

HF onboarding.png
onboarding
HF product list.png
product list
HF welcome.png
welcome
HF product page.png
product page
HF skin type.png
skin type
HF ingredients list.png
ingredients list
HF explore page.png
home page
HF camera.png
camera
HF search.png
search
HF new product.png
new product page

Testing the Prototype

After developing a prototype, I moderated a remote usability test with 10 different participants. The test was divided into two sessions with 5 participants in each, and one week in between each test so that I could iterate and adjust the design flaws of the first test. The testes were young professionals from different career backgrounds and varying levels of experience with skincare products.

They were asked to perform the same type of tasks and were invited to offer constructive criticism based on their experience navigating the app. The tasks included:

1.    adding their skin type

2.    searching for a specific cleanser

3.    liking a product + liking an ingredient

4.    scanning a barcode of a product + adding a new one

5.    capturing the ingredient list with OCR technology

The first two tasks 10 out of 10 participants performed it successfully. The issues started showing around the task number 3.

test #2

before

after

Frame 22.png

Minor Issue
The badges were too small to read

Critical Issue
The pull-down menu was confusing for the participants, and no one understood the purpose of the New List button, so to reduce the cognitive load of the user, I deleted the menu and just left a simple like button.

 

Major Issue
3 out of 5 participants had issues finding the liked product/ingredient page due to the lack of consistency in iconography

Minor Issue
Some of the testees mention that this bars are hard to distinguish

Normal Issue
While talking with users, they mentioned that they were used to having a home icon on the tab bar, so I decided to change it.

test #1

final design

Frame 20.png

OCR scan

final design

Anticipating every move that a user will take throughout this app, I created edge case screens that helped me during this testing. Making this option for users to add a product if it's missing from the database, I created a trustworthy platform where a user can feel appreciated. The skincare industry is constantly growing, and there's always some new product or ingredient

Adding a description box helped the second round of testees to effectively perform the task of capturing the ingredient list with OCR technology

Besides adding the description on top, I changed the color of the lens box, making it easier for a user to notice when they are using different camera options that this platform provides

Critical Issue
During the first usability test, all of the participants performed a task to scan + add a product with ease. The problem occurred when they had to capture the ingredient list with the OCR technology. Not making this function more visible and accessible, and separated from the scanning the barcode option, testees failed at performing the given task.

test #1

End

During all of this, I realized that the purpose of the project can get lost, especially when you are nit-picking the visual design and being a perfectionist. That is why I needed to constantly remind myself of my users, my research, and my persona. By performing the second round of usability tests successfully,  I was able to overcome my personal bias and focus on configuring an app that is best suited/tailored to the needs of my users.

Next, I would like to measure attitudinal KPIs and examine the overall usage of the app. Also, I would like to focus more on OCR technology and the general scanning feature that this app provides. I would like to know how to utilize that option in the best way possible before sending it to a developer (if this project ever reaches that level :)

Being this an MVP, I just wanted to focus on aspects of products & ingredients, but Kozha can go in so many different directions. For example, after gathering feedback from the surveys and affinity maps, I notice that a lot of users have an issue developing a habit for a skincare regime. It would be interesting to dive deeper into that problem and try to fix it with this app.

bottom of page