Contract Work · 2015

Gem

A mobile app for users to rate and recommend local restaurants to their friends — and the brand identity and concept screens I built for it.

Role
Brand & product designer
Scope
Identity, concept screens, print
Platform
iOS / Android
Tools
Illustrator, Photoshop, Sketch
01

Overview

The client needed help designing a logo, brand assets, and some concept screens to be handed off to developers. Key features of the app include allowing users to rate local restaurants, view activity of their friends, and explore nearby restaurants.

Two Gem app screens — a sign-up screen with the strawberry-shaped logo over a blurred restaurant interior, and a Reviews screen for Metro Bakery with star-rated comments from users
02

Branding

I wanted to give the logo a modern and recognizable appearance while maintaining relevancy to the idea of a "dining/food app". The bright and colorful logo, clean typography, and strawberry-shaped design communicates such ideas.

Animated build of the Gem logo — a gradient pink-to-orange strawberry-shaped diamond with a bite taken out of one corner and two mint-green leaves, with the lowercase 'gem' wordmark animating in below
Animated construction of the Gem logo's diamond silhouette, showing the geometric guide circles and line work used to draw the strawberry-shaped mark
Gem brand color swatch card in bright magenta-pink Gem brand color swatch card in warm orange Two Gem business cards on an orange background — the front card with the strawberry logo and wordmark, the back card with a founder's name and contact details
Gem display typography specimen — Comfortaa Light, showing Aa and Zz Gem body typography specimen — Avenir Light, showing Aa and Zz
03

Initial Concepts

Sketching always helps with rapid prototyping for both the logo and screen designs. This helps map out key interactions such as tapping, swiping, and navigating.

Hand-drawn sketch page exploring diamond and gem-shaped logo concepts, with notes on 'hidden gems' and 'location based' ideas Hand-drawn wireframe sketches for the app's card-based news feed and profile page, annotated with notes on swipe gestures and tap interactions
04

Designs

The overall structure of the app is simple: a news feed of recent activity from friends (displayed as a simple list with key meta-data), a list of saved/interested locations that the user wishes to explore in their own time, and a list of nearby locations. Key interactions include tapping to reveal more information about the restaurant, including comments and ratings, and swiping on cards to dismiss or add to the "interested" list.

Two Gem app screens — a News feed listing friends' activity at Laos Cafe and Metro Bakery, and a Create a Post screen for adding a location, photo, and comment

The strawberry-shaped mark isn't just a logo — its color and silhouette carry through the app itself, from the icon on the sign-up screen to the cards in the news feed, tying every screen back to the idea of food and discovery.

Design rationale

Next Project

Pickr Uppr

View project