SkinQuest
Mobile app for men’s skincare
Overview
SkinQuest is a mobile app that taps into the minds of male identifying users who are interested in starting and maintaining a skincare routine.
A quick 5-question skin quiz generates a simple routine recommended by SkinQuest experts, which is automatically uploaded into the user’s home page. To maintain ongoing engagement, SkinQuest incorporates notification reminders as well as the opportunity to collect and redeem points via an integrated rewards system.
The Challenge
To tap into this opportunity area to help men learn how to feel good about their skin. I had to construct an app from scratch based on one idea and essentially develop an entire business model around it.
The Solution
In this 2-week design sprint, our team created the MVP of this app involving these screens:
Sign-up and onboarding
Skin Quiz
Home Page
Products Page
Routine Builder Page
Rewards Page
Timeline
2 weeks
My Role
UX Researcher
UX/UI Designer
Team
UX Designer (4)
Tools
Figma
ProCreate
Keynote
Zoom
Pen & Paper
Methodologies
User Interviews | Persona | Affinity Mapping | Feature Prioritization | Journey Map | Design Studio | User Flow | Wireframes | Prototypes | Usability Tests | Style Guide | Specifications Document
Problem
The skincare industry today is predominantly catered toward women as the primary audience. Men who are interested in starting a skincare routine feel alienated from the options available, and feel overwhelmed when doing research.
How might we help improve the experience of starting and maintaining
a skincare routine for men that are interested?
Determining the User
Who is this product for?
In order to know who to interview, a screener survey was conducted to make sure we would end up interviewing the correct target audience intended for the app.
I wanted to know if people had a skincare routine, were they interested in skincare and their familiarity with skincare in general. The two requirements that had to be met in order for people to be interviewed were:
Must be male
Must be interested in learning about skincare
A total of 30 people completed the screener survey and I was able to schedule 10 user interviews. I focused our interview questions on understanding the how, why and what of their thoughts of skincare, past and current experiences with skincare, routines and overall habits.
Key Insights
Meet Jake
“I want to look good, so just tell me what to do and what to use.”
With the problem statement in mind and the acquired insights from the user interviews, I created a persona, Jake. Out of all the goals, pain points and needs, I focused on identifying the main ones to help focus the design direction of the product.
I also mapped out Jake’s skincare journey in order to discover areas of opportunity to help him through his quest.
Opportunities
Help narrow down the list of product choices with a personalized quiz.
Offer tiered price points for products.
Provide routine and accountability through reminders and/or rewards.
Vision & Design
Realizing who Jake was and where he was in his skincare journey helped us to move onto the next step of our process, designing our app which was on the device Jake used most often previously. That started with feature prioritization. Features like daily reminders and a reward system were assessed as must haves while others like a camera feature or ingredients were deemed less important for Jake.
Next we implemented a design studio which focused design in specific areas for six different screens/features and quickly created many design solutions.
Some ideas that came out of this method were:
Having a swipe animation on the account sign up page to take them into the skincare quiz to delight.
Having cards on the homepage for the most important aspects of the app so Jake doesn’t have to search too hard for them.
Separating products by price categories for Jake who would only buy a more expensive product if it was very effective in solving his skincare issues.
Collaborating this way was important to create the strongest idea for our product in order to create medium fidelity wireframes to conduct usability tests with.
Usability Test
Mid-fidelity wireframes
The mid-fidelity prototype was tested through a series of five scenarios and tasks amongst a group of 4 users.
Key Takeaways
Users wished to see more information about the routine on the home page, such as notification times and the products used.
Button placement and size was taken into consideration when moving into hi-fidelity, as users indicated that some boxes were difficult to click on.
Tips of the Day was removed from the homepage, users said it typically doesn’t present a helpful tip that is relevant or personalized.
UI Elements
Consistency through a style guide
A mood board was created to outline an overall feel that we wanted the app to convey. The color green best captured the clean and gender-neutral theme the team was looking for. To maintain that modern clean feel, a sans-serif font, Nunito, was chosen for the app’s typography. A style guide and full specifications document was created with spacing, components, typography and iconography.
Hi-Fidelity Wireframes
*In additional user research, we found that games were one of the most used apps on users’ phones and what keeps users coming back to an app are deals and discounts. Based on this, we introduced the point system in our app to provide deals and gamify the experience to provide an emotional and monetary reward.
Usability Test
High fidelity wireframes
The same scenarios and tasks from the mid-fidelity usability test were used again for the high-fidelity usability test. We added one more task to test out the rewards page - Redeem a reward.
Key Takeaways
Although all users completed each task, there was indirect success as users expected the following:
2/5 users expected to edit the morning/evening routine from the home page cards.
Solution: Add an “edit button” to the home page notifications.2/5 users expected the “My Products” photos on the home page would bring them to the Products page to view more information.
Solution: Link the images under “My Products” to individual product page2/5 users expected the routine on the results page to be clickable.
Solution: Adjust design so that the routine does not look similar to buttons
Next Steps
To continue Jake’s quest, we have some next steps to further develop the SkinQuest app.
Research and design the chat feature as well as add micro interactions. Our users seek 1:1 help from skincare professionals and the chat feature would allow them to do so.
Introduce levels for the user to advance his skincare. If the user completes certain milestones in rewards, he can unlock a new step in his skincare routine.
Determine the app shopping experience. Build out a physical locations map so the user can see places to buy in their location or partner with e-commerce sites such Amazon.
Reflections
It was a challenge designing a product from end to end. I had to factor in both the business needs and the user needs throughout the project. All features introduced in the app had to answer the question of how it would operate as a business on the back end. When a challenge presented itself, I had to always remind myself to look to the user and ensure I was solving for their needs.
Finally, communication within the team is key. There were a few bumps in the road in terms of providing updates and communicating ideas which did set our timeline back a bit. As a team we recognized that over communicating was the best option to ensure there was no disconnect.