UX case study (Dec 2017)
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.
To complete this important task we decided to run our first Design Sprint.
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.
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:
- 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.
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.
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
User understanding suggested solutions
Users tendencies to find deals, specific restaurants, cuisines, specific type of food.
Importance of each element on restaurant list.
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
4 different variations of Restaurant list prototype
Understanding new cuisine menu
Understanding new search, filters and sorting
Finding special food, deals, information
Understanding new section “Get inspired”
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