Sun & Shade: Skincare Quiz
Designing an interactive quiz for a med spa website to guide users in finding the most suitable skincare treatments tailored to their unique needs.
Project Type
My Role
My Responsibilities
Proof of Concept
Lead UI/UX Designer
User Research
Wireframing
Prototyping
Usability Testing
Tools
Project Duration
Figma
Pencil and Paper
4 weeks
Overview
Sun and Shade Med Spa is a leading medical aesthetic center offering a wide range of medical grade skin treatments including injectables. The management and staff feel that recently many clients feel hesitant to come to the clinic for a consult or even call to have their concerns answered. Recognizing the growing demand for instant answers (with lowest effort) in today's tech-savvy world, they understand that many visitors seek information directly from the website. To address this, they want to use an online quiz that offers a personalized treatment plan to enhance user experience and boost client engagement.
Background
When the team discussed how to enhance user engagement while making it easier for users to find the information, the idea of interactive quizzes came up. The current layout of information on the website was thorough and straight forward, but a little "boring." Online quizzes are a "fun element" that can engage users, driving traffic to websites, and allow the business to collect valuable visitor information.
Quizzes offer personalized recommendations based on user responses, creating a more relevant and tailored experience. They can also educate users on various treatments and their effectiveness for specific skin concerns. Moreover, addition of a quiz could lead to higher conversion rates, as users are more likely to book a consultation or treatment when they feel their needs are being addressed.
The Problem
Many clients are hesitant to seek consultations or call with their concerns. They expect expect immediate and effortless access to information. Having complex information on the website in a straight forward was unengaging.
The Solution
Adding an interactive quiz will offer personalized treatment recommendations, making it easier and more enjoyable for clients to find the information they need. This will boost user experience, engagement, and conversion rates.
User Research
Methods used
-
Secondary Research: based on competitive audit
-
User Interviews
Secondary Research
What I know
Frustration with complex medical and technical jargon that makes it difficult for the user to find the right treatment for their skin concern
Clients feel overwhelmed by the variety of skincare treatments. No tailored recommendations or guidance for choosing the right treatments based on individual needs.
Most skin clinics around the area did not have personalized quiz element on their website.
What I do not know
User interest in integrated quizzes as a method to learn about skin treatments.
Increase in likelihood of users to book an appointment by giving them personalized solutions for their skincare concerns.
User Interviews
In order to understand users' needs, challenges, and preferences regarding skincare treatments and how a quiz might enhance their experience on the website, I interviewed 5 individuals (between the age of 20 - 55 yrs )who are actively interested in taking care of their skin. Of this pool of interviewees, 2 were current clients and 3 were people who were looking to get treatments to improve their skin. 2 of the 5 interviewees were male and 3 were female.
Objective User Interviews
-
Identify current challenges in finding information about skin treatments or services online / our website.
-
Insight on user interest in integrated platform with online quizzes and decision-making tools that can provide personalized recommendations.
-
Discover what features users consider helpful or frustrating in these tools.
-
Identify how they want their personal information to be handled (ex: email reports, call back from experts etc).
Affinity Map
Major Findings
Clear and concise language
Provide brief explanation of treatments in a language that is easily comprehensible to people of all ages and backgrounds.
User-Friendly and Personalized Experience
The quiz should have an intuitive design and customizable questions to deliver tailored recommendations based on individual skin concerns and goals.
Accurate Recommendations with Clear Explanations
Provide brief diagnosis of skin problem, and relevant treatment suggestions with detailed explanations on why they are recommended.
Integrated Access
Integrate quiz with other services, such as scheduling appointments or further information about recommended treatments.
Privacy
Ensure transparency about how user information is handled.
User Personas
Sarah Lao
42 years
Nurse
Married with 2 children
( 7 and 5 yr old)
Bio
Sarah is a 42-year-old nurse who’s always on the go. With her busy schedule, she’s all about finding quick and effective skincare solutions that fit into her hectic life. She’s tech-savvy and prefers using online tools for convenience, but she’s often overwhelmed with the amount of skincare information on the internet. She’s looking for a place that can provide her with personalized recommendations without the hassle of multiple consultations. Being a nurse, Sarah values clear, practical advice and appreciates tools that offer straightforward explanations and follow-up support to help her make informed decisions about her skincare.
Goals
-
She has sensitive skin, occasional acne, and is experiencing signs of early aging. Interested in finding effective and personalized skincare treatments.
-
She wants personalized recommendations for skincare that address her specific concerns and fit into her busy lifestyle.
-
Desires clear, reliable information to understand the rationale behind treatment recommendations and their benefits.
Frustrations
-
Feels overwhelmed by the amount of skincare information available online and has difficulty finding reliable, personalized advice.
-
Sometimes finds available information too complex or confusing, leading to frustration.
-
She does not want to be pushed into booking an appointment for a treatment without having a good understanding of it's benefits and drawbacks
"With my busy schedule, I need a skincare solution that’s reliable and personalized. An easy-to-use quiz that gives clear, practical advice would be perfect."
David Martinez
21 years
3rd year Computer Science Major
Lives with roommates
Bio
David is a third year university student juggling classes and a part-time job. With his hectic schedule and tight budget, he’s on the lookout for practical and budget-friendly skincare solutions. David is dealing with oily skin and breakouts, and he’s eager to find a simple, effective way to manage his skin issues without breaking the bank or spending too much time. Being a computer major, he loves online tools and prefers using them for their convenience, but he often feels frustrated about choosing the right treatment that will solve his skin concerns but also be within his limited budget.
Goals
-
Seeks personalized recommendations for skincare that address his specific concerns and are budget-friendly.
-
Wants a quick and easy way to get tailored skincare advice without having to spend too much time or money.
-
Desires clear, straightforward information about why certain treatments are recommended and how they can benefit him
Frustrations
-
Feels overwhelmed by the large amount of skincare information available online and struggles to find reliable, tailored advice.
-
Concerned about how his personal and skin-related data will be used. Worried about "marketing scams."
-
Does not like talking on the phone unless he really needs to.
-
Finds some online quizzes too complicated or confusing, which can be frustrating.
"With my busy student life and limited budget, I need a skincare solution that delivers results without breaking the bank."
User Journey
I then created a user journey map for the quiz outlining the steps a user takes from the moment they realize they need a skincare solution to the point they complete their treatment. This map visually represents the series of an user's actions, emotions, and touchpoints. It was then used to identify pain points and opportunities for improving the user experience.
.png)
User flow
Based on the major findings of the user interviews and the user journey map, I then created a user flow to articulate how a user would move through the website and get to the quiz.
.png)
Paper Wireframes
I drew out a few basic sketches to help me visualize how I wanted to layout the website before moving to digital wireframes. I wanted to keep the focus on the quiz and sketched out 4 wireframes: one for the home page, one for the quiz page, one for the quiz layout itself, and one for the results page.
Low Fidelity Wireframes
I took my paper layouts and ideas to create a few digital wireframes.
On taking a good look at the paper wireframes, I realized I wanted to add a section for "client reviews" to the homepage. Positive word of mouth is a key driving factor for reassuring clients of the benefits of a service and will help convince users to make an appointment.
Mid Fidelity Wireframes
I then brought my favorite layouts and ideas to a higher fidelity. After a few rounds of changes, these were the final mid-fidelity screens. Here, I decided to create a separate page for the "Book a Free Consult" CTA button to give it more prominence by isolating it from the results page (but I thought wrong...see usability study).
.png)
High Fidelity Wireframes
I then moved on to high-fidelity digital wireframes to add in design and color elements. Here are some of the key screens.
.png)
Usability Testing
To test out the functionality of the quiz, I asked 5 people between the ages of 25 and 55 years to test it in a unmoderated setting.
Objectives of the test:
-
Were users able to easily find the quiz?
-
Did they find the language used in the questions easy to comprehend?
-
Did they find any of the questions to be unnecessary or intrusive?
-
Were they able to complete the quiz without confusion or excessive effort?
-
Did the quiz include their unique skin concern? Did they think the quiz would be useful?
-
Was the quiz engaging? How likely were they to book an appointment / consultation after the quiz?
-
What was the overall opinion on design and functionality?
I gave the users a set of tasks to collect the information I needed for those objectives.
-
Navigate the homepage and find the quiz.
-
Go through the set of questions and complete the quiz.
-
Answer the above objectives on a sheet of paper.
Findings:
-
5/5 users were able to complete all the tasks. All of them rated the ease to be 10/10.
-
The clarity of the language used was rated 9/10.
-
5/5 users felt that the quiz contained their skin concern and would find it helpful to have a personalized guide.
-
Some feedback for improvement was provided:
-
All users felt that the quiz collected the right amount of information without being intrusive. But some wanted more explanation on how certain questions, like those about skin tone and sun protection use, would be helpful.
-
Some users suggested including a brief explanation of how their data would be used.
-
Navigation to the call to action step (step 3) was clear but it was not compelling. Users suggested enhancing the visibility of the next steps or providing incentives to book a consultation.
-
-
All users found the quiz engaging, but said they needed to do further research on risks, reviews and pricing before making time for a consult.
-
All users liked the simplicity of the design and found it visually appealing.
Re-design (based on feedback)
I reviewed the feedback from the usability test and got to work right away. I went back to the wireframes to see how these optimizations can be integrated.
This is how I decided to use the 3 suggestions into play:
-
I added brief explanations below the questions on skin tone and sunscreen use to clarify their relevance to the quiz. I also included a checkmark with the label ‘Safe for __ Skin Type’ to highlight that specific treatments require extra caution for certain skin types, especially darker skin tones.
-
I included an option to review privacy settings before submitting the quiz. Clicking this option opens a small pop-up text box with details about how the data will be used, as well as age requirement.
-
I changed the text and size on the final “next” button that navigates to the CTA step, to “Step 3: Learn More” for better clarity and increase prominence.
-
Then I decided to keep the CTA step on the same page as the results, so that the user can easily scroll up to review their results before deciding to take action. See mid-fidelity frames for more context.
-
I also changed the color of the CTA button "book a free consult" to a contrasting one in order to enhance visibility. I could not provide any additional "incentives" for booking as it was already complementary.
.png)
Brief explanation for why skin tone is relevant
Brief explanation for why spf use is relevant
.png)
privacy settings pop-up text
Over here, I switched from frame view to prototype view to better highlight the finer changes on the results page.
Added skin type safety label
Renamed the final "next" button to "Step 3: Learn More" and increased size
Brought the CTA back to the results page and gave the button a contrasting color
The final landing page experience
Reflection
If I had to pick one big lesson that I learned from this project, it was the need for clear explanations. Users wanted to understand why certain questions were being asked, wondering if questions about skin tone and sunscreen use were really necessary or intrusive data collection. Adding small explanations under these questions helped clarify their relevance and made users feel more informed and confident.
Although users found the quiz engaging and visually appealing, they mentioned needing to do additional research on risks, reviews, and pricing before committing to a consultation. This feedback was a good reminder that even with a well-designed quiz, users often want to gather more information before making a decision
Overall, this project reinforced the importance of how valuable user feedback is. Each tweak was made based on real user needs, leading to a smoother and more engaging experience.