THE CHALLENGE
Create a skincare personalization experience through the Google sprint process.
MY ROLE
User research, product concept, UX/UI design and evaluative testing.
TOOLS
Figma, Adobe Illustrator, Adobe Photoshop, Whimsical.
TIMELINE
5 days
The Discovery
Deconstructing 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
.jpeg){kind=small}
.jpeg){kind=small}
Building 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.
Validating through 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.
Applying user insights
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)
Sketching wireframes
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.
.png)
Developing UI mockups
Progress bar
I designed and prototyped 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:
OTHER WORK
