Redesigning Mjam’s restaurant discovery page (vol. 01)

UX case study (Dec 2017)

The challenge

Mjam is the most successful online food delivery service in Austria. Back in 2017 I worked as Product Designer in Mjam Product team for already two years.

One of the problems we were facing with one of the first versions of Mjam’s app was micro conversion from restaurant listing to the restaurant’s menu page. Only 23% of all users proceeded to menu page after they landed on restaurant list. Conversion was even worse.

Restaurant list was hard to scan. There was no easy way to select the right restaurant or pick up the right cuisine. It was hard to find specific offers or filter them by specific requirement. Users were only able to scroll through a number of colorful and bad designed restaurants logotypes and long names. Much needed information about restaurant, cuisine, price and delivery time was so small it was barely readable. Filtering and sorting were hidden behind unclear menu icons. Picking up the right restaurant normally took too long so many users just gave up and left.

By improving restaurant selection experience we believed in significant change in CVR by the summer 2018.

Ideation

To complete this important task we decided to run our first Design Sprint.

Why?

First two days including and collaboration with other main stakeholders helped us to really understand main user problems and the biggest potentials of the list page. Gathering those not only looking into data analysis, but also through marketing research and customer care insights.

Diving into analysis of brand’s competitors and other Delivery Hero entities, was helping to understand how they previously tried to solve similar issues and also helped us mapping ours faster.

The whole weak process helped us stay focused until the end; I still believe, also after conducting quite a few Sprints after this one, this is the main and most important takeout of such exercise.

Gathering info and setting goals
Gathering info and setting goals
Gathering info and setting sprint goals
Image for post
Image for post
Understanding user problems and ideation process

Sketching flows & lo-fi prototyping

In the second part of Design Sprint we did lots of paper sketching. We sketching and putting down very rough solution, no limitations — they only needed to be really based on the predefined problems and mapped pain points. All of those lo-fi prototypes were then validated on series of usability test with our in-house users:

  1. Users are confused about the restaurants offers

In old version of the app users could only pick a restaurant by their name and poor cuisine description. We assumed if we provide and easier access to most popular cuisines we would make the process of discovery easier.
Therefore we wanted to expose horizontal cuisine menu on the top of the page.

Image for post
Image for post
TOP CUISINES MENU

2. Users spend to much time picking the restaurant

Another way to help the users find their food faster, was to expose filters and search better. We introduced group of filters to help them navigate to desired results faster. Now floating search button leads to live search, allowing users to see search results without needing to redirect to a results page.

Image for post
Image for post
Filters & Search

3. Lack of help and inspiration made users leave the app too often

The idea was to test swimlanes — a new way of exposing relevant offers to users, a solution other global entities were already testing at the time.

We decided to test exposed last orders and most popular filters in Get inspired section.

Evaluation 01—Low-fidelity prototype testing

Lo-fi prototypes in Invision

4 in-house testers

2 variations of Restaurant List prototype

Goals:

User understanding suggested solutions

Users tendencies to find deals, specific restaurants, cuisines, specific type of food.

Importance of each element on restaurant list.

Image for post
Image for post

Results:

Design was still confusing to users

Importance of cuisines/filters surfaced

Search ranked low on users’ priorities unless they had a specific restaurant in mind.

Evaluation 02 — Low-fidelity prototype testing

Image for post
Image for post

9 testers

4 different variations of Restaurant list prototype

Goals:

Understanding new cuisine menu

Understanding new search, filters and sorting

Finding special food, deals, information

Understanding new section “Get inspired”

Results:

New cuisine horizontal selector is clear, easy to understand and intuitive.

Search is easy to find and would be used to find a specific dishes

They all think “get inspired” section is useful. It helps them to learn about benefits and service faster.

Creating final prototype and A/B tests

After few rounds of design iterations, new wireframes were ready.

It was time to prepare final designs in Sketch.

Whole UI was completely redesigned. Based on the test results we decided to keep the top cuisines selector and floating search and filter button. On top of that we added the Get inspired section as well.

Extra effort was put into the redesign of restaurant tile. By making the logos smaller we made room for more information to show in a cleaner manner. Every restaurant has a new way to show their special offer now as well.

After new restaurant list design was published live, we were running AB test on the new designs for quite a while. Intermediate results were showing CVR is 50% when users are using super cuisines menu, the overall number was 30%.

Until 2019 mCVR on Restaurant list page to menu page increased to 70%. That means we obviously made some other incredible improvements since the first one you’ve just read about :)

Please, stay tuned until vol. 02

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store