Overview

The popularity of food delivery apps has been growing exponentially over the past few years, and competing brands like Uber Eats, Just Eat, and Skip the Dishes are racing to keep up with this demand by adding more restaurants, more deals, and a more seamless user experience to their platform. As relatively infrequent users and students, we wanted to know what it was about these apps that made them so enticing to so many people our age, particularly when factoring in the additional cost of delivery. It didn’t take long to realize that the experience played a huge part; ordering food via one of these apps was just so darn easy that it almost didn’t make sense to ever go through the hassle of travelling to a restaurant, waiting in line, and ordering food ourselves again. However, hungry for a challenge (pun intended), we decided to take on the task of going head to head with the UX team of one of these food delivery services, Skip the Dishes, to see if we could take their platform’s user interface to the next level. Read on to see the outcomes and determine for yourself whether we succeeded in our goal.

Note: The following analysis has been conducted based on Skip the Dishes’ web application as of May 2018.

Task analysis

The process that we followed to try and redesign the Skip the Dishes web app roughly followed the structure that we learned in our human centred design course. This meant starting with a hierarchical task analysis (HTA) to break down and understand all the functions required to complete the high-level goal of ordering food from the website. The functions and constituent tasks and subtasks were defined through user observations, as representative users were asked to go through the entire process of ordering food from the Skip the Dishes web app in the manner that was most intuitive to them, enabling us to aggregate our findings and generate a general path. Although four functions were identified altogether, we chose to focus on one we thought was most important: selecting a restaurant to order food from.

Heuristic evaluation

During the user observations that were conducted to create the HTA, questions and comments made by the users regarding criticisms/difficulties they experienced with the UI and UX of the Skip the Dishes web app. These complaints were compared against Nielsen’s usability heuristics to identify how they may be affecting the steps outlined in the HTA by adding unnecessary time, effort, etc.

1. Restaurant price ranges: When users attempted to compare restaurants based on price, they found no option to do so, and instead had to navigate to each restaurant’s menu to determine the general prices of the food sold there. This violated the usability heuristic of recognition rather than recall because users had to hold the prices from each restaurant’s menu in their memory to recall it when comparing another restaurant, since the information wasn’t simultaneously visible.
   
2. Cuisine information: Some users wanted to see pictures of some of the dishes sold at each restaurant. Unfortunately, the image beside most restaurants was that of their logo; some restaurants did have images of food, but then this violated the heuristic of consistency and standards, since the type of visual provided for each restaurant wasn’t the same. Recognition rather than recall was violated once again as well, since users had to open each restaurant’s menu to see what type of food they offered, then retain that information when making comparisons with other restaurants.
   
3. Skip Score: Each restaurant is assigned a Skip Score which customers can use to sort restaurants by, but the criteria that the Skip Score is based on isn’t explained, making it difficult to understand its contextual relevance. This violates the heuristic of match between the system and the real world, which states that the system should speak the user’s language, using words that are familiar to the user instead of system-oriented terms like “Skip Score”, particularly if those terms are undefined.
   

Proposed redesign

Based on the identified issues, it appeared that the features which should have been available to help facilitate the function of deciding which restaurant to order food from were either missing from the platform (restaurant price ranges, cuisine information), or were being implemented ineffectively (skip score). The low-fidelity prototype was built with the intention of making this function easier to perform by making these features more accessible to the users. A number of design alternatives were generated through brainstorming sessions within the team, which were finally narrowed down through multivoting and discussion.

1. Adding price ranges: To cater to users' desire to sort restaurants based on price, emphasis was placed on making this information less demanding on the user’s memory by enabling them to compare restaurants based on price on the main page. The proposed redesign had numerical price ranges that were grouped with other cost-relevant information in the restaurant’s description, so users could compare costs while remaining on one page.
   
2. Adding cuisine information: Cuisine information for each restaurant was made more accessible using images and textual descriptions. The redesign included restaurant logos, enabling consistency with current platform conventions, and provided large, minimally cluttered food visuals as well. The type of cuisine offered was also described textually, providing additional relevant information.
   
3. Defining the Skip Score: The proposed redesign was a pop-up that appeared whenever a user hovered over the Skip Score. This satisfied the design principle of clutter avoidance, because the information only appeared when the user was looking for it.
   

usability testing

By performing a cost-benefit analysis and using a pre-screener survey, two female and two male young adults, the largest demographic for online food-ordering services, were selected to test the redesigned prototype. Out of this group, 2/4 participants had prior experience using Skip the Dishes, while 2 did not.
‍
The main goal being tested for was “Selecting a restaurant to order food from”. The aim was to determine whether we had made this function easier for users, and whether it was now more intuitive for users to navigate through the proposed interface.

During the test, both quantitative and qualitative data were recorded.

Following the test, an open-ended retrospective survey was given to users for them to reflect on their experiences.
‍
Overall, participants had a resoundingly positive review of the layout and experience with the improved Skip the Dishes prototype. The web pages associated with the usability test were said to be clean with well-organized information. Consistently having large food images and company logos also better enabled users to compare different options. Finally, users were pleased with the columnization of different groups of information for each restaurant listing (i.e. food image on the left, general restaurant information in the middle, and delivery-associated information on the right). Quantitatively speaking there were improvements as well, as the overall number of questions asked by users during the usability test decreased.
‍
Usability testing along with the retrospective surveys also highlighted some weak points in the prototypes, which could be addressed in future iterations of the design.

Just for fun

While working on this project, I was also learning how to use Axure RP, and so as a personal challenge I decided to mock up the redesigned prototype we'd made in higher fidelity. Notice the addition of price ranges, food visuals, and a popup to explain the Skip Score. As a side note, these were some of the first prototypes I ever made using design software!