Katherine Tachibana

Versatile & Playful UI Alchemist | ISTP-A

Breakie – UI Library


Breakie is an app to help the locals and tourists to browse through a curated selection of breakfast/brunch restaurants in Vancouver. This was a solo and the second project at Red Academy.

I was assigned to create an engaging, impactful and well-designed UI Library for this app and a high fidelity prototype.


Project: UI Library for an Android app

Date: 2018

Tools: Hand-drawings, Photoshop, Sketch, InVision, and Google Slides

Target Device: iPhone

Timeline: 1 week

Research - Find a key

I was given primary keywords for the app which were foodies, weekend, brunch, sunny side up, mimosas and so on. I started to research Vancouver’s food scene and the millennials.  I focused on following key points: 

  • Food trends in Vancouver
  • Popular restaurants among the millennials
  • Google keyword search statistics about breakfast restaurants in Vancouver
  • The characteristics of the millennials
  • The millennials’ typical lifestyle

I have learnt the following points from the research:

  • Vancouver is the west coast foodie heaven in Canada.
  • The coffee shops/breakfast restaurants that have good reputations are really scattered around downtown Vancouver. 
  • Vancouver leans toward lighter, seafood-focused fare. It’s a healthier lifestyle, which extends to the food.
  • Crossover is another right keyword. Not only East meets West, but also local with a cultural mash-up of cuisines, e.g. Japanese-Italian cuisine, Aburi-style sushi, native spot prawns, elk salami with juniper berries, or canned sea lion — anything.
  • 90% of the millennials use smartphones.
  • They are exercising more, eating healthier, smoking less, and getting a better education.
  • 50% of them search local businesses on their smartphones.
  • 75% of them choose experience over a product.
  • They are rebel.

The main pain point was that it would be hard to explore the hidden-gem restaurants in Vancouver especially when you are a tourist.

Ideation - Unlock

In this phase, I set two art directions. 

The adjectives of the theme Bohemian were cosy and comfortable yet hip giving pleasant and welcoming feelings. The theme Rebel conveyed the millennials’ mentality – Independent and free.

From a UI perspective, I wanted to create an atypical design on the theme Rebel and a fresh and pleasant design by using bright colours on the theme Bohemian.

The two images shown in the section above (Theme Bohemian) and as a background in this section (Theme Rebel) are the mood boards.

Design - Cast a spell

The image shown left is a high fidelity prototype for the theme Rebel and the one shown below is for the theme Bohemian.

The requirement was to design only one prototype; however, I created two for both art directions to experiment completely different outcomes from the same task.

Key Deliverables:

  • 1 filled out design inception worksheet 
  • 2 mood boards
  • 2 style tile documents  
  • 2 style guide
  • Minimum of 4 high fidelity screens of the chosen art direction
  • Properly organised design files in Sketch
  • Organised project folder
  • A  ten-minute presentation 

Iteration - Tweak

Tweaks to be done:

  • Re-design logos
  • Fix kerning
Scroll Up