UX Research | User Interface

Classroom Project | 1 week

A skincare personalisation app designed through the Google Sprint process.

THE CHALLENGE

Create a personalisation app in 5 days with multiple levels of user testing before the final product.

THE SOLUTION

Following a five-phase iterative process with the aim of reducing the risk before launching the app.

th (3).jpeg
th (1).jpeg

DAY 1

Breaking down the user flow of competitor services for personalisation. The user flow informed us of the limitations and the strategies that had already been covered and grounds for opportunity.

 


Short interviews to gauge the needs of the users were converted into user stories in the following format:
As a working professional, I want to reduce the steps of my skin care routine so that I can get ready faster.
As a user, I want a super lotion that evens skintone, moisturizes, protects from sunlight and nourishes my skin so that I can reduce the steps in my morning routine.
As a user, I want a product that cleanses and moisturizes at the same time so I don’t have to wash-clean-moisturize
As a user, I want a product that moisturizes for a longer time( like a week) so that I can forget that step for a week.

USER STORIES

COMPETITOR ANALYSIS

DAY 2

CREATING A USER FLOW

I used Whimsical to create the user flow. The flow is attempting to replicate the experience of a dermatologist appointment. The sections of information included demographics, lifestyle, skin profile, preferences, lead generation and purchase.

DAY 3

CARD SORTING

Asking a variety of users to sort the given cards, each representing an aspect of the initial user flow. Each person bucketed them separately, sometimes adding and removing cards. It also help me refine the language of the flow.

 

REVISED USER FLOW

From the card sorting it emerged that people cared about fragrance the least and always placed it as an add-on at the point of purchase. I also switched 'Major concerns' screen to the very beginning to mimic the experience of going to the doctor and sharing the reason for your visit. (changes marked in yellow)

DAY 4

WIREFRAMING

Starting with hand-drawn wireframes I tested certain complex features with users. Comparing two wireframes that have the same function gave me an intuitive understanding of the interface. I then went on to make digital detailed wireframes.

123.png

DAY 5

Progress bar

USER INTERFACE

I used Figma to design and prototype a question-based interface with prompts to help the user fill in the form. Key features include text descriptives to maintain a conversatory consultation theme. I used images across genders and races to exemplify skincare is for everyone.

Option to revisit the questionnaire post-analysis

Explaining why this question was asked

Introducing a new section

RESULTS

 

Try the quick prototype below: