A Foodie’s Essential — ‘Breakie’ Mobile App UI Design Case Study

Youna Choi
Jul 24, 2017 · 5 min read

INTRO

Vancouver is known for being foodie heaven, and recently it’s been rated among the World’s Best Foodie Cities in the annual Conde Naste Reader’s choice awards. Currently there are no mobile applications that offer a highly curated selection of the best breakfast spots in town. Applications like Urban Spoon or Yelp can be overwhelming as they list ALL the restaurants in town.

Breakie is an app that helps you to find the hottest breakfast spots in town from a highly curated selection. The app allows you to seamlessly invite friends out for breakfast, promoting a sense of connectedness and community. As well, the app allows you to collect stamps from restaurants that you visit, from which you can earn rewards (e.g. a free breakfast from a restaurant of your choice) — encouraging people to try out new experiences and feel the pulse of their city.

Project Brief

To create an engaging and highly impactful UI library for ‘Breakie’, given pre-existing wireframes from the UX team.

Client

Student Project (RED Academy)

Deliverables

Logo
Moodboard
Style Guide / UI Library

Tools Used

Sketch
Adobe Photoshop
Invision Prototype

Role

UI Designer

PROCESS

Target User

The target audience that the app is aiming to reach are males and females between the age of 19–30 (students and young professionals). The typical user is someone who is a fun, social, friendly, loves going out, and obviously a foodie.

From the UX team, I was given the following mid-fidelity wireframes:

Mid-Fidelity Wireframes

Ideation

The first step was to clarify and understand the ‘Why’ i.e. purpose of the app. Breakie is all about bringing people together — it aims to promote a sense of connection through food and community among foodies and the restaurant scene of Vancouver.

I conducted a few interviews with people that fit the target demographic. I asked questions specific to visual design — e.g. how would the user want to feel while engaging with such an app? What colours come to mind and why? The main feedback I received from my research was that users would want to feel motivated to socialize and eat, therefore they would lean towards an app that feels fun, engaging, energizing, adventurous and dynamic.

Design Inception

From here, I transitioned into brainstorming the visual language elements that would fit Breakie’s character. I chose colours that would both energeize and stimulate appetite in the users, taking inspiration from popular breakfast foods such as breakfast burritos, omelettes, and citrus. e.g. yolk yellows and red-oranges that will happily reminisce fresh tomatoes. Shapes would have a nice balance of round and crisp lines to keep the feel of the app fun, friendly and engaging for the user. I felt that using a pattern of icons consisting of breakfast foods would be fun to introduce where appropriate to give a sense of fullness or satiety. Inspired by these elements I then went on to put together a mood board.

Moodboard

Next, I moved onto creating a style tile based on this moodboard to showcase the overall feel and proposed colour palette of the app. The logo design was playfully crafted by using a sunny-side up egg and a fork to replace the ‘i’ in Breakie. This gives a visual representation to the user that the app is unmistakably related to food and dining even if the user knows nothing about the app.

Style Tile

The typeface I chose was Europa Bold and Regular, as this type family is incredibly easy to read, friendly, and versatile. It is also simple and functional, and offers a nice contrast from the cursive and stylized typeface that was used for the logo.

The colours were largely based on yellows and orange reds, a deconstruction of the palettes most often found in breakfast foods — think omelettes, bacon and eggs, breakfast burritos, hashbrowns, etc.

As the colours of the interface are on the bolder side, in order to prevent visual clash with any photography used on the main “Best Breakies” page (the screen where the user peruses through a list of restaurants) I decided to overlay these images with an opaque cover and instead emphasize the content with text. This preserves visual balance and harmony, and motivates the user to interact and “reveal” what’s beneath in order to explore more about each featured restaurant.

The iconography used for the menu options were minimal and easy to interpret. The icons used as stamps were the same ones used for the pattern background in order to promote a sense of familiarity and in the literal sense, pattern recognition.

This further led to a more refined style guide/ UI library detailing the visual elements of the app — colour palettes, logo variations, typeface and font size, UI elements e.g. buttons, forms, as well as image overlays.

Style Guide

The style guide was then applied to the mid-fidelity wireframes to present the following screens:

Hi-Fidelity Screens

Interact with the prototype on InVision HERE!

Meanwhile, writing this case study has given me serious munchies so I will be off to find some Huevos Rancheros and freshly squeezed orange juice. Happy dining!

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