Head Off Migraine — UI part
This story is a follow-up on my previous article UX Case Study — App to control migraine.
Tools Used: Sketch, Invision
Target Devices: Mobile (iOS)
Time: 1 week
A few weeks have gone since I start working on the UX for my last project, an app to help people who suffer from Migraine. In my last post, I described my journey through researching and the mid-fidelity prototype creation. Now I'm going to continue the process presenting all the steps until the creation of a high-fidelity prototype.
As a follow up from the last works, I started conducting a usability test identifying possible improvements during the development of the next designs.
You can check on the images below my findings:
High Fidelity Prototype
Visual Identity Competitive Analysis
Conducting the analysis, I could observe that most of the apps in this sector are using darker shades on their UI and brand. In order to create a different experience and a more recognizable brand, I choose to design my app with a lighter color, aiming to give the user a calm experience while using the application.
Brand Attributes
Another important step developing the bases before the app design was the definition of attributes that should describe my brand and support all user experience.
What does the brand represent and how do we want the users to perceive the brand?
After looking into all the data I had from my research, I decided on the following attributes:
- Helpful
- Dynamic
- Well being
- Trustworthy
With those points in mind, I then created a mood-board trying to translate it into visual design that could describe colors and attributes together.
Style Guide
Now with my Brand and "mood" defined I started working on my application style guide. At this stage with my base colors defined, I conducted an Accessibility Color Contrast test finding the best shades and contrasts to use on my components.
The result
Head Off Migraine is an app for migraine sufferers to help identify the factors that trigger their crisis. To do that user can insert daily information in order to help themselves to identify their triggers. After collecting data from users crisis the app help them with a meaningful report that they can share with their neurologist in order to understand and guide treatments.
In the following prototype, we can check two different flows, where Bruna downloads the app for the first time and set her profile and goals.
The other flow is when Bruna receives a daily notification and set how she is feeling and about a possible trigger that could give to her migraine. From that information Head Off Migraine shows a report to her that can be shared with doctors
Micro-Interaction
As part of this project I also developed micro-interactions to be implemented on the app, those interactions have the objective of making the app more fluid to users, creating a better sensation when using it.
That’s the power of microinteractions — These really small moments make a big difference in the way you experience a product.
Conclusion
Was more than 1 week of hard work trying to bring the best experience to users who suffer and want to get better from Migraine. During those days I could learn much more about my main public, conduct interviews and work on my solutions from the discoveries I made.
During the definition of my style guide and creation of my components, the contrast test helped me to set a better shade of colors, what for me was a small challenge adapting the designs. It was my first time looking into this type of accessibility issue, and made me think much more to add those checks on my next projects and my UX process.
Another great learning for me was the importance of defining "micro-interactions" on my designs, users really like it and you can see how smooth the interactions can be build given a totally different experience when using the app.
For me, it was a pleasure to work on improving the experience for such important subject. I hope I can have the opportunity to implement and improve it even more in the future.
As the next step, I would like to add the dark mode feature, even having light colors to get a calm experience, In moments of crises, some users could prefer to have a dark mode active to register their migraines.
—
Comment, give your feedback and come back soon to follow me on my next UX Case posts.