Mobile Application Design — Breakie App
The project given by Red Academy Vancouver, is to prototype a Mobile Application for breakfast seekers. This article covers the stages I followed from the inception design to the prototyping stage for an App named “Breakie”.
The Mobile Application brief
With lots of best breakfast restaurants disseminated around the city of Vancouver, the app Breakie allows “breakfast seekers” to choose among a highly curated list of high quality restaurants around them. Thanks to a “breakie passport” users are able to collect e-stamps until a free breakfast.
Mood board
The adjectives that come to mind for a breakfast application are “Social” and “Warm”.
The primary audience of the app is composed of the age range of the 19–30 year-old that includes the student and young professional segments (the version of the App dedicated to the student users is described by my teammate Youna Cho in this article).
The young professional users are likely family and togetherness oriented. The breakfast in a restaurant is a way to break the routine and an instant to reconnect the family around the table. The visual language puts forward brown colour, wood, cream, coffee and buttery.

Style guide
The style guide highlights the brand overview, the range of colours used for the elements, the typography, the buttons, variations of the logo are displayed whereas iconography eases the navigation for instance in the Search view.

Low fidelity prototype
A wireframe of the mobile app is created so as to produce a representation of a user interface. All the visual design and branding elements in the style guide take place in this wireframe in order to define the hierarchy based on user needs.

High fidelity prototype
The Breakie logo is displayed in the forefront of the login page and includes the wooden texture in background. The icons are placed in the search page for a better understanding of the filters such as “Best Breakie”, “My Passport”, “Setting”, “This Month” and “Ask a Friend Out”. The restaurant information is broken down into the location, a brief description of the restaurant and the chef’s vision. The call to action “Get stamped” leads to “My passport” view when a user want to receive e-stamp from the breakfast restaurant.

