Mobile Application Design — Breakie App

David
David
Jul 25, 2017 · 3 min read

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.

Low fidelity prototype

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.

David

Written by

David

A cheerful Digital Marketer UX/UI designer based in France

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade