Back

UberEats

Role

Product design

Year

2015-2016

After testing out "Uber Fresh" as a concept to select markets where pre-made meals were put into cars and requested from the Uber app, we quickly learned that people wanted selection.

Pivoting the business

After making the decision to offer more choice and taking the food delivery experience out of the Rider app and into its own app, the team had three months to design and develop the iOS and Android Apps. This required us to really streamline the design process and all of the assets so that the engineers were able to execute.

On Nov of 2015, we launched "Agora," our marketplace app with the first city being Toronto. Since then, the Eats business has grown significantly surpassing expectations and profitability of the Ridesharing arm of the company.

We still had an "Instant delivery" category in the first version of the new app. This section provided pre-made meals that would be able to be delivered to a customer in under 10 minutes. This later got sunsetted due to the costs of all the logistics and waste.

Cases are a central part for a medical professionals day to day tasks. Siilo has a unique opportunity where we can help fill the gaps where the current medical

industry falls short, by creating a system for cases that is easily shared within and

beyond hospital walls.

Over and over, again we heard that selection and choice were what our users wanted most.

Choice. Lead with the food

Lead with the food

Providing choice proved to be beneficial to the company, but with more choice comes the paradox of choice. We first launched with about 100 restaurants in Toronto, but we had to prepare for the situation where we would have 1000's of restaurants and how we would design for that to provide our users with the food they want.

The challenge of knowing what a person might feel like eating when they open up the app is a very difficult task. We went with a carousel design to be able to group categories while saving vertical space in the list. This would allow local markets to customize their offerings to their cities needs, but also have a consistent system that the user can understand.

Categories to inspire users (version not implemented).

Allow users to view all categories. We use machine learning to surface relevant categories based on history.

Framer prototype for filtering concept that allows users to find what they want.

Can spell precision without the pin

As we expanded globally, we quickly realized that standard address fields don't scale universally. Our original design forced a rigid 'Street, City, Zip Code' structure and lacked drop-pin support. Through research, we discovered major regional nuances—such as Japan’s top-down hierarchy (Prefecture -> City -> Street) and the Netherlands’ reliance on the postal code as the primary delivery anchor. This highlighted a critical pain point in our international checkout flow.

Showing different ways different countries treat address entry

We also needed to set clear expectations around the drop-off location. Rather than relying on traditional door-to-door delivery, real-time courier tracking enabled an 'Uber-style' pickup model. By prompting customers to meet their courier curbside when they drew near, we significantly accelerated handoff times in complex environments like high-rise apartments, parks, and open outdoor spaces.

Framer prototype to show delivery option selection.

Animation study for picking up bounds.

Framer prototype for saving address for later.

Ultimately, we learned that address entry cannot be a one-size-fits-all experience. To account for these global and logistical nuances, we designed a highly flexible location framework. This adaptable system dynamically scales to capture diverse regional data, ensuring a frictionless delivery and handoff experience for both Eaters and Couriers.

Meal curation

Menu curation is powerful. More subsections viewed = more options = higher conversion. Our goal was to help eaters decide what to order from a menu and make it easier to explore a restaurant's menu. In v1 of the menu design we had a structure where the categories were in a accordian format, and quickly learned that we should remove the extra tap that the accordian menu caused the user to make.

List items for categories friction to the checkout process.

33%

Of all sessions where a user opens a menu results in request.

2/10

Of people who view "Most Popular" are more likely to place an order.

38%

Increase conversion rate from Restaurant view to order.

In order to keep continuity between the home feed of restaurants to the restaurant menu page, we used the restaurant photography as the hero image in the menu screen. We displayed most popular dishes up top to give the user a sense of what is ordered most often. Through machine learning, we created categories such as recommended for you, which was based on the user's past orders and likelyhood that the user would enjoy that particular dish.

Motion study for card transitions.

Restaurant detail screen.

Hold the mayo

The challenge is that no two items are necessarily the same. A pizza item could have a hundred different alternatives for just “one item” while fries could be just fries. We had to design a system where we can accommodate for multiple selections as well as required selections.

Motion study for card transitions.

Restaurant detail screen.

Restaurant detail screen.

Check please

Customer support tickets were spiking due to users placing orders to incorrect addresses and experiencing confusion over unclear receipts—both of which directly drove up order refunds and defect rates.

Address Transparency: Provide explicit, un-missable confirmation of the selected delivery location before checkout.
Price Clarity: Redesign the receipt breakdown to give users absolute transparency into total costs and itemized charges.

Item detail view.

Motion study checkout flow.

Re-designed checkout screen.

We tackled both challenges directly within the checkout flow—balancing clarity with high-converting visual elements like appetite-appealing imagery.

Visual Location Confirmation: Replaced the static text field with an interactive map preview of the delivery location. This added intentional visual weight to the address, prompting users to double-check their destination before ordering.
Sticky Price Transparency: Positioned the total price directly adjacent to the CTA button. The price remained sticky throughout scrolling until the inline itemized breakdown came into view, ensuring complete cost awareness at every step.

We tackled both challenges directly within the checkout flow—balancing clarity with high-converting visual elements like appetite-appealing imagery.

Visual Location Confirmation: Replaced the static text field with an interactive map preview of the delivery location. This added intentional visual weight to the address, prompting users to double-check their destination before ordering.
Sticky Price Transparency: Positioned the total price directly adjacent to the CTA button. The price remained sticky throughout scrolling until the inline itemized breakdown came into view, ensuring complete cost awareness at every step.

Food is on the way

In the first version of the order delivery screen, we were not able to incorporate a lot of features we would have liked, e.g.(live car and map, progress indicator, and clear communication of status of the order). In the second version, we took the approach of keeping the familiarity of the Uber Rides app while adding features unique to an Eats experience. We wanted to be as transparent as possible for the order and communicate the status, set expectations for the user, and hypothetically lower the amount of inbound support tickets due to "late orders".

Motion study of transition for checkout screen to order status.

Motion study of transition between preparing order to courier en route.

Motion study notification from courier.