Imaginer

A mobile app for migraine sufferers

View Prototype

Brief

Imaginer (an anagram of the word, migraine) is a combination of a wearable and mobile app that helps people manage their migraines. The app will be developed first for Android, adhering to Material Design and Google’s guidelines. In addition to the Android app, it’ll also be nice to develop an AI component to identify patterns and a companion smartwatch app (Android) for notifications.

My Role

End–to–end application design, research, information architecture, wireframing, logo design, illustration, interaction design, user interface design, prototyping, and testing.

Solution

My solution was to design an Android mobile app that helps migraine sufferers manage and track their migraines. I will also design a logo for Imaginer that is in line with the Google family. As a bonus, I will explore the design of a smartwatch app (Android) to display notifications and allows users to input data about their migraines.

Client

Google (now Alphabet) has been recently investing more and more in the Healthcare space. They are improving Google search with specific healthcare cards and quick information for the user, as well as working harder on research and cloud initiatives.

01

Research

What do people do when they get a migraine? What CAN they do?

To fully understand the scope of the project brief, I wanted to know how, when and why migraines affect people and what treatments and medications help them with their symptoms. What triggers peoples' migraines? What are the pain points migraine sufferers have when trying to track their migraines?

Competitor Analysis

I quickly realized after taking a look at migraine apps already on the market, that there were many opportunities for improvement. Obvious pain points for users would be too many steps during onboarding, confusing iconography, and cluttered interfaces.

Surveys and 1–on–1 interviews

To better understand my target audience’s needs, goals and pain points when managing and tracking a migraine, I conducted 1–on–1 user interviews and user surveys.

Research Insights

  • Stress is a major contributing factor to migraines
  • What triggers a migraine is sometimes a mystery
  • Keeping track of migraines takes too much effort, especially during a migraine attack

02

information architecture & use cases

To get a sense of the structure and flow of Imaginer, I created; a Site Map, a Task Flow and a User Flow for my persona. This User Flow is an example of designing for a stress case like trying to navigate through the app and track a migraine while experiencing a migraine attack. I wanted to make sure the steps were simple and our user could skip a step or quickly save her progress if she chooses to.

Define

Who are we designing for?

Based on my research, I defined who I thought would be the target audience for Imaginer. My Persona, Sonia, gets migraines once in a while. However, since taking on a new role at work, she has noticed her migraines happening more frequently. How can this design help her manage her migraines and take control of her symptoms, instead of them controlling her?

03

04

Design

05

Next Steps

My next steps with this project would be to test the high–fidelity clickable prototype with some users and make iterations based on their feedback. I would build out the rest of the features for the app and explore the idea of connecting the app with a smart watch or other wearable device. There might also be an opportunity to further enhance the user experience by incorporating voice activated tracking features with Google Home. I would then interview users again to see if these new capabilities would be worth exploring.

Designing the interface

Many people that I interviewed and surveyed said that it was hard to focus on screens when they have a migraine because of the bright light and movement. When designing the interface and interactions, I made sure to include illustrations that supported the text and labels. I also designed an intuitive interaction for recording their pain level. The more they are in pain, the higher they scroll up on the screen or lower when then are feeling good. My goal with this interaction was to create something simple but also delightful to use.

Low–fidelity Layouts

After doing additional research about onboarding flows, I sketched some preliminary wireframes of how the user would first enter the app. My goal was to keep the entire process from sign up to tracking their first migraine to no more than 8–10 screens. Next, I elaborated on those rough sketches and created digital wireframes and a mid-fidelity prototype for testing.

Styling the experience

Using the Material Design Theme Editor in Sketch, I created a dark color scheme that would be soothing to users suffering with the symptom of light sensitivity. I also came up with a set of custom shapes and textures that could be rearranged, scaled and combined to make all of the illustrations and icons.

Other projects: