AlopeciaHub - Product Design / UX Research / AI Build

  • Product Designer

  • 3 months

  • Figma, Zoom, GoogleForms, Lovable

  • Lee O’Connor

Overview

It is estimated that 80 million Americans are afflicted with Alopecia, which is a term that encompasses many different hair loss conditions: genetic, autoimmune, or loss from other causes, such as medications, hairstyles, hair pulling, etc.

Image of bald person

Many people with Alopecia seek out others with the condition on social media (Facebook/Instagram), and less frequently, through in-person meetings (NAAF conferences).

Image of hands typing on a computer

Because of the spontaneous origin of the disease, many have difficulty finding community and resources for dealing with the disease.

Image of people holding hands

I saw a gap in the market for a product that would be a virtual hub for people with Alopecia.

I wanted to create a space for finding community and resources for dealing with this disease.

View prototype


Initial Research

My initial research was done through a Google Forms survey. I wanted to gauge how interested people would be in an app for Alopecia Areata.

I was able to source 29 people with Alopecia.

Out of all the respondents, 100% expressed interest in an app for AA.

GoogleForms Survey

In the survey, I also asked what kind of features people would like to see in the app.

The following features had the most interest amongst the group:

  • An online community/chat feature (70%)

  • Ways to find mental health experts/dermatologists that specialize in Alopecia Treatment (60%)

  • Articles related to Alopecia Areata (65%)

  • Product Directory (50%)


Target Demographic

After this initial data collection from the survey, I followed up with 2 respondents and conducted user interviews for a more comprehensive understanding of target user.

I then generated a few user personas to better emphathise with potential users of the app.

User Persona #3 - Maria, Courageous Caregiver

User Stories

Using the data from the user interview and surveys, I generated a few user stories to illustrate the typical users’ needs:


“How might we create a central destination for people with Alopecia

that offers connection, resources and support?”


Key Areas of Focus

Based off of my initial interviews and survey responses, I distilled the data to generate 3 key areas to focus when designing the MVP:

  • Communities to join to start conversations and get support.

  • Product directory with links to retailers (wigs, permanent makeup, headwraps etc.).

  • Healthcare directory with links to hair loss + mental health experts.


Wireframes

My next step was to start sketching out the user flow with paper + pencil. Below is a wireframe sketch of the onboarding process:

paper wireframes

Mid-Fi Wireframes

Hi-Fi Wireframes


Style Guide

Color Palette

I chose to work with a palette of purples, blues and earth tones. I felt that the hues lend a soothing aesthetic to the app, as well as evoking emotionality and imagination.

Typography

I chose the Nunito font for the logo text because I wanted a sans serif font that was legible, and had optimism to it that fit well with the mission of the app.

I chose the Apple font SF Pro Rounded as the default font.

View prototype

Typography and Logo

Icons + Logo

For the logo, I designed a chat bubble-inspired mark that subtly incorporates the profile of a person without hair. The goal was to visually convey that this app is a dedicated space for communication within the alopecia community.

I chose to use Lucide React icons because they provide a comprehensive set of beautiful, customizable SVG icons that are tree-shakable and work well with React/TypeScript.

I am currently building this app in Lovable.dev.

Next Steps

The next steps for AlopeciaHub would be to run usability testing to gather the following data:

  • Feedback on ability to post to a community.

  • Feedback on ability to purchase via the links in the Shop section.

  • Feedback on ability to book an appointment with a health professional.

I am currently building the MVP using Lovable.dev.

My goal is to create an MVP and conduct testing with recruited volunteers.

Considerations for MVP

Based on my research, I found that some people expressed interest in finding people that lived near them for in-person meet-ups.

In the future, I would love to explore options for creating a search feature that allows users to locate people within a close radius to where they live, and be able to send a message to meet up.

Another important exploration currently underway is how to monetize the app. I currently have built a subscription model, where the users after an initial 7 day trial, pay $2.99/month.

I also am building affiliate/ad revenue from linked online retailers. Further down the line, I would love to connect with the healthcare industry to make healthcare bookings through the app, and perhaps seek ad revenue through targeted pharmaceutical ads, so users can find healthcare options easily.

User Persona #4 - Jessica, Informed Optimist

User Flow

(tap for larger view)