WTF - iOS App Mockup
pROJECT dETAILS
Working with fellow BMC students Julia Devorak and Shawn Liu, we designed and created a prototype iOS application geared towards busy university students and young professionals (or those with a sad fridge). WTF, or What’s in The Fridge, is a recipe builder that allows users to select the ingredients they have on hand and search the web for recipes that utilize just those ingredients. Users can then rate, share, and remix their own creations, inspiring others to experiment with cooking and avoid eating out. Initial design and wireframes were made using InVision, a low-fidelity digital prototype was made in Proto.io, and mockups were made in Adobe Illustrator and Photoshop.
Audience
University students
Young professionals
Client
Dr. Derek Ng
Completed
Medium
InVision
Proto.io
Adobe Illustrator
Adobe Photoshop
FORMAT
Screen (digital)
November 2018
ProCESS Work
Initial Research and Scope Document
This project challenged us to work as a small group and come up with an original app idea within two weeks. The app didn’t need to relate to biomedical communication concepts; however, it did need to serve a clear purpose. To do this, we ideated as a team to come up with rough ideas and potential options and settled on a recipe builder (an idea that stemmed from our own struggles maintaining healthy eating habits as graduate students). After settling on our core concept, we established the main goals and audience of the app before conducting a small-scale media-audit. We assessed apps with a similar goal or function to determine what was available and how they succeeded and failed when it came to overall design and functionality. We took advantage of InVision’s Mood Boards to expedite our process, creating an area where we could add and compare designs, colour palettes, and other examples of recipe apps. After completing this initial research, Julia compiled a scope document covering the overall objectives and target audience for the app, including short user personas and a list of functional requirements to inform our continued design thinking.
Creating Wireframe Mockups
After finishing our scope document, the next step was to create basic wireframes, which was one of my primary responsibilities for the project. These wireframes were iteratively designed using the InVision Freehand tool, and provided an example of our user interface and established a flow for how users would work their way through the app. Using the InVision tool allowed Juli and Shawn to edit my work collaboratively, commenting on and marking up designs as needed to ensure that the included functions met those set out in our scope document.
pitching our App with Prototypes and Hi-Fi Mockups
The last step of our project was to pitch the idea to our class and professor. To this end, we created a presentation that covered the main aspects of our scope document; demoed a live, low-fidelity prototype; and designed a series of high-fidelity mockups to illustrate what the final product might look like. The prototype shown was created by Shawn using Proto.io, a prototyping software similar to InVision; however, our team made the switch as we wanted experience with prototyping tools. The goal was to create a low-fidelity prototype that acted as a proof-of-concept, demonstrating how the core functions of the app would work. The high-fidelity mockups served as a polished representation of what the final product could look like, and were made using Adobe Illustrator and slotted into free-for-use Adobe Photoshop templates for added flair.
