“MyMigraine” App: A UX Design Case Study
A personalised profile for migraine prevention
How many times have you wished to make your migraine disappear to avoid missing out on a social event? Or even just to have a smooth day at work?
Migraine
Competitive Analysis
Conducting my research, I came across interesting insights related to existing migraine applications on the market.
What I noticed is that migraine tracking apps target mainly pain and triggers while they lack other tracking features related to reliefs, nutrition, menstrual cycle, and sleep. A fact, that is somehow strange since people from the survey and interviews claimed that most of the aspects related to the missing features either trigger or relief their migraines. So how can these features be neglected in migraine apps?
Defining the Problem
User persona
The user of my application is Rubi.
Rubi travels quite often for work so she barely has time to exercise. She is medically diagnosed with migraines and has 2–3 attacks per month.
Goals & Frustrations
Rubi does not know where or how to track her migraine attacks in order for her to figure out her personal triggers. She has also become immune to medicine so she would like to know about alternative relief methods. In addition, Rubi does not understand the link between her menstrual cycle and her migraine attacks and would like to learn about patterns between them.
Mind Mapping
After learning about my user’s pain points, I performed a brainstorm session and built up a mind map. I was able to generate ideas and identify relationships among the different data and information. This helped me in better identifying the problem.
Problem Statement
Women who suffer from migraines need a way to prevent their attacks and understand its patterns because it stops them from daily life events.
Developing the Solution
Ideation
My initial ideas were to keep the regular migraine tracking features (pain intensity, attack frequency, pain locations, and triggers) that are available on existing migraine apps and adding new features that would help develop a more enhanced tracking profile.
The features to be added are relief packages that offer remedies that help the pain and tracking features for nutrition, menstrual cycle, sleep, and activity with that app. Later I thought, why not allow MyMigraine app to sync to existing tracking applications on the user’s device?
Nowadays, women in general keep track of their menstrual cycle, daily lifestyle, their new diets or nutrient intake, their sports activities and much more. It would be easier if all this information is read and analyzed by MyMigraine app instead of having to input all the information again.
Solution
MyMigraine app will help the user:
- Track and store the duration and frequency of her migraine attacks
- Track and store her personal triggers and reliefs
- Understand the relationship between her menstrual cycle and migraines
- Prevent having a migraine attack in the future
By offering the feature of syncing information from existing tracking apps, MyMigraine will be able to create a personalized profile of the user. This profile, after a few attack inputs, will then have the ability to distinguish patterns and generate statistics of changes in lifestyle, habits and other factors related to the user that could predict when the user would have a migraine attack and notify her to do something about it.
Prototype
Mid Fidelity Prototype
I worked on the mid fidelity prototype to set up the skeleton of my application. The UI is under construction !
To complete MyMigraine App project, I had to proceed into the UI Design. The UI is a crucial part of the process since it translates all the obtained research into a final product that the user can enjoy. In order to develop a coherent design, I followed some steps that guided me through the process.
1. Visual Competitive Analysis
In the UX phase, I looked into direct and indirect competitors on the market. I analysed what features and services they offer or don’t. In the UI phase I examined the physical appearances of these competitors; the colors, typography, logos and imagery they use. Visual grouping allows me to identify patterns and find opportunities to develop a distinctive design.
What I realised about my competitors is that two of them went for multiple bright colors with a neutral shade and chose rounded bold typefaces. The other two chose one color as a primary along with neutral shades and modern thin typefaces.
2. Mood board
A mood board is a means to present the visual concept and idea to a certain audience. It is a key element to connect with stakeholders and get everyone inline on the designer’s vision. A mood board is a combination of images, texts and colors that represent the style of the intended design.
On the contrary to my competitors, I thought having a dark mode suits for a migraine application since it is calmer for the eyes hence, aiding in the prevention.
3. Design System
A Design system is the setup of the elements that constitute the design such as icons, symbols, texts, buttons, form fields, etc.
_Typography gives a certain definition and character to the design. I tend to select not more than two typefaces for legibility and consistency. For “MyMigraineApp” I chose Helvetica Neue in three fonts: Light, Regular and Medium.
_Colors unify the design and create a visual hierarchy. The color scheme I went for is quite simple. It consists of a primary color that is almost white, dark blue-black shades as secondary and shades of grey as the dark neutrals.
_Icons: For this project, I have decided to draw all the icons myself in order to have consistency throughout the design. I drew them first on Adobe Illustrator and then exported to SVG format to use in Sketch.
_Buttons communicate actions that users can take. I had one primary button that indicates when the user has completed a task. I worked on a micro animation for the button on Invision Studio that you can see below.
4. Design
Here are some screens from the final design !
For the full design please check my website here.
