UX/ UI Design
Migraine Assistant App
Meet Migraine Assistant App
Migraine is an extraordinarily prevalent neurological disease, affecting 39 million men, women and children in the U.S. and 1 billion worldwide.
Although we don’t have an exact answer yet, a number of potential triggers have been identified. There is no cure to migraine.
In this project, I tried to find out a way to help migraine sufferer to prevent or reduce the frequency, duration, and pain intensity of their migraine attacks
The Challenge
Migraine is the third most prevalent illness in the world affecting 1 billion people worldwide. However, this demographic of migraine sufferers is heavily underserved by mobile health applications, with only 0.2% of migraine sufferers using a migraine app. But why? A major opportunity exists for an application with the right strategy, and the right balance of features and functionalities to lead the market, while having a positive impact on the health of migraine sufferers.
- To understand how people with migraine currently manage or monitor it.
- To identify factors that trigger people’s migraine.
- Understanding the latest innovations in migraine apps to learn about features and possibilities.
Uncovering Insights & Identifying Needs
After conducting the user interviews, I created an empathy map to synthesize the information gathered and distill the responses and gain a deeper understanding of each user’s distinct experience with migraine.
Using my user interviews in total, I plotted them to the four quadrants of the empathy map: say and do, think and feel, hear, see. Each color on the map represents a user. From there, I grouped the responses to common themes. I looked for patterns, themes, similarities, and contrasts. Doing so helped me uncover insights from my observations and move towards identifying implicit user needs.
Research
Track the intensity and duration of the pain associated with each a migraine and anticipate the symptoms related to the next onset Learn how to prevent or reduce the severity of migraines by identifying triggers and taking medications Record symptoms related to migraines Develop a Migraine chart that provides a monthly overview of symptoms, triggers, and treatments
Meet Lydia
Now that the research and interviews had been synthesized, I gained some insight who our target users might be.
Lydia represents the goals and behavior patterns that I witnessed from the user interviews.
Competitive Analysis
To help identify the market segment that most directly aligns with Migraine Assistant’s positioning, I conducted a competitive analysis.
This gave me the opportunity to look for ways Migraine Assistant might differentiate itself and provide unique value to users.
I analyzed some of the main competitors. I uncovered the strengths and weaknesses of them.
I learned that there are a few migraine apps on the market which cover a broad variety of approaches and specializations.
Research and Interviews' Summary
My findings led me to conclude that in the hopes of helping to prevent future migraines, keeping track of potential triggers and pre-headache symptoms is recommended. As each individual person might experience a different set, any migraine sufferer can track any triggers and possible patterns in their migraines in a migraine diary.
Defining the Design Problem
Taking the insights and needs from my empathy map and persona, I translated them into POV (Point of View) statements and then HMW (How Might We) questions.
Reframing the insights and needs I identified in my research allowed me to turn them into clearer invitations and challenges for design.
We hoped to address this question:
How might we help migraine sufferers to track all potential triggers and other factors so users can improve their migraine condition.
Project Goals
After conducting research, it’s time to define the challenge and examine solutions. I started by deriving business goals from the Migraine App brief. After this, I used Lydia – the persona – to define user goals. The common goals between business and user goals became the foundation of the first iteration.
Solution
Keeping in mind the benefits for knowing what triggers your migraine is the first step to reducing the frequency of your migraine attacks.
Migraine Assistant would like to help users record and identify triggers of migraine, migraine symptoms, migraine medication, migraine frequency and duration, pain intensity and location, and other lifestyle factors so users can improve their migraine condition.
App Map
Informed by the features and priorities outlined in my product roadmap, I created an app map showing the content architecture proposed for Migraine Assistant.
User Flow
Following the app map, I created a user journey for logging into the app or signing up as a new user. This diagram illustrates the steps involved in completing each task. With the user flow, I was able to address the users’ needs before I began the visual design process to ensure that I was able to create a good and functional product.
UI Requirements
Referencing the screens I’d mapped out in my user task flows, I considered high level and detailed requirements that the app and each page would need and outlined them in a UI Requirements document. This served as an outline of sorts for me as I designed the key screens for the user flows.
Brainstorming
Brainstorming
Brainstorming
Wireframe
For my wireframe, I focused on on 2 aspects of a migraine.
– First having an option to record your migraine. In my interviews, most people said they do not know their triggers. They thought their symptoms are not the same every time.
– Second users have access to the Assistant page who can help migraine sufferers to find Doctors, answer questions about migraine and other helpful information to reduce pain intensity.
After completing the low fidelity frames, I then brought my mid these screen to InVision and built a mid-fidelity prototype to share with users. Testing the app’s design at this stage, before any visual design had been added, allowed me to get feedback from test subjects that was focused around the concept, organization, flow, and interactions of the app…
Branding and UI Kit
From this UI kit, it unifies the vision with all elements involved that creates the brand identity. The color palette here with more saturation is to create a darker theme to be more comfortable to interact for migraine sufferers who have light sensitivity. It gives a more soothing feeling. I keep mindful in choosing colors so that they don’t disturb nor distract users. The selection sections takes a main presence in the app which makes it easy to be in track on different options, while give the users enough information if needed without feeling confused.
Prototype
Going back to my wireframe, I applied the colors, styles and icon illustrations outlined in my style tile to create a higher fidelity version. I integrated distinct graphic icons throughout the app to provide strong visual cues and opportunities to understand content without needing to closely read text. I brought these wireframes into InVision once again, to create a prototype that offers another opportunity for user testing before going further with the site design and implementation.
Usability Test
I developed a usability testing plan and defined my test objective and goals. I created a script with 3 scenarios with tasks for test participants to attempt to complete. The test focused on 4 tasks:
- Navigate through the onboarding to set up an account.
- Record an attack
- Navigate to the home screen and then back to the “See the previous records”.
- Go to summary page of previous records and edit or complete them.
TAKEAWAYS
One participant made more errors than the others. I found it especially valuable to see how he interacted with the app: quickly skimming and tapping through pages– he seemed rushed and stressed. This emphasized to me the importance of making sure visual hierarchy and cues are employed to minimize user errors and frustration, especially since this individual may represent a state users could likely be in when interacting with the app.
However overall, the general consensus was that Migraine Assistant App was simple, straightforward, and easy to understand. Participants felt that it fit within a genre of apps familiar to them, and they were able to navigate and understand hierarchy of the app overall.
Insights + Recommendations
To synthesize my findings, I created an affinity map. I took the observations and results from my user testing sessions and created sticky notes for each observation and data point. I then sorted them as patterns, successes, problems, or observations. From there, I translated that content into insights and finally made a list of prioritized recommendations for the next iteration, outlining actionable next steps.
High Fidelity Prototype
After usability test, I applied the recommended changes as outlined in my high fidelity prototype. I decreased the pain severity options to help users select from them easier. I also revised how selected items display related to the “Select Your Options” pages to visually make it simpler.
In general, I tried to design a user friendly app to help users record and identify triggers of migraine, migraine symptoms, migraine medication, migraine frequency and duration, pain intensity and location, medications for migraine, and other lifestyle factors so users can improve their migraine condition.
To better integrate and emphasize Migraine Assistant’s ability to offer help users know what triggers their migraine because this is the first step to reducing the frequency of migraine attacks.
I brought these wireframes into InVision once again, to create a prototype that offers another opportunity for user testing before going further with the wearable design and implementation.
With more time, I would like to further develop the emphasis on Migraine Assistant’s wearable technology that allows users to track their vitals and other signs (like tracking quality of sleep) that could contribute to migraine at anytime.
To make this assistant interactive to get info about options which users do not know is another phase of designing this app.
My user testing revealed that at least a portion of users find this aspect of the product particularly valuable and interesting. Developing those aspects of the app further would provide focus and help create a more defined point of distinction for the app.
SEE MY OTHER CASE STUDIES
Microsoft Atlas Design System
Microsoft Atlas Design System
Microsoft Learn
Microsoft Learn Rebrand
OfficeBoss
OfficeBoss App Case Study