Feed Your Brain

Lauren Granato, Sole Designer

CareerFoundry UI Course

Feed Your Brain is a native iOS app designed for people who suffer from Chronic and Vestibular Migraine. People who suffer from Migraine are recommended to follow a migraine specific diet, so that they can reduce the number of headache days they have.

 

When first looking at everything on the list of foods to not eat, it is very overwhelming. However, this app is here to save the day! It helps people find and organize recipes that are considered "head-safe." Users can upload new recipes or modify ones that are already on the app.

 

Since "migraine brain" sometimes makes it difficult to remember things, the app also has a place where you can make lists and add ingredients to you shopping list right from the recipe. 

Objective

The objective of this app is to have a central location for recipes that are considered headsafe for migraine sufferers. The app aims to help alleviate frustrations from migraine sufferers about not knowing a variety of recipes to eat. The goal of Feed Your Brain is to have a place for people to easily get recipes based on the specific migraine diet that they are following. By having everything in one location, users will feel less stressed about food. 

Design Process

Feed Your Brain was developed using a variety of tools. The UI Design course from CareerFoundry guided me through many steps including interviews for User Research. Draw.io was used for the User Flows portion of the project. I also used Adobe Illustrator to complete User Personas and Mood Boards. Pencil and paper were used for low fidelity wireframes. The mid- to high- fidelity wireframes were created using Sketch. Invision was used to create the final prototype. 

Mood Board 1
Mood Board 2.jpg

Wireframes

Low Fidelity Wireframes: Rough ideas for all screens drawn out with pencil and paper. 

Mid-Fidelity Wireframes: Initial designs brought into digital form using Sketch

High Fidelity Wireframes: Details such as where photos will go, text and other layout pieces ironed out and put into final stages before adding color and imagery. 

Throughout this process I tested these wireframes on other users. I was able to narrow down some screens, add some screens and change several initial layouts so that the flow works better for users. I used A/B Testing for some feedback on different variations of screens. I also created a prototype so users could give me feedback on the position of items on the page. 

FYB_Mid-fidelity_Wireframes
FYB_Hi-fidelity_Wireframes

Challenges and Learnings

I encountered a few challenges when creating Feed Your Brain.

  • The target audience is very wide. There are no specifics for gender, age or location for the customer base. Migraine sufferers make up about 3.5% of the world population. Therefore, that percentage was my target market. I limited myself to the USA and UK for the current market so that I could narrow down who I would get interview responses from. 

  • I was not able to sit down face to face with the people I was interviewing for user research because they were spread out across the world. I used the group that I have a connection with on Facebook in order to conduct my interviews.

  • Because my target market is so wide, I also had some challenges in creating the user personas because there are few similarities between the variety of people who have migraines.

  • Another challenge was finding the right color palette. Migraines are represented by a purple ribbon so I knew I wanted the color palette to work with purple. However, most food apps are dominantly reds, oranges, yellows and browns because those colors activate salivary glands, so I had to figure out the best color palette for both.