THE CHALLENGE

ENGAGE THE DINER

Data findings indicated that a significant number of diners who came to the list page were not viewing a menu. This indicated a large pool of diners we could be helping find food they were excited to eat.

Additionally, there were huge differences in UI and information available on different platforms of the product, which would make the implementation of any solution challenging.

GOAL

The goal of the redesign was to help more diners find food they were excited to eat in the shortest amount of time possible with an intention to increase customer conversion and retention.

MY ROLE

I led the design of EatStreet's customer-facing platform across iOS, Android, Desktop, and Web since 2019.

I led efforts to evolve the platform and address customer pain points related to the browse and discovery experience.

To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. The information in this case study is my own and does not necessarily reflect the views of EatStreet.

PROCESS

CUSTOMER INSIGHTS & IDEATION

I partnered with the project manager to uncover insights and translate concepts into designs that address customer behaviors and motivations.

Some of the key questions we had were

• What were the diners looking for?

• What was a hindrance for them to find the food they were excited about?

• How could provide the most seamless experience to the diner?

After an in-depth analysis, using customer feedback and data analysis we concluded that the diners were finding it hard to find restaurants they'd like to order from primarily because of the following reasons.

• Unorganized and hard to find information on the restaurant list page

• Difficult to read and text-heavy design

STRATEGY & VISION

I created frameworks and prototypes to share the vision, design ideas and content strategy. This helped to generate ideas, gain alignment and drive decision making. To achieve the goals, we were going to use a three-pronged approach.

1.1. PROPOSED FILTER DESIGN

Below are the wireframes for filters design for both the apps and mobile web.

The cuisines section has placeholder data only. They were to be listed alphabetically in the product.

2.0. REDESIGNING THE RESTAURANT CARD

WHY?

1. The existing cards were not designed to accommodate all the new information which being offered to the diner today like deals, tags and information on restaurant closure, images etc.

2. Additionally there was an inconsistent information set being provided to the user across platforms.

Existing Restaurant cards on Android, iOS and Mobile web.

Different UI design and different information being presented to the diner

SOLUTION

1. The cards were redesigned to present all the relevant information in an easy to read manner.

2. The card design had to be visually attractive.

3. It should also be modular to be able to present the different sets of information for different restaurants.

2.1. CARD SORTING & INFORMATION ORGANIZATION

There was a lot of information available about each restaurant, which made it a challenge to identify the ones which would help the diner make a choice.

To identify the restaurant parameters in the order of importance, I led an in-person closed Card Sort exercise with 3 people. The primary question for the exercise was:

"As a diner, when you are looking to order food, what information influences your decision to checkout a restaurant"

Based on the different information from the card sort, the following parameters were identified in the order of their importance:

• Cuisine

• Delivery fee

• Delivery time

• Restaurant Closed information

Upon further studying all the information I found that some of the parameters in there could be treated as mutually exclusive. They were then organized as such.

For example, if a restaurant was currently closed we could replace the "delivery fee" and "delivery time" tags with "closed" tags and "opens at {time}" tag. Similarly of a restaurant was closed but had order ahead feature, we could replace the "Closed" tag with "Order Ahead" tag.

This exercise helped me focus on these key information while designing.

2.3. PROPOSED RESTAURANT CARD DESIGN

Here are high fidelity wireframes for the Android app, iOS app and the desktop web.

3.0. DESIGNING THE DISCOVERY PAGE

WHY?

To help the diner easily identity the restaurant they wanted to order food from we needed the list page to be more than just a list of restaurants.

SOLUTION

The goal was to redesign the diners' journey to discover a restaurant and provide them tools to help them along the journey.

Why a Discovery Page?

Before embarking on the journey of "reimagining the food discovery" we experimented with a concept which we called "Hungry Hacks". It felt that it would help the diners find food and was relatively easy to implement. It did not yield much engagement from the user and we learnt a lot about the needs of our diners. We began rethinking the whole thing from the beginning and the concept of a Discovery page was now formed.

Improved filters and card were the core building blocks for an improved page design. The page design would include the following:

1. Enabling the diners to change their desired order method from the list page itself,

2. Providing the diners popular cuisines upfront without having to go into filters on mobile,

3. Adding themed categories to help the diners make a choice they are happy with,

4. Adding a powerful search tool to help them search for not only restaurant and cuisines but also eventually dishes.

The discovery page was intended to make the diner feel excited in their journey of finding food.

3.1. USER TESTING

I conducted a usability test on a design iteration with 6 people. The users were selected such that they had no or limited experience using the app to avoid any bias.

The scenario they were given was "It's lunchtime and you want to order some food. You heard about EatStreet from a friend and you are going to try it out today." They were asked to perform 3 tasks each in a different order. They were asked to think out loud while performing these tasks.

1. Order from a restaurant offering "Asian" cuisine.

2. Order from "Chipotle"

3. Order from any restaurant of your choice.

The design was further refined to incorporate user feedback.

3.2. PROPOSED DISCOVERY PAGE

Below are a some of the final wireframes for the discovery page for mobile web.

Following the implementation of filters, we saw a significant improvement in the engagement with filters and overall menu exploration. Though it could not be said with certainty that filter caused these increased numbers, but filter usage was definitely associated with higher numbers.