Foodora Redesign

 

 

Situation

Exploring and finding the right meal means a lot for people at the moment of craving. They lose patience. They want to know the easiest and fastest way possible to have food in their tummy. What if we try to make this easier and more delightful for them?

We tackled this challenge by kicking of an internal workshop to analyze the main pain points of finding the right food. I performed several interviews with the foodora users. Based on various insights, we prioritized and structured a comprehensive re-design plan and executed successfully. We learned a lot on the way by embracing failure, testing and improving. Certain things changed on the way, either depritiorized or moved to backlog. However, we did not lose the focus on one big thing: Make the current experience much faster and more delightful for them.

 

Impact

Improved micro-conversion that entails discovery and increased overall conversion rate.

 

 

Challenge

Could we reduce the effort of finding good food in your area?

Could we give a better summary of restaurant information?

How do we package this experience on one page?

What information do they care to make a quick decision?

 

Role

Product Design (Research, Strategy, Implementation)

Team

3 Product Designers, 8+ Engineers, Product Manager

Platforms

IOS, Android, Responsive Web

 
 
cover photo.png

 

INSPIRATION

Key Findings & Pain points

Based on user interviews, we saw that they were confused how to narrow down options on the listing page and wanted to go through the restaurants in their area in a faster manner. Two main issues were:

No proper categorization of the restaurants based on food characteristics

Lack of information about the availabilities of the restaurant

RD_Research_portfolio.png

We tested with a click prototype to address the issues discovered regarding categorization, filtering and restaurant availabilities. Based on the insights, we built the MVP and then continued iterating based on the monthly user testing insights.

 

 

 

IDEATION

Combining the key information

 
vendor_tile_cutout.png
 

One of the biggest assets foodora is that having a fully dedicated logistics team that can provide us a dynamic delivery time for restaurants in the area. That is why we wanted to place this information on a clear spot.

Based on several researches and some interviews with people who order food, we found out that many people have an idea about what type of food that they want to eat. That is why we combined the key cuisines and characteristics under the restaurant name to give better idea to the users about the restaurant before going to the menu page. We gave more focus to the signature dish imageries for the restaurants to make the food experience more appealing from the beginning.

 

We needed a complete UI refresh along with some UX improvements as the scope of the project.

 
collage_component.png

 

IMPLEMENTATION

Design System: Cook Book

We developed design standards across a number of elements from foundational parts to global components. From the start we wanted to be sure that these components could be used, built upon, and repurposed. It takes a lot of effort to build something from scratch. Along with enhancing the restaurant listing page, we worked heavily on a design system at the same time which happened to be the integral part of our challenge. We are constantly updating and improving our master libraries and also add newly built components to our "Cook book": The CSS style guide built by our awesome front-end team (Credits: Joel, Willian, Petr).

 

Grid

Empty States

Spacing

Typography

Colors

Action Sheets

Cards

 

Elevations

Buttons

Loading Indicators

Icons

Headers

Drop downs

Alerts

 

Forms

Lists

Date & Time Pickers

Tabs

Filters

 
 Selection of the new components from foodora's style guide

Selection of the new components from foodora's style guide

 

IMPLEMENTATION

Mobile-first Design

One of the biggest focus was to ensure that we have a mobile-first strategy in place. Even though there is a significant amount of traffic on the mobile web, the conversion rate was underperforming than other platforms. Therefore we focus on improving the micro-conversion from restaurant to listing page as much as we can.

RD_mWeb_sketches.jpg
RD_perspective_white.png

 

Interactions

RD_mWeb_flow.png
 

 

Cross-platform Consistency

We implemented new UI refresh to our native apps in order to have a refreshed look and keep the experience consistent across platforms. 

Mobile-ui-all-platforms.png
 

Desktop Home Page

Homepage interactions.png

Restaurant Listing Page

RLP.png

Check the website here or download the mobile apps from below: