A2 CAFE Redesign

OVERVIEW

In this project, I am designing the food ordering, pick up and the menu experience for the new center’s cafe of my school, including today’s menu, ingredients, food allergens, and prices. I defined a brand and visual system to use across a mobile app and the TV screens inside the cafe. This experience creates the most convenient way to order food inside the cafe or order it only and pick up in store. The software I used for this project are Adobe Photoshop (image editing), Adobe Illustrator (design logo, icons), Sketch (prototyping), Flinto (prototyping).

Branding and menu design

settig.jpg

Food ordering application design

image.jpg

Original Cafe menu

google ex.001.jpeg

PROBLEMS

  • The information on the Menu is not clear and cannot be updated on time.

  • The most common problem of a cafe at College is the rush hour order. Is during the 5 -25 mins before class, school shuttle drop off, and during the break of the class.

  • There is only one access to pay. Some products don't need to order with menus. People who only buy that quick product will waste their time and slow the whole process.

google ex.002.jpeg

Interview of the users

I conducted user interviews to drive the planning phase. These are the key findings that defined the initial version of the product.

google ex1.001.jpeg

user needs

IMG_0322.JPG
  • Get food faster

  • Clear information on the menu

  • Communicated with the cashier efficiently and clearly

  • Order advance

 

 

THE Design CHALLENGE

  • Create and scale an online order experience to help people avoid make tons of decision and get their food and drink easily.

  • Design the flow of order in store and orders online.

  • Deliver detailed information fast and direct.

Research on other menu design

In order to stand out in the current market, I did visual competitive analysis of competitors, like Pyramids cafe, Starbucks, Dunkin' Donuts, and other local cafes. The visual analysis includes their color palette, font choices, photography, iconography used, etc.
After comparing, I explored the tone and personality of A2 cafe. A2 cafe supposed to give people sense of qualified, organic, and simplicity.

Screen Shot 2018-03-01 at 03.53.45.png

Insights

What kind of menu and order experience will solve that problems? 

 
  • To design multiple shopping lines to disperse the people flow during the rush time.

  • To design a menu that delivers Information clear and Direct.

  • To design a mobile app that is easy to use and tracking.

User Journey

I create multiple customer lines for the new cafe order experience to improve the efficiency and share the customer flow during the rush hour. 

Screen Shot 2018-05-04 at 13.10.04.png

There are two user flows, one with a mobile app; one is in store. With the mobile app, people can order food online, pay with the credit card information in the app and pick up at a store when it's ready. The user flow in the store is separate to two lines; one is ordering with cafe staff and pay in the counter, another is buying already made products and pay at the fast checkout counter.

User flow with the mobile app

google exx.001.jpeg

      User flow in store

 
google exx.002.jpeg

Logo

After brainstorming from a different perspective, I started to sketch out possible logos. Then I narrowed to five logos and moved to digital. Played with color, did a lock-up and so on, finally chose one. The final logo has combined the logo of CCA and the name of A2 cafe. It is simple, abstract, and stands out in all forms. It represents fresh food we providing to CCA students.

CCA_Header_081315_945x350.jpg
Screen Shot 2018-02-28 at 07.06.03.png
google ex.001.jpeg
google ex.002.jpeg

Pattern

I deconstruct the geometry elements of the logo to make the pattern in order to bring this brand a sense of playful and enrich the visual effect.

uI-05.png
google ex.004.jpeg
2.jpg

TV MENU

uI-01.png
settig.jpg

The MOBILE APPLICATION

uI-04.png

WIREFRAME

23.001.jpeg
Screen Shot 2018-03-01 at 11.24.13.png
google ex2.001.jpeg
Screen Shot 2018-03-01 at 14.36.03.png

UI Design


Sign IN with email or student id and editing profile

MENU3.gif
uI copy-03.png
 
 

View Menu, select and customize your food

uI copy-09.png
MENU1.gif
 
 
 

order for mutiple things in the same time and customized it

Pick up when its ready

MENU 3.gif
uI-03 copy 2.png
uI-03 copy.png