Branding, Creating a Visual System, Mobile and TV Displays
Interview Design Challenge
I started off by brainstorming what features the mobile app should have and did some very rough sketches for how the screens might look.
I then moved on to making wireframes for each set of screens.
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.
I picked colors that were bright and playful, but not too bold or outstanding that it would detract from any content.
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.
Shape Cafe uses the following six shapes in different colors, sizes, and orientations to reinforce its brand.
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.
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.
Here are some iterations I went thorugh for the mobile screens
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.
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.