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, Strategy

Interested?

Try Uber Eats

Plating with Uber Eats' Ceramic

Today, Uber Eats is the fastest growing delivery service, with a $2.8 trillion addressable market, making up 22% of the company’s total bookings in 2019. When Uber Eats started, it was merely an extra feature within the main Rider app. But, in 2015, with surging demand, the Uber team launched Eats as a standalone product. Now focused on growth into new markets and growing from 3% to nearly 25% of Uber's revenue, the internal design team hasn't had 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.

Establishing one source of design truth

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.

Meaningful experiences through motion

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.

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.

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.

Shaun Gardner

Principal Designer

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.

Meg Hawes

VP of Client Services

next project

Slack