Foodi
Deliverables
App design
Motion graphic
Logo design
Tools
Illustrator
Figma
Photoshop
Miro
After Effects
Raising food awareness one ingredient at a time
Foodi is an ingredients scanner that aims to raise food awareness. By scanning or searching, users can learn about the details of the ingredients inside the food consumed daily, along with alerts about possible common allergens. Based on users’ feedback, we have added a new feature where users can now flag and create their customized allergen list.
I was the sole designer of this project, redesigning the full interface of the app to provide a better user experience for 400 daily users. I also worked closely with the app developer to ensure designs are feasible.
Navigation
The current design does not have a navigation bar. Instead, users would have to go back to the main menu by clicking “Home” to access the other features, which adds one extra step to the navigation. I’ve decided to remove the main menu and nest all the features under a navigation bar (like many app designs).
Information architecture of the app. I've also created a low-fidelity user flow to help with the high-fidelity wireframes later on.
Originally, the ingredient description was under an accordion menu. Since there were already a few other functions on this page, adding the new function of flagging personal allergens would lead to many options and increase the cognitive load. Hence I created another page for the ingredient description.
Adding personal allergens in the form of folders
When it comes to creating a personalized experience, the first thing that came to mind was to add an account/login system to the app. However, we wanted the app to be simple and convenient, which is what attracted users in the first place. Instead of using the account approach, we decided to let users store their allergens in the form of folders. Users can name the folder as their personal allergens. This flexibility also allows the option to store the allergens of other members as some of the users are parents and would need a place to store their children’s allergens.
When users add the ingredient to a custom allergen folder, the app provides an allergen alert in the ingredient description page.
Users can also toggle app alerts for the whole allergen folder.
Visual style
A warmer and healthy-looking green is used for the main colour. Yellow is used for the colour of folders to match well with the green.
Feasibility
In the first iteration, after chatting with other designers and the app developer for feedback, I learned that the design of the cards had too much padding, which created a lot of inefficient space. Furthermore, some designs were not executable in code or not optimal. Having images as an overlay in each section would slow down the loading speed of the app. Hence I simplified the design. I moved away from the green background as having a white background allows users to focus on the cards and CTAs more.
Results
With the redesign and the new feature, users can not only learn more about the specific ingredient but can also tell right away if they are allergic to that ingredient, allowing them to make their purchase decision right away. After the new update, the user base has increase by around 100. I also created a motion graphic to promote the new update.
Reflection and next steps
Through working with the developer, I learned to design with feasibility in mind, always questioning whether or not the design can be executable.
Next steps would be to conduct user testing on the app to identify first-hand problems and insights from our users. We can also consider adding a feature for dietary restrictions and making the app more accessible.
