About the project:
966 is an online Pan Asian food delivery service. The company has been selling sushi and noodles in big Ukrainian cities (Dnipro, Kharkiv and Odesa) for 6 years.
Problem:
In 2018 60% of the website traffic came from mobile devices, and the conversion rate on mobile was low. A big number of the users of the mobile version were complaining that they couldn't place the order.
Problem:
In 2018 60% of the website traffic came from mobile devices, and the conversion rate on mobile was low. A big number of the users of the mobile version were complaining that they couldn't place the order.
UX audit stages:
- Immersion into business processes;
- Analysis of the market and competitors;
- Research of analytics;
- Analysis of customer paths;
- Study of the call center feedback;
- Analysis of the heat maps and webvisor records;
- Identification of the website's problem areas.
- Analysis of the market and competitors;
- Research of analytics;
- Analysis of customer paths;
- Study of the call center feedback;
- Analysis of the heat maps and webvisor records;
- Identification of the website's problem areas.
.jpg "UX Audit")
Main hypotheses:
- Inconvenient placement of the menu, which, according to the webvisor records, was difficult to find.
- High bounce rate from the product list. The reason could be in the inconvenient system of filters for selecting the product.
- High load on the call center because of the lack of all the necessary information on the website for the order placement.
- Critical errors on the check-out page that didn't let complete the purchase on the website.
- High bounce rate from the product list. The reason could be in the inconvenient system of filters for selecting the product.
- High load on the call center because of the lack of all the necessary information on the website for the order placement.
- Critical errors on the check-out page that didn't let complete the purchase on the website.
.jpg "Concept")
Choosing the concept
We analyzed and evaluated several options:
- Creation of a new website structure using mobile first approach;
- Creation of the mobile version of the existing site;
- Creation of application;
- Creation of separate applications for Android and iOS.
As a result, we opted for the mobile first solution. With this approach the site development is performed from the mobile version to the desktop one. This allows saving on the development, since instead of creating an application separately, and then subsequently updating the web version, the mobile first web version can be applied.
- Creation of a new website structure using mobile first approach;
- Creation of the mobile version of the existing site;
- Creation of application;
- Creation of separate applications for Android and iOS.
As a result, we opted for the mobile first solution. With this approach the site development is performed from the mobile version to the desktop one. This allows saving on the development, since instead of creating an application separately, and then subsequently updating the web version, the mobile first web version can be applied.
Dynamic prototypes of the main pages
Having taken into account the discovered problems, confirmed hypotheses and comments of the target audience, we prepared prototypes of the menu and key pages: the main one, the product card and Place Order.
Having approved the key pages, we started designing all the pages, moving from the 320-px-resolution to 1920 px. As a result, we received a scheme of prototypes of 238 screens, 76 pages and 162 conditions.
We downloaded these prototypes in Invision and interlinked them so that we could make a testing on the focus group and check if we solved the users' task.
How the interface of the online store 966.ua has changed
Cart as a sitewide element
We made a sitewide cart and placed it in the right-hand side of the screen. Giving up a separate cart page allowed decreasing the depth of the funnel.
The cart became convenient for collective purchases as its content got visual. The user received a full-fledged block for managing his/her order and a prompt what to do further.
The cart became convenient for collective purchases as its content got visual. The user received a full-fledged block for managing his/her order and a prompt what to do further.
Accessibility of information about the product
We designed the product card so that all the information about the product was available. We presented the information about the weight of the set and number of pieces in the product card. The quantity and weight of the product are the key characteristics the user pays attention to when placing an order. By providing him/her with all the necessary information for making a decision we help him/her to make a choice and thus shorten a path to the purchase.
Order placement
The Place Order page presupposes filling in a little form with key information: name, phone number, payment details, promocode. Other data can be communicated to the operator by phone. Alternatively, the customer can continue filling in the detailed form and indicate the delivery address and time, as well as the number of sticks/forks/knives to save time and skip clarifying this information in the phone talk with the call center.
Motivational system for cross-selling.
We developed a multiple-step motivational system with gamification elements. By filling in the form the user can get a present from free delivery to additional rolls in the order.
For this, in the right-hand sitewide cart block, apart from the products added by the user, we added information on which present awaits the customer for the placed order, as well as which benefits he/she might get if a product for a certain price is added. Thus, we got a motivational system for increasing an average order value.
For this, in the right-hand sitewide cart block, apart from the products added by the user, we added information on which present awaits the customer for the placed order, as well as which benefits he/she might get if a product for a certain price is added. Thus, we got a motivational system for increasing an average order value.
.jpg "Result of mobile-first design strategy")
Result of mobile-first design strategy
Mobile-first design of an online store is a good option if the target audience mostly uses the site from mobile devices, especially for delivery services, where purchases from smartphones grow every year. Such a decision saves time on design and development, since in this case one site is created, and not application or mobile version separately.
Next case study Dicentra