Cafe   Menu   Experience

Date

March 2018

Focus

Branding, Creating a Visual System, Mobile and TV Displays

Type

Interview Design Challenge

Date

March 2018

Focus

Branding, Creating a Visual System, Mobile and TV Displays

Type

Interview Design Challenge

Brainstorming

I started off by brainstorming what features the mobile app should have and did some very rough sketches for how the screens might look.



General thoughts


Mobile sketch


TV sketch


Wireframing

I then moved on to making wireframes for each set of screens.



Mobile




TV



The   Brand   and   Visual   System

I branded the cafe, Shape Cafe.
It has a clean and simple brand that is designed to be welcoming through its bright and colorful layouts.






Color

I picked colors that were bright and playful, but not too bold or outstanding that it would detract from any content.




Typography

I selected Graphik for the main header texts, and Proxima Nova for the menu item titles and body text.

Graphik is really clean and its heavier weights carry a boldness that fits headers well while maintaining its elegance.
Proxima Nova is my current favorite font. I picked it mainly for its large x-height which might help readability for people looking at the TV screens.




Spacing




Shapes

Shape Cafe uses the following six shapes in different colors, sizes, and orientations to reinforce its brand.




Imagery

On mobile, images should show the item in full while being shot on a relatively dark background to avoid contrast issues.

On the TV, images should have a transparent background and be overlaid on a shape.


High   Fidelity   Mockups

Here are the final screens for Shape Cafe's mobile app and TV menus.

The shapes on these screens will be hovering very slightly (as seen on the left).
On the TV screens, the shapes can float over to the next screen which provides a sense of continuity between them.



Mobile

Icon credit to Freepik on Flaticon.com






TV





Iterations

Here are some iterations I went thorugh for the mobile screens


Home Screen

My first few iterations stuck closely to my wireframes, but I later realized that having the menu categories be the main focus would be better than having a featured item at the top.

So I replaced the featured item with a welcome message which introduces the customer to the new cafe and reinforces the brand right away.





Sandwich List Screen

I had an issue where the items in the list of sandwiches didn't appear to be clickable, so I had to move the price around and add a chevron.

I later decided to just have the price be smaller and inline with the name of the sandwich.




TV Screens


At first, I had really big, full images on the TV screens. However, I realized that it didn't really mesh with brand that I had envisioned for the cafe so I changed the images to have transparent backgrounds and overlaid them on shapes.


Retrospect Internship at Prudential