Planet
header phone
background
preview
phone
phone
background
day one
day two
blue gradient
blue gradient
white gradient
black gradient
black gradient
trees
mystery
free will
phone
phone
phone
phone
phone
phone
phone
phonephone
phone
phone
phone
Lemon
Flowers
Neon
Pinky Sky
Stairs
Chair
Background
Block
Can
Logo
Plant
Gif
Smartphone
Smartphone
phone
cloud
cover image

Your favorite food, delivered

How we helped Uber Eats define its global design and motion framework

Expertise
Design and Interaction
Platforms
iOS, Android and Web
Deliverables
UI, UX and Strategy

Plating with Uber Eats' Ceramic

Today Uber Eats is the fastest growing delivery service in the US, making up 10% of the company’s total bookings. When Uber Eats started, it was merely an extra feature within the main Rider app. But, in 2015, with surging demand for Eats, the Uber team launched Eats as a standalone service and app. Focused on growth into new markets, the internal design team didn’t have time to slow down.

Having successfully helped with Uber's main Rider app, our team was asked to help bring Eats its own design system while staying true to the Uber brand. Their ask: build on their existing UI kit, Ceramic, to elevate and differentiate the Eats brand.

Plating
Tacos
App

Establishing one source of design truth

Screen
Swatches Black
Swatches White
Swatches Green
Icons
Typeface
Typeface

We went back to the basics by first establishing consistency across Ceramic then building upon the foundations of the product to create a memorable experience for the user. With a UI kit and design system built for a large dynamic team, we included Sketch symbols, text styles, motion guidelines, and color palette to allow designers to work faster while maintaining strong consistency.

A universal template

Feeding people around the world is no easy feat. Uber Eats must translate across both digital platforms and international borders. Ceramic is like a plate; one that works with any type of cuisine, feels appropriate for every dish, and never overshadows the food. This is a principle we carried through to the motion framework.

App
Website

Meaningful experiences through motion

Frameworks

The navigation framework we worked on with the Uber team visualizes how people move through the app. We used this to make motion meaningful and intuitive. Interactions on the same level, like menu to dish item in the figure above, have subtle animations, while we added more delight for movements between levels.

Garnish for special moments

Walking into a restaurant is always a special moment. You enter into the space and immerse yourself into the aroma, the atmosphere, and the people. With conceptual animation garnishes, tapping into a restaurant in Uber Eats can share that special feel.

Visual order tracking

To celebrate that your food is on its way, there is garnish to take you from the purchase screen to the visual order tracking. Now you can follow your meal from diner to doorstep, easing all concerns about when your order will arrive.

Collaborating across 3 cities

We really enjoyed working with the Uber team, going back and forth until we got the design system to a place we were both proud of. It was a truly collaborative effort—one that took place across 3 countries and multiple continents. And it’s always fun to see our work out in the wild so quickly.

Map of San Francisco
Country Flag
San Francisco

MetaLab is a talented group that proved a natural fit to supercharge our design team. Their attitude and work is top notch, with a focus on execution and impact.

Quotations
Avatar

Didier Hilhorst

Director, Product Design, Uber

We cared very much about getting this project right so it was great to collaborate with the Uber design team–even from here in South Africa.

Quotations
Avatar

Shaun Gardner

Principal Designer
Map of Durban
Country Flag
Durban
Map of Victoria
Country Flag
Victoria

It was great to see the two teams working together. We’re both fast-moving and focused on getting sh&^t done which allowed us to do some incredible work in a short period of time.

Quotations
Avatar

Meg Hawes

VP of Client Services
Have a project for us?
We make
interfaces.