It all started when I woke up with a headache.
I get headaches every once in awhile and they usually vary from a mild throbbing to a heavy pounding in my head. The first would be mildly uncomfortable but the latter would render me completely useless for the day.
On that particular day, it was a moderately painful headache that would hit me every time I shifted my body. That got me thinking about tracking my headaches. I googled for headache trackers but they were scarce and the best one out there had a really colourful UI that made my headache even worse. So, I decided to embark on this journey to create a mockup of a headache tracking app.
The target audience would be for anyone who has frequent headaches and would like to track their pain and to see if there are any potential triggers that could be causing this headache or what kind of medication/solution helped to solve it. This could also help their doctors understand their headaches better and be be better able to diagnose them.
As this was a personal project, I worked on the entire project alone. My role in this project was the UI and UX Designer.
Where do I begin?
Things to track
Firstly, I brainstormed about the things that a user would want to track when they were having a headache. A quick google search led me to many available headache diaries online. This information was usually shown to their personal doctor to help the doctors diagnose them better.
Things that people generally tracked when they had a headache include:
- How long did the headache last?
- The type of pain (E.g. Throbbing, Pounding, Intermittent)
- Where the headache is located on your head
- The scale of pain
- Medication and treatment taken
- What helped?
- What did not help?
- Notes
These are the general things that people wrote in their headache diaries and I chose to include most of them in the app.
User Journey
The next step I took was to map out the user’s steps to see how I could help them to simply their journey to reduce the stress they would have when navigating the app with a headache. As someone who get headaches pretty often, it is truly a feat to use my phone when I am having cluster headache throbbing in my eye.
I mapped out the most important journey for this app, which is to record the attack when a user was having a headache. I purposely chose to leave out some of the trackers that I mentioned in the previous section to simplify the journey. However, after the headache subsides, users are welcome to come back to the report and record any additional findings they had for their attack.
Sketches
I started sketching out low fidelity wireframes to iterate through many design options. I wanted to brainstorm various layouts to see which would work best for this app.
I chose to sketch out the most important journey that a user would take while using this app, which is to record their attack.
While sketching, I kept in mind that the buttons and fonts in the app had to be kept simple to help the user navigate through the app while having an attack. Everything should be simplified and it would be best to have only one to two options per screen.
I made around three different versions of wireframes as I kept trying to simplify it further.
As the Architect Ludwig Mies van der Rohe once said, “Less is more”.
Wireframes
At the beginning of my design process, I created wireframes for testing purposes. This was useful as it helped me to see how the design would look like within the app. I was able to see how many options I could put within a screen and decide some design parameters.
I considered increasing the size of the fonts and placeholders so as to reduce the stress it would have on the users of the app. It would provide for an ease of use. This can be seen in the wireframe example on the right. I used a maximum of only two options per page.
I used the Sketch App to create these wireframes.
UI Design
I went with a light, minimalistic design for an ease of use. I chose green to be the accent colour after doing some research and finding that green light could help to reduce headaches.
I only went with one accent colour, with varying hues, as too many colours could cause the user’s headache to worsen. For the font, I went with Open Sans as it is a simple and easily readable font.
The theme for this app was simplicity and ease of use and I tried to make sure that the UI would match that theme.
User Testing
Before I ended this project, I decided to do some user testing to reveal possible usability issues.
Lucky for me, or not, I have a quite a few friends that get migraines pretty often and I was able to get around 5 of them to test out this app and let me know their thoughts.
All of them felt that the app was easy to use and simple due to the fewer buttons and options it had. This would be especially useful when they were having an attack.
One of the aspects that they suggested was having a dark mode as it would be more soothing when the user is using the app at night or in the dark. Light is also one of the triggers when someone is having a migraine. Another suggestion for the UI was to have different options for accent colours as some people might be more triggered by certain colours.
They also suggested a few other tracking options including the activity the user was doing before the attack hit, the food they ate, where they were at that time etc.
For further development of this app, these options could be programmed to be added in as additional options. After the headache or migraine has subsided, the user would be able to key in the other information they had about the headache and be able to track their patterns better.
Main Takeaways
This was my first ever UI/UX Design project and I went into it not really knowing anything at all. With a background in Architecture, I already understood the principles of design thinking and creating products with users in mind.
However, this was my first time trying to do it on an online platform and in an app. I had to learn Sketch from scratch (wow that rhymed) and it was truly a fun experience. I had fun brainstorming for users and understanding user flows through an app, instead of through spaces.
Through this project, I have come to realise that UX Design and Architecture are more similar than I thought. And the skills that I have obtained while doing this project will definitely help me immensely in the projects I embark on in the future.
