SkinCure
The Project
Skincure is a mobile skincare app. This case study features steps from inception to low-fidelity wireframes through research, ideation and UX design principles.
Duration: 4 weeks
Methods: Interviews, Affinity mapping, Wireframes, User testing, Prototyping
Tools: Adobe XD, Figma, Miro
Context
Many people practice skincare in some capacity. Regardless of their level of skincare knowledge, users need reliable recommendations for products, and guidance when creating an effective regimen because they often feel overwhelmed or uninformed when making these decisions themselves.
The Process
1
2
3
4
5
RESEARCH
DEFINE
IDEATE
PROTOTYPE
ITERATE
1
Research
Competitor Analysis
To get a better understanding of the competitor landscape, I conducted analyses on four popular skincare apps in the IOS app store currently. I found that while all apps allowed users to input their current skin regimen and provide reminders, none used a survey to create a personal skin regimen and recommend personalized products to achieve the user's overall goals.
Interviews
I planned to conduct six user research interviews with the goal of gaining greater insights into how we can create an app that makes skincare more accessible, educational and transparent for individuals wanting to better their skin.
Key Findings & Insights
I planned to conduct six user research interviews with the goal of gaining greater insights into how we can create an app that makes skincare more accessible, educational and transparent for individuals wanting to better their skin.
User Stories
I then created user stories to gain a deeper understanding of my potential users. It was important that I empathize with my users to ensure that they remain at the center of the design process. I used the data from the affinity diagram to inform a persona that represents what multiple users say, do, think and feel.
2
Define
User Insight Statement
I used real data and research to inspire direct action with a user insight statement:
Jen Anderson, a 35-year-old busy professional, needs unbiased, science-based resources to recommend a regimen with effective products for anti-aging because she's wary of recommendations from salespeople who may just be trying to make a sale.
Empathy Diagram
To remind myself of the needs and frustrations of my users, and to maintain a user-centric focus for the duration of the project, I created an empathy map from the affinity diagram to embody the typical user who would be using SkinCure to assist them in creating a skin regimen.
User Journey Map & Storyboard
Using all of the research collected, I created a user journey map to gain a better understanding of what my user might think and feel during her experience. More importantly, it allows me to illustrate her emotional and mental journey.
%20(1).png)
Core Features
With a better idea of my user and their needs, I identified three core features that I wanted to focus on for the product.
Regimen Builder
A regimen builder that adresses user's unique skin concerns
3
Ideate
Personalized Products
Personalized product recommendations with an emphasis on ingredients.
Reminders
Daily reminders to help users stay consistent with their regimen, which will in turn facilitate quicker results.
User Flows & Task Analyses
Finally, I created a task analysis and user flow for my user persona. This gave me a clear picture of the steps that the user would need to take to get to their final goal, and how to deliver this goal in the most effective manner possible.
Low Fidelity Wireframes
Since helping build a skin regimen, providing personalized recommendations, and setting reminders to complete skin care routines for users were at the forefront of SkinCures goals, I wanted to focus on highlighting these core features. I started with pen and paper wireframes and created multiple versions of each screen until I found a combination of features and elements I thought matched the users' needs.
Next, I created mid-fidelity versions of these wireframes in Figma, and created a clickable prototype for user testing.
4
Test
Usability Test
Remote moderated user tests were conducted with 4 individuals after the completion of the wireframes on Figma. By conducting usability tests I was able to refine what users find useful, change what they didn't react well to, and add some parts they thought may be useful to other users. Before carrying out the user tests, I wrote a plan to test the onboarding flow, personalization quiz, and reminder feature. I created an objective for each, followed by 1- 2 tasks requiring the user to go through 4-8 steps to be considered successful.
Key Findings
The results of the usability test were recorded, analyzed, and put into an affinity diagram followed by a 2x2 priority matrix. I made notes of the positive and negative feedback so that I knew what areas to keep expanding upon and what needed to be reworked.
Step one: Place user comments on stickies and separate them by task
Step two: Place main comments in a priority matrix for iterations to wireframe
5
Iterate
Design Changes
I made three main design changes based on the user's feedback and made it a priority to change parts of the wireframes based on the most common issues that were raised through the usability tests. I created a newer mid-fidelity version of the app that featured more consistent button styles, adding some notification buttons, and more information to aid new users.
.png)
.png)
Information icons
I added information icons to words in the skincare quiz that may be unfamiliar to new users. This will help users starting their skincare journey to understand what the options mean and can choose the most accurate selection
.png)
Allow app to send notifications
To further aid users in being consistent with their skincare routine, I added a notification pop-up to ask for permission to send notifications for regimen reminders.
.png)
Added bottom nav bar to all slides
In the beauty regimen building quiz, I initially did not have the bottom navigation bar. I added the bottom navigation bar to the quiz to create more uniform screens so the app felt seamless throughout for the user.
Final Product
After many iterations, my final product for this case study aligned with all of the objectives I had set in place- it includes the two core features necessary for users to find and create/watch reviews of different activities/accommodations in the area they are travelling to, while appearing visually appealing and simple to use.
Retrospective
Key takeaways
With this being my second project in my UX/UI journey, I felt much stronger in my capabilities of figuring out a problem and going about fixing that problem- in this case, skin care. Once I reached the prototyping phase, I was made especially aware of the importance of thinking intentionally about each step in the design process. I considered how each step would contribute to our user-centred solution. This leads to my other key takeaway, which was always prioritizing the user and their needs, rather than my own desires as a designer.
What can be improved?
I would’ve liked to have been able to create a high-fidelity prototype in Figma for another round of iteration. I realized that higher fidelity prototypes would’ve required me to create micro-interactions in Figma that were simply out of reach for my skill set at the time (such as interactive variants and animations). I think now, I would be able to do them with ease and am excited to start implementing them into this app in my free time.
Secondly, I would’ve also liked to expand the capabilities of the reminder features. One of the participants in the user tests suggested I allow users to set a reminder for a single step in their regimen. She uses an exfoliating chemical peel every other week because it's too potent for everyday use. But she struggles to maintain consistency every two weeks.
What's next?
As this project only includes mid-fidelity wireframes, it will be important to implement UI patterns into this app to create more high-fidelity wireframes within Figma.
