top of page

LEA ROBINSON

Role - UX, UI, branding (solo project)
Tools - Figma, Adobe Illustrator, Typeform

Duration - 6 weeks

Research methods - Secondary and primary research, user survey, user interviews, competitor analysis, usability testing

Problem

People who suffer from headaches and migraines are often asked by their doctors to keep a headache diary for 30-90 days in order to properly diagnose their headaches and get the appropriate treatment. Many people struggle with maintaining the diary every day. 

Solution

A mobile headache diary app that helps people log their headaches quickly.

  • Easy step by step setup

  • Easy and quick step by step headache logging 

  • Quick monthly overview of headache counts

Design Process:

Interfering factors include:

  • Current available apps have a complicated user interface or poor user experience

  • Logging takes too long/is too complicated 

HEADAID - HEADACHE DIARY APP 

1. Empathize

A. COMPETITIVE ANALYSIS

In the first part of my design process I began with a lot of research to empathize with the potential user. First, I conducted a competitive analysis of the headache and migraine tracking apps on the market. I also took a look at two indirect competitors that track menstrual cycles in order to analyze how they log and track symptoms. ​

 

Migraine Insight and Migraine Buddy tracked the most types of headache/migraine factors but also become quite bulky/complicated due to this. Headache Calendar was extremely simple and quick to use but lacked the ability to track important factors. 

Migraine Insight

Focuses on finding triggers and symptom patterns.

Strengths

  • A lot of tracking features to identify patterns

  • Clean UI

  • Easy calendar overview

  • Allows medicine entry

  • Can create a report


Weaknesses

  • Too many actions too take

  • A lot of info to enter and track

Migraine Buddy

Focuses on headache and symptom tracking

Strengths

  • Has various input types for headache, triggers, and symptoms

  • Has a pain scale

  • Allows medicine entry


Weaknesses

  • Too many questions to answer

  • Complicated, cluttered UI

  • Lacks a clear monthly overview of headaches

  • Non-intuitive UI

Headache Calendar

Focuses on easy headache tracking

Strengths

  • Clear monthly overview

  • Clear color coding for headache severity

  • Headache counter

  • Can send a report to your doctor

  • Very quick and easy headache entry


Weaknesses

  • Lacks engaging UI

  • Lacks ability to add symptoms

  • Cannot designate other headache types

Flo

Menstrual cycle tracker with AI chat

Strengths

  • Tracks cycle dates, symptoms, ovulation

  • Simple, clean UI

  • Allows AI chat about health topics related to menstrual cycles, sexual health, etc.

  • Offers symptom patterns and insight


Weaknesses

  • Information overload

  • No free version after free trial ends

Cycle Tracking in 
iOS Health App

Log menstrual cycles, track symptoms and factors

Strengths​

  • Quick and simple to use

  • Simple, intuitive UI

  • Offers related health info

  • Good overview of calendar

  • Easily make updates/changes to data entry


Weaknesses​

  • Only available on iOS

Indirect competitors:

Direct competitors:

I looked at the main features in the direct competitor apps to understand all of the important information that needed to be tracked for each headache/migraine attack. ​

B. FEATURE ANALYSIS

C. USER SURVEY & ANALYSIS

11 people participated in my user survey, they were all women between the ages of 18-45 who currently use a headache app to track their headaches/migraines. 

​

From the survey I learned:

  • Motivating factors to complete headache diary: 7 out of 11 chose “ability to complete each headache log quickly,” 2 said “simple to use app,” and 1 said “aesthetically pleasing app design.”

  • When asked how difficult it is to maintain a headache diary on a scale of 1 to 10, with 10 being the most difficult, everyone chose 5 or above, with 6 choosing 7. 

D. USER INTERVIEWS & ANALYSIS

4 of the survey participants were invited for a web-based interview to gain further insight into their personal experiences using a mobile app to track their headaches. 

​

From the interviews I learned:

  • All participants were asked by their doctor to keep a headache diary for 30-90 days.

  • 3 of 4 participants said they felt motivated at the beginning to keep a digital headache diary.

  • 2 users were not able to complete the full 90 days and 2 users completed the entire duration. 

  • 3 of 4 participants said their motivation dropped off because it took too long to log the headache.

  • Features/aspects of a headache diary app considered to be most important: easy and fast to use, simple calendar overview of headache attacks, a headache counter, and a medication day counter.

​

Insights

  • Users fail to keep a headache diary daily because the logging process takes too long.

  • App should be easy and quick to use.

  • Important features: an easy logging process, easy to read calendar overview of headaches, headache counter, and number of medication days counter.

  • The current apps are either too complex or too simple (don't track enough factors).

2. Define

In this part of the design process, I created a persona, an empathy map, ​and created my problem statement.

Says

  • Just make it easy for me

  • I just want to focus on my family

  • Don’t add more things to my to-do list

  • I really can’t look at screens when I have a migraine

  • I really wish I could be pain free for a whole month
     

Thinks

  • Not another headache today

  • I just want to focus on my family

  • I really need to record this headache, but if I look at a screen right now it will make me sick

  • When will my headache be over

  • I just need to make it through this migraine

Does

  • Turns off lights and eliminates noise during migraine

  • Tries to sleep the migraine off

  • Tracks headache in app

  • Takes migraine/headache medication

  • Leaves work early during an attack

  • Calls husband to make sure he takes over all family activities

Feels

  • Feels guilty when migraine attacks make her miss out on family time

  • Feels miserable during migraine attack

  • Feels anxious at the first sign of a headache

  • Feels overwhelmed when headaches interfere with work tasks

B. EMPATHY MAP

C. PROBLEM STATEMENT

3. Ideate

A. SOLUTION​

C. SKETCHES

Set-up flow

Log an attack flow

Headache overview flow

A. PERSONA

Meet Jennifer. She lives in Pennsylvania, is a busy mom of 2 that gets headaches and migraines. She just wants an easy way to keep track of her headaches so she can finally find relief and get back to her family. 

In order to understand Jennifer and her pain points even better, I created an empathy map.  

After the research phase, I deduced that users need an app that will allow them to quickly log their headaches so that they can track vital information in order to get a proper diagnosis and treatment.  

​​

  • How might we make keeping a headache diary easier?

  • How might we give users insight into their headache patterns?

In this part of the design process I came up with solutions, and created user flows. After that I sketched out my ideas, created mid-fidelity wireframes and a prototype, conducted usability testing, and created a UI kit.

  1. Easy set up process that collects important information from the user that will be used to make headache attack logging fast and easy.

  2. Easy headache logging process that will have a simple multi-step form process.

  3. Calendar overview with headache, migraine and medicine day counters.

B. USER FLOWS

I focused on 3 main user flows: 

  1. Set-up

  2. Log an attack

  3. Calendar Overview

5. Reflection

Key takeaways: 

  • There is a lot to be learned from medical journals when it comes to designing health apps. Some studies have been done that give us insight into difficulties with tracking and logging symptoms related to health conditions. I would like to read even more of these studies to be able to improve the design further.  

  • Designing this app made it very clear that UI played a huge role in this type of app where people may react negatively to certain images/colors due to their headaches. I would like to explore that further to see how I may be able to improve the design even more. 

  • I will continue to build out the remaining features that I did not focus on in this case study: Articles that can educate users about their headaches, and creation of reports related to trigger and symptom patterns. 

  • User emotion and pain points were more important than ever because the user is experiencing actual pain while using the app. It is important that pain points are correctly addressed in order to avoid causing more pain to the user. 

4. Prototype & Test

  • 4 users participated in the high-fidelity prototype usability testing

  • 2 iterations to the design to fix user problems (i.e. contrast issues, ability to move forward and back as expected, interactions, etc.)

View prototype

Mid fidelity wireframes and a prototype were created based off of sketches.

D. MID FIDELITY WIREFRAMES​

E. USABILITY TESTING​

I conducted usability testing with 5 participants over zoom, each lasting about 30 minutes. 

​

Objectives for the test:

  1. Observe if users can complete the specified task.

  2. Identify areas for improvement based off of users' feedback.

​

Results:

  • Users were generally able to complete each task with ease.

  • They enjoyed that the forms were broken down into several steps.

  • Logging a headache attack was achieved quite quickly by each user. 

  • Users asked to add the ability to add their own symptoms and triggers in the set-up flow.

  • Users wanted to be able to exit out of the set-up flow and go straight to home page.

  • Request to add confirmation of completion at the end of the headache attack logging process.

F. VISUAL DESIGN (UI KIT)

When designing the visuals, I took into account that most users may be in pain while opening the app and oftentimes very bright light can bother headache and migraine sufferers. Therefore, I opted to use calming colors and used darker colors for majority of the backgrounds. I also wanted to create illustrations that were a bit playful in order to avoid making the app too sterile or medical.  

bottom of page