iOS Application Prototype

What's in the Fridge:

What's in the Fridge (WTF) is a prototype iOS application created as part of a team project with Alex Young and Shawn Liu in the Biomedical Communications program. This health-related app aims to help users (busy university students and young professionals)  figure out what dishes they can make with the ingredients they current have in their fridge, by searching the web for recipes based on ingredients selected by the user. It also provides a platform for users to share their experiences making recipes and inspire others to try new recipes, to experiment with cooking, and to avoid eating out when there's food at home. 

Clients: Prof. Derek Ng

Audience: university students, young professionals

Format: iOS application

Media: Proto.io, Adobe Illustrator, Adobe Photoshop

Date: November 2018

fridge screen mockup.jpg
login page mockup.jpg
recipe screen mockup.jpg

Process work

Conceptualization & Scoping

WTF was conceived as a tool to help the many people who experience difficulties with what to cook for three meals every day, due to workload in their jobs or at school - a situation that we, as students at the time, were all too familiar with!  Although ordering take out can save time for busy people, it is costly compared to cooking at home, and long-term consumption of prepared foods may not be the healthiest choice. As team, we decided there was need for an app to help people figure out what to cook using the existing ingredients in their fridges, thereby saving money and potentially promoting healthier living.

 

With this concept in mind,  we began scoping our project, including identifying who would use the app (target audience), why they would use such an app (goals & motivations), and what other tools exist to achieve similar goals (competitive assessment). We then developed user personas and drafted short context scenarios to better understand the needs and goals of the app's end-users and how they might use the tool to achieve their goals. We documented all of this in our Scope Document, and used this information to guide our initial design of the tool's functionalities and behaviours.

 

MSC2008H-Primary-Audience.png
MSC2008H-User-Persona1.png
MSC2008H-User-Persona2.png
MSC2008H-User-Persona3.png
MSC2008H-Primary-Functions1.png
MSC2008H-Primary-Functions2.png
Wireframing & Visual Direction

Our Scope Document provided a basis upon which we began mapping the structure and flow of the app, as well as how the app pages would appear. We captured these ideas in low-fidelity wireframes.

 

At the same time, we began exploring visual directions for the app. We used mood boards to brainstorm around colour palettes, icon and logo styles, and UI designs.

 

The wireframes provided the basis for a subsequent low-fidelity prototype, and our visual directions brainstorm informed the subsequent creation of high-fidelity mock-ups.
 

inVision freehand.gif

Content mapping

1. WTF-LoginPage.PNG
9. WTF-RecipeList1.PNG
2. WTF-NewUserPage.PNG
10. WTF-FilterMenu.PNG
3. WTF-SearchPage1.PNG
13. WTF-RecipeFavourite.PNG
7. WTF-Menu.PNG
15. WTF-RecipeSteps3.PNG
6. WTF-SearchPage4.PNG
8. WTF-AccountSettings.PNG

Sample wireframes

inVision board.gif

Visual directions mood board

Low-Fidelity Prototype &
High-Fidelity Mock-Ups

The final step of this project was to create a proof-of-concept (low-fidelity) prototype of our app to demonstrate the tool's core functionalities, along with high-fidelity mock-ups representing how the final product might appear. We used these to pitch our app idea to our class and professor and gain feedback on potential improvements and directions forward.

Low fidelity prototype coming soon!

MSC2008-WTF-Screen1Mockup-2018.jpg
MSC2008-WTF-Screen2Mockup-2018.jpg
MSC2008-WTF-Screen3Mockup-2018.jpg