HELIO
Be more consistent and informed about your skin and hair routine
This is a capstone project for Springboard
Process Overview
INTRODUCTION
THE PROBLEM
Although important, skin and hair care are back burner priorities that are too confusing and take too much mental space to maintain for most.
Users needed a solution that would reduce the frustration with inconsistent routines and allow users to make informed decisions without apprehension.
THE SOLUTION
With ideas synthesized from research and user interviews, I set out to create Helio, a mobile app that allows users to be more consistent and informed.
MY ROLE
I was the solo designer on this project, from user research and synthesis, visual design, UX design, and usability testing.
RESEARCH
SECONDARY RESEARCH
For this project, I initially chose to tackle an issue that I personally have: I constantly forget which products I intend to use. However, I had to first validate some assumptions. To do that, I asked some important questions:
-
Do people care about skin/hair care?
-
Does it matter whether people follow a routine?
The answer to both questions, it turns out, is yes. Millions of people are affected by some kind of skin or hair condition and American consumers spend a collective 1.2 billion USD per year on acne treatments alone. All these purchased products are not money well spent unless it is used routinely, since studies show that routine, consistent use of products is key to improved skin and hair condition.
USER INTERVIEWS
USER INTERVIEWS
The findings from my secondary research validated my assumptions, but creating a solution that solves for my personal concerns would not necessarily solve a typical user’s concerns. So, let’s conduct some user interviews!
Method
5 semi-structured interviews with participants that indicated frustration with skin or hair care
Objective
Understand the what and why of the major frustrations participants have with skin and hair care
AFFINITY MAP
With my user interview data, I set to work synthesizing all the things that my user interviewees said into something that would be digestible and insightful for ideating and design. I began with an affinity map that allowed me to group common themes together, as well as common sentiments that each participant had.
DEFINING THE USER
From the affinity map, it is clear that there are 2 distinct user types: The Enthusiast and The Novice. The key difference is that one's frustration stems from a lack of consistency, while the other's stems from a lack of knowledge.
PROBLEM STATEMENTS
With these two personas come two problem statements. They define what the final product is trying to solve:
How might we reduce the frustration of inconsistent skin/hair routines?
How might we reduce the apprehension around the lack of knowledge that users have around skin/hair care?
IDEATION
USER STORIES
With the problem statements, I finally understood the user's needs and began to work on my solution. First, I created my user stories to pinpoint what core functions the final app should have in order to satisfy these needs.
SITEMAP
I then created a sitemap in order to organize the user's needs and priorities. (I will note that the final sitemap was heavily modified from this.)
USER FLOWS
At this point, I decided on red routes that were essential for every user of the app:
-
Add a product to a routine
-
Create a new routine
LOFI PROTOTYPE
SCREEN SKETCHES
To brainstorm the layout and look of the screens, I created sketches for the screens essential to my red routes.
GUERILLA USABILITY TESTING
Method
With the screens I sketched, I created a prototype in the POP by Marvel app and conducted 5 guerilla usability tests to see if the layout of the app and screens would raise any major usability issues.
Findings
-
The cabinet feature was difficult to find for most participants. They searched every other page of the app before, by process of elimination, landing on the profile page where it was. They voiced that this seemed like an important function of the app, but felt hidden.
-
Participants were confused by the difference between the regimen and routine pages and why they were separated in the first place.
Recommendations
-
Reconsider where the cabinet page should go; as most people interacted with the bottom navigation to look for it, consider there.
-
Either find a way to combine the routine and regimen into one page or find a way differentiate the two so that it is meaningful and obvious to the user.
WIREFRAMES
With the findings from the usability in test in mind, I created wireframes to create a working foundation before moving onto something higher fidelity.
HIFI PROTOTYPE
STYLE GUIDE
To make sure that my UI would look consistent across screens, I created a style guide. I wanted the overall feel to be clean and refreshing, so I settled on a minimal color palette with no-frills font and icons.
HIFI VERSION 1
USABILITY TESTING
USABILITY TESTING ROUND 1
Method
5 usability tests, testing the red routes of the app
Objective
Discover major usability issues and get general impression of design
Issue #1:
Cabinet page was difficult/confusing to find.
When asked to locate an "in-app" log, participants had trouble figuring out what that meant. Some voiced that the icon used did not make sense to them.
Solution: Consider switching the name/icon but, more importantly, label anything that is not familiar and immediately obvious to users.
Issue #2:
Participants became confused when there was no feedback
Where actions were successfully completed, such as adding a new product to the cabinet, users repeatedly added products because they were unsure if it was done or not.
Solution: Create notification for successful interactions.
USABILITY TESTING ROUND 2
Method
5 usability tests, testing the red routes of the app
Objective
Discover any more major usability issues and see if fixes from previous round were sufficient
Issue #1:
Participants looked for routine editing options in two different places.
About half of participants would try to add a product to the routine from the cabinet page, rather than from the routine edit page.
Solution: Provide a route for users to add products to routine from the cabinet page.
Issue #2:
Participants were unsure of how to figure out if a product is compatible.
Participants expected to be able to tell whether a product was incompatible from the product page, rather than being warned after attempting to add.
Solution: Either in addition or in place of the warning screen, add a callout to the product page.
FINAL PRODUCT AND REFLECTIONS
NEXT STEPS
Given more time, as this capstone only allowed for 2 rounds of testing, I would conduct more usability testing and iterate on the design more, as there are definitely still usability issues present.
WHAT I LEARNED
More than UI/UX methods and processes, I made a lot of mistakes that helped me learn how to be a better designer in the future.
Remember that the process is very iterative.
To be very honest, I am not entirely happy with this project's outcome as I feel it strayed very far from what users truly need. As I worked through each step of this project, I would complete and archive materials (like the affinity map) without looking at them again. I feel that I learned exactly how iterative the design process needs to be. Frequent referencing and updating of deliverables would have kept me going in the right direction and have relevant deliverables at the end of the project.
Write down any notes, thoughts, and ideas thoroughly and often.
Throughout this process, there were many times when I would finish something, like a user interview, or just be thinking about my project and have a a sense of clarity or ideas. Instead of writing my thoughts down, I just said, "Eh, I'll remember it later." Of course, the consequences were coming back and feeling unclear on what exactly I was doing and what I was thinking before. As the project progressed, I became more thorough and organized with my notes and documentation which made everything much less painful.