Optimizing mobile user experience: 966.ua food delivery case study

UX audit, focus group testing, and interface redesign following mobile-first approach. Discover the benefits of these processes in our case study on developing an interface for a food delivery service.

Client's problem 

966 is an online delivery service for Pan-Asian cuisine. For over 5 years, the company has been selling sushi and noodles in Dnipro, Kharkiv, and Odesa. 

In 2018, 60% of the website traffic originated from mobile devices, but the conversion rate remained low. Many mobile users complained that they could not place an order.

Our task was to collect all the requirements from the business owners, analyze user behavior patterns, identify interface issues, evaluate analytics, communicate with developers, and offer several solutions to boost business conversion. So we started with a website audit. 

UX audit and interface issues detection

We started our work by conducting a UX audit — a comprehensive analysis of the interface for possible usability or design issues.

This usability analysis included the following steps:

• Deep dive into business processes
• Market and competitor analysis
• Analytics study
• User flows analysis
• Call center feedback assessment
• Analysis of heatmaps and web visor records
• Identification of the website’s weak areas 

As a result, we formed a list of the most crucial interface issues and worked out hypotheses on how to eliminate them:

• Menu location issues. As noted in the webmaster's records, the menu was located so that it was difficult for users to find it.
• High bounce rate from the search results page. It may be caused by an inconvenient block with filters for product search.
• High workload on the call center because the website lacked some vital information for placing the order.
• Critical issues on the checkout page that prevented users from completing their purchases on the website.

We decided to test all of these and other hypotheses by conducting focus group testing.

Creating buyer persona portrait 

Before gathering a focus group, we developed a detailed target audience portrait:

According to analytics, call center data, and interviews with a business representative, 70% of orders were placed by women aged 22-28 using mobile devices, primarily iPhones. Their typical purchase includes 1 sushi set and a beverage.

User testing

Using the buyer persona profile, we organized a focus group and conducted moderated user testing. We developed a scenario and divided it into separate tasks to test each critical step of the sales funnel.

That’s what a brief description of one of the scenarios looked like:

It’s Friday, and after a long day at work, you’re heading home to find nothing to eat. You decide to order food delivery. Someone at work has recommended you 966 services.

Task 1. Choose any set and any beverage

Task 2. Find the delivery and payment terms

Task 3. Order the selected food

Task 4. Find the phone number to call the service yourself

The result of user testing:

• 75% of users could not find the menu from the first try.
• 50% of users did not find the necessary information about the product — sushi set weight and composition. But these are the key factors that influence the users’ choice of whether to add an option to the shopping cart. 
• 80% of the focus group didn’t understand all the website's functions, especially what an extended order is and how to access it.
• 62% of respondents did not know what to do after adding an item to the cart, so they were unable to complete the order on their own.
  

Apart from confirming most of the hypotheses, we also got several insights about the target audience, including:

• Users often add a beverage to the cart when buying a set.
• Users must contact the call center to check their accumulated bonuses, as the website doesn’t provide a convenient way to do this.
• Some users want to add extra rolls to their order but struggle to quickly find and add them.

We considered these findings when designing the new interface.

Defining the concept

Now we had to choose a concept that could help us solve all identified interface problems. We analyzed and evaluated several options:

• Creating a new site structure following mobile-first approach;
• Developing a mobile version of the website;
• Creating an application on Bitrix;
• Developing separate applications for Android and iOS.

We chose a mobile-first approach, which involves firstly developing the mobile version of a website and then adapting it for desktop use. This approach saves on development costs since it eliminates the need to create and update a separate app and web version, allowing us to implement a mobile-first website instead.

Development of the dynamic prototype for the main pages

Taking into account all the identified issues, confirmed hypotheses, and feedback from the target audience, we prepared the prototypes of the menus and critical website pages, including the main page, product page, and checkout.  

Testing the prototype on a focus group

We conducted a new test on a focus group that matched the portrait of the target audience.

We got some positive results:

• We confirmed that the website’s navigation was comfortable to use,
• Users said that now they could easily place the order,
• All the necessary information to make a purchase decision was available.

After the second test, we presented the customer with a concept validated through target audience feedback, analytics, and a UX audit.

Creating prototypes of all website pages 

After approving the key pages, we started the design of other pages, moving from 320px to 1920px resolution.

Finally, we got a prototype wireframe of 238 screens, 76 pages, and 162 states.

By conducting user testing and gathering valuable insights, we significantly reduced the time the UX designer spent on the project. We gained a clear understanding of the business's needs, how to structure the navigation, and what aspects to emphasize for each device type. We managed to reduce the time for prototyping by 40%. 

966.ua store interface revamp

1. Native iOS navigation in the menu

In the previous version of the website, users struggled to find the menu, often mistaking it for the popular categories displayed on the homepage. As they scrolled, the burger menu disappeared, preventing quick access to the shopping cart and smooth navigation between categories.

Moreover, the ‘Menu’ button was not fixed, and the visitor had to scroll through the entire section assortment to return to the page header and reach the menu. 

According to analytics, the website target audience mainly used iPhones, so we focused on native iOS navigation by placing menu items at the bottom. We considered that the user may often open the menu, move from category to category and, add products to the shopping cart, check the number of bonuses to pay with before making a purchase decision. Therefore, placing the menu items in a fixed position at the bottom appeared to be the most convenient solution.

2. Shopping cart as a cross-cutting element

In the previous website version for desktop, the link to the ‘Shopping Cart’ was located in the upper right corner and displayed only the number of added products and total order cost.

This solution received negative feedback because it didn’t clearly show which product was added to the cart or what actions to take next.

So, during the redesign we introduced a persistent cart located on the right screen side, eliminating the need for a separate cart page and streamlining the checkout process. This solution also made collective purchases easier, as the cart’s content is always visible.

It simplified access to the checkout and allowed users to view their shopping list at any time without going to a separate page. That is, the user received a well-thought-out block for managing their order and a hint on what to do next.

In the previous mobile version, after adding an item to the cart, it wasn’t clear that it had been added since all changes occurred outside the visible area. Users were unsure how to proceed to checkout, as the checkout button remained on the initial screen.

3. Accessibility of product information

In the old version of the 966.com.ua online store, details about the weight and number of pieces in sets were placed in the header. This led to many complaints from mobile users, as this information was not accessible on mobile devices due to the hover feature not being supported in the mobile version.

Therefore, in the new version, we designed the product card so that all information about the product is always visually presented.

The quantity of the product and its weight are the key characteristics that the user pays attention to when ordering food.

By providing them with all the information they need to make a purchase decision, we help them choose relevant options and shorten their user flow. 

4. Checkout process 

Before the website redesign, the checkout consisted of two pages: a quick order and an advanced order form. According to the UX audit and user testing, users did not understand the difference between these options, as changes occurred at the bottom of the screen when they clicked. 

The new checkout page design offers a small form asking for crucial information: phone number, name, payment method, and promo code. Customers can also provide additional details by calling the operator or choose to complete a more detailed form that includes address, delivery time, and number of items. This option helps save time during conversations with the call center.

5. Motivational system for upselling

The old version of the site lacked cross-selling tools. So we simplified and enhanced the process of adding related products, making it clear and engaging.

We implemented a motivational system with multiple stages and gamification elements. As users progress through the scale, they can earn rewards ranging from free delivery to extra rolls to the placed order.

In the right sidebar of the shopping cart, we now display information about the gift the customer can get for the selected order, as well as the benefits a person can get when adding more items to reach a certain price threshold.

In this way, we implemented a motivational system to increase the average check.

Taking into account the insights we received during user testing, we also added cross-selling blocks: we offered users to add to their order an additional set, beverage, or dessert.

6. Personal account

Previously, the website lacked a personal account feature, leading to many customer inquiries about accumulated bonuses and how they can use them.

When people want to repeat their order, they usually do so via their personal account. Therefore, we provided the user with a personal space to track the order status, check the number of bonuses, the availability of new promotional codes, view order history, etc in one click. 

By completing their profile with personal information, such as their date of birth, users can receive additional bonuses and discounts. They can also create a list of delivery addresses to simplify future orders.

The personal account has become an essential feature of any online store, as it streamlines and simplifies the ordering process while showing customers that we care about their experience.

Mobile-first redesign: project results

Designing an online store following a mobile-first approach is a good option if your target audience prefers smartphones for ordering delivery services. This strategy reduces design and development time by creating a consistent website rather than separate apps or mobile versions.

A UX audit before redesign stage and user testing of the concept can also save your budget during the interface design phase, as it provides comprehensive data about your web product and the customer experience it offers.

All these interrelated processes helped us create a user-friendly online store for mobile and desktop users and lay a good foundation for further business scaling.

‍