end-to-end app: bloom
Designing a medical hair and mood tracking app for people with alopecia areata to promote mentorship and community, as well as bolster collaboration with physicians via image organization.
Skills: UX research, UX design, brand design
overview
BACKGROUND
What is alopecia areata?
Alopecia areata is an autoimmune condition associated with hair loss ranging from patches to total baldness. The National Alopecia Areata Foundation describes the condition as “surprisingly common,” affecting about 2% of the global population.
THE PROBLEM
Sense of isolation and care challenges
Despite the prevalence of the condition, many with alopecia areata feel isolated or even “alien” during their journeys. Hair loss ought to be taken seriously, as it can spur deep anguish and grief: according to National Alopecia Areata Foundation, a 2022 study suggests that adults with alopecia areata are 30 to 38% more likely to be diagnosed with depression.
Compounding these emotional challenges, some struggle with organizing hair images or relying on printed photos in clinics, complicating medical care. With these complex struggles in mind, I considered the following HMW questions:
How might we create a supportive community to help individuals with alopecia areata feel more understood throughout their journey?
How might we help people with alopecia areata organize and transfer medical images to improve continuity of care?
SOLUTION
Bloom, a mobile app that helps people navigate alopecia through:
Symptoms, growth, and media logs to document progression, complete with downloadable reports to facilitate collaboration with physicians
Filters in photo history to ensure quick access to specific areas, timeframes, treatments, and moods
Mentorship and mood tracking to promote community and holistic care
discovery
Competitor Analysis
User Interviews
Affinity Mapping
COMPETITOR ANALYSIS
How have others addressed hair loss and tracking?
To scope out how others have gone about hair loss symptom tracking, I examined two hair tracking apps.
Hairly
✅ Solid treatment cost tracker
Grow
✅ Solid onboarding
Following this examination, I identified the following opportunities in the hair tracking space:
👯♂️
Community-building: To the best of my knowledge, none of the tracking apps featured functions that promote connecting users with people going through struggles similar to them.
🩺
Pattern identification and filters: I’m curious about how we could organize trackable aspects to help people seeking to grow hair identify what may work best for them.
🪢
Inclusivity: that is, being careful not to favor any one gender, race, or hair pattern, whether in the images I select, text, or otherwise. Doing so could entail including an option to select "bald" for women.
USER INTERVIEWS
Interviewing people with alopecia areata
8 individuals residing in the United States, ages 19-29
Interview length: 45 minutes
In these conversations, I explored the following questions:
How and why do people with alopecia document their hair growth journeys?
How do people grapple with the emotional difficulties of hair loss?
Apart from going to the doctor, how do people experiencing hair loss learn about different treatment options?
INTERVIEW TRENDS
Emotions, community, tracking, and medicine
Interviews helped me realize the emotional dimension of alopecia areata is just as, if not more, important than the medical aspect of the condition.
I found these four broader themes emerge:
Emotions and community
Interviewees often reported feeling “alone” or even “alien” at some point in their journeys.
Some reported feeling deep anguish and grief, sometimes seeking therapy to grapple with their diagnosis.
Tracking and MD collaboration
Some individual reported difficulty with respect to keeping images organized or having solely printed photographs in a medical office.
Difficulty surrounding consolidation of hair images complicated care at times.
Mentorship
Everyone who had signed up to become mentors reported finding guiding others through the wide range of emotions associated with alopecia to be incredibly meaningful.
However, many noted being somewhat inactive in this role.
Unawareness of resources
Many found solace in the National Alopecia Areata Foundation (NAAF), which offers a youth mentorship program, support groups, one-on-one phone support, and more.
However, one person I interviewed had not heard of the foundation, signalling how some are missing out on its resources.
define
Persona
Feature Set
User Flows
PERSONA
Defining the users & exploring possibilities to help them navigate their condition
The alopecia areata community is diverse, and it is difficult to distill this wide breadth of experiences into a single persona. My persona seeks to describe the specific subpopulation of people with alopecia: those who track their hair, seek medical treatment to grow their hair, and would like to connect with others.
Why track hair?
excitement due to growth spurt
monitor loss
evaluate whether treatment is working:
how quickly?
how much hair is growing, and where?
Needs
sense of community -- not feeling like they are “on their own” in their struggles
gain access to info. to weigh pros and cons of treatment
stay up-to-date with new treatments through news, social media, etc.
Difficulties
needing to repeat medical history to new physicians
navigating insurance for medications & wigs
impact on mental health of losing hair
finding resources and emotional support for people with alopecia
With a wide range of identities in mind, I considered solutions that would address the following questions:
How might we connect people with alopecia areata with those who are able to empathize with them, guide them through the grief of losing one’s hair, and ultimately help them achieve a state of confidence and equanimity?
How might we help people with alopecia areata organize and transfer medical images to improve continuity of care?
USER FLOWS
Promoting mental health and facilitating collaboration with physicians
When brainstorming possibilities, I sought to find ways to bridge mental and physical health for people with alopecia. I figured having a mood log that could be shared with mentors could be a powerful way to spark conversations with a mentor.
INPUT AVAILABILITY
Regarding the more medical side of alopecia, I sought to find ways to help people organize their hair photos, with the hopes that doing so would help people collaborate with physicians through quick access to specific photos.
FILTER THROUGH PHOTO ALBUM - VIEW FRONT ANGLE PHOTOS ONLY
designing the solution
Sketches
Wireframes
Lo-fi Wireframes
Rough, rapid-fire lo-fi mockups: mood tracking, photo organization, and custom areas
usability testing
round 1
MODERATED USABILITY TESTING
Lo-fi testing to identify user needs and explore concepts
Test length: 45 minutes
Remote moderated test
In this first round of usability testing, explored the following questions:
How clear is the app’s purpose and functionality to first-time users?
How easily can users navigate and complete core tasks, such as documenting their mood and viewing historical scalp photos?
Are there any dimensions of the alopecia experience that I have not addressed in these mid-fi designs?
If so, how can I align my designs with their needs to best help people navigate their condition?
USABILITY TESTING RESULTS
Iterations: round 1
Main insights from testing:
With the initial hair tracking concept, users felt limited as far as what they could track. Following this feedback, I added the option to track both hair loss symptoms and growth traits, in addition to photos themselves.
As far as photo roll navigation, the initial iOS-inspired camera-roll concept proved to be the wrong direction, as users worried it could be difficult to search for specific photos. Following this feedback, I added filters on the photo album section, allowing people to filter for multiple tags, ranging from area of scalp, time, and phase.
Enhanced customization and categories
Before
After
Video upload for more in-depth tracking
Enhanced camera roll experience
Before
Design inspired by iOS camera roll
Users expressed concerns that photo collections could become crowded and difficult to navigate
After
Added filters for quick sorts, enhancing patient-provider collaboration
Segmented controls for log-by-log view
Enhanced photo sorting experience
Before
After
usability testing
round 2
MODERATED USABILITY TESTING
Testing mood input, photo history viewings, and custom-area creation
Test length: 45 minutes
Remote moderated test
In this second round of usability testing, explored the following questions:
How clear is the app’s signifiers and use of icons for to first-time users?
How easily can users navigate and photo histories? How easily can they access this history, and what filters would they like to apply?
How is the mood logging experience: how can I align my mood logging experience with their needs to best help people navigate their condition?
USABILITY TESTING RESULTS
Iterations: round 2
The main changes revolved around the following:
Tracking
better signifiers and easier access to photo history
more text labels and more flexibility through video recording
Symptom input
more clarity in feedback via larger CTA
Photo history
enhanced filters and added export PDF button
Mood log
swapped icons for pills and addedof text field for a cleaner, richer
Community thread
additional subtitle for enhanced access to specific topics
Tracking: better signifiers, easier access to photo history, and better navigation icons
Navigation bar:
more clear with an icon change and text labels
My photos
Icon change
Because several users found it difficult to locate the their photo history, I added text labels to all icons, reducing cognitive load and improving accessibility.
Before
After
Tracking: more text labels and more flexibility through video recording
Before
After
Symptom input: more clarity in feedback via larger CTA
Before
After
Photo history: enhanced filter options and addition of "export PDF" button
Before
After
Photo history: enhanced time filters
Before
After
Mood log: swapped icons for pills and addedof text field for a cleaner look and richer input abilities
Before
After
Community thread: additional subtitle for enhanced access to specific topics
Before
After
design
Branding
UI Kit
Hi-fi Mockups
BRANDING
Promoting comfort, empowerment, and vibrance via imagery
Since my app serves people to promote holistic care, I tried to steer clear of imagery that felt sterile. I wanted my app to feel warm, calming, and trustworthy for people experiencing the uncertainty of alopecia.
Through imagery and the color palette, I strived to make Bloom welcoming of people of various backgrounds, of all emotions, and of all experiences.
Bloom UI Kit
select accessibility considerations
Consistent hierarchy and layout to reduce cognitive load.
Color contrast for all text and UI elements compliant with WCAG 2.1 AA.
Text labels for icons so users are not relying solely on icons
end result
next steps
If I were to extend this project, my next steps would be the following:
Interviewing medical professionals who have worked with people with alopecia areata to understand how to best support patient-provider collaboration.
Designing a treatment tracking based on these conversations.
Conducting another round of usability testing on the treatment tracking feature.
reflection
First of all, I would like to extend my gratitude for all of the people I interviewed who so graciously and vulnerably shared their stories with me. This project wouldn't be possible without your interviews, and for that I am very grateful. Though I have a sister with alopecia, it wasn't until I spoke with you all that I truly started to understand the depth of struggle that alopecia so often comes with. I will do everything I can to turn my project into a live app in the hopes that it can help some of you.