UX Design - Web


The ask of this project was to apply the user centred design process to research, design and prototype a web-based e-commerce experience of our own choosing. Thus, Homeslice was born – a pizzeria delighting customers with a delicious and decently-priced assortment, a simple and seamless online ordering platform, as well as a reliable and timely order tracking process.

Competitor Analysis

A competitor analysis conducted of popular pizza chains such as Domino’s, Pizza Hut and Crust, as well as pizza parlours available on aggregate online food ordering websites such as UberEats, Menulog and Deliveroo, uncovered the following observations:

Menu Categorisation

Menu items are broken down into multiple categories

New Menu Items

Banners will suggest customers to try new menu items

Menu Suggestions

Pop-ups will advertise value combos or menu items to customers

Value Combos

Menus tend to have a stand-alone category for value combos

Calorie Intake

Calorie information is provided beside menu item listings

Dietary Preferences

Menus tend to offer menu items and/or customisations catering to vegetarian, vegan and gluten-free diets.

and Register

Customers can create and log in to an account to access additional features such as order history, favourite orders and special offers

Delivery or Pick-Up

Customers can provide an address for delivery orders, or a postcode for pick-up orders, to browse the menu of their closest stores

User Research

Given the COVID-19 restrictions at the time, user research interviews were conducted with 9 people via Zoom (with video) to closely mimic the face-to-face experience, with each session lasting between 45-60 minutes. These interviews revealed the following insights about people’s preferences and pain points related to ordering food online, ordering pizza online, and pizza delivery and pick-up:

Pizza chains aren't always preferred over pizza parlours just because pizza chains are cheaper.

People like to see nutritional information on menus even if they find it difficult to understand

People want to know how long an order will take to prepare before they pay, rather than afterwards.

Pizza is seen as more of a fast food than Italian cuisine.

Menus with too much variety can cause decision paralysis

People are curious about new menu items but are hesitant to experiment.

Experience Design

Driven by user research findings, the mission of Homeslice was to enable users to order decently-priced and delicious pizza online with as little friction as possible. As people mostly associate pizza to be a form of fast food, they expect the online ordering experience of Homeslice to be like that of ordering any fast food – straightforward, seamless and speedy. It was crucial that the design of the Homeslice website focus on presenting information in a clear and coherent manner so as to aid purchase decisions and optimise the pace of the purchase process.

Menu Design

The Homeslice menu will be shown on a single page, minimising page load times and enabling people to conveniently compare menu items in one place. Firstly, the menu will be separated into menu ‘tabs’ (such as ‘New’, ‘Pizzas’, Sides’, ‘Desserts’ and ‘Drinks’), allowing customers to easily switch between the tabs while browsing what to order. Secondly, menu items in each menu ‘tab’ will then be separated into menu ‘categories’ (e.g. in the ‘Pizza’ tab, pizza flavours will be separated into categories based on the hero protein).

Value Combo Design

Homeslice’s value combos will be displayed on a single page. Once a customer selects a value combo, they will be directed to the Homeslice menu. A shopping cart will appear to the right of the menu, with the selected value combo already added. Customers can then choose menu items from the Homeslice menu which qualify for each component of the offer. Any menu item which doesn’t qualify for an offer component triggers a pop-up asking customers if they wish to add that menu item a la carte, or to cancel adding the menu item.

Homeslice Lite

Homeslice will launch a ‘Lite’ dietary label which will make dietary information easily understandable for customers who are more mindful about their diet. ‘Lite’ will be assigned to menu items with a Health Star Rating above 3 stars and an energy intake less than the average adult daily energy intake of 8,700kJs – an description which will appear when customers hover over the ‘Lite’ dietary label. Customers will also be able to filter the Homeslice menu by ‘Lite’ to show more nutritionally balanced menu items.

Pre-Checkout ETA

Homeslice will offer an ETA for both delivery and pick-up orders before a customer checks out. This will be powered by calculating a recommended route either from the store location to the customer’s address for a delivery order, or the customer’s postcode or suburb to the closest store location for pick-up orders, and factor the impact of live traffic conditions on that recommended route. Customers can then commit to the estimated wait time and check out, or reassess going ahead with the order.

Live Delay Alerts

After placing their order, customers will be able to access a ‘Live Delay Alerts’ feature, which allows Homeslice staff and delivery drivers to fast-track preset responses (e.g. “Homeslice processing and preparing peak hour orders“ or “Delivery driver encountering traffic incident on recommended route”) to a customer about an ETA which has been extended, either proactively or when the customer requests an update.

Usability Testing

Usability testing of the Homeslice prototype was conducted with 3 participants from the initial user research interview phase. The participants completed a total of 6 usability testing activities which explored 3 core user flows: ‘Browsing’, ‘Purchasing’ and ‘Paying’. Overall, 2 tasks yielded a 0% completion rate, 1 task yielded a 33% completion rate, and 3 tasks yielded a 100% completion rate.

The 2 tasks which resulted in a 0% completion rate revealed these findings that were deemed primary issues with the Homeslice prototype:

People failed to notice any dietary labels and the ‘Filter By’ functionality on the ‘Menu’ page

People found it difficult to switch between the primary, secondary and tertiary scroll bars on the ‘Checkout’ screen

The remaining 4 tasks which observed partial or total correct completion uncovered these additional issues with the prototype:

People were slow to browse through all the menu items on the ‘Menu’ page and locate menu categories

People did not understand the nutritional information portrayed by the ‘Lite’ dietary label

People overlooked the ‘Offers’ page on the ‘Home’ page and did not realise value combos were available

People experienced difficulties understanding the ‘View Item’ button on the ‘Menu’ page

People overlooked the ‘Try Later’ button on the ‘Menu’ page and the ‘Customise’ button on the ‘View Item’ modal

People did not complete the ‘Checkout’ screen as they missed the additional fields below the fold

These usability issues demonstrated that over-simplified nutritional information can be as problematic to understand as nutritional jargon, delay alerts should be shown sparingly to avoid normalising delays, and that people rely on menu categories more so than ‘Sort’ and ‘Filter’ dropdowns when browsing a menu. As a result, these iterations to the Homeslice prototype were recommended:

Dietary Label Copy

A broader assortment of more succinctly written and easily understandable dietary labels

Live Delay Alerts Limit

A limit of 2 live delay alerts available to be requested by customers or shared by staff for every order

Automated Scroll Bar

A secondary scroll bar which automatically returns to top of the ‘Checkout’ and ‘Confirmation’ screens

Menu Category Dropdown Menu

A dropdown menu to display menu categories in each menu tab to minimise scrolling effort and time

Incomplete Checkout Field Notification

A light-box notification to warn customers when incomplete fields are detected on the ‘Checkout’ screen

Other Projects

Million Paws Walk

What’s Up Doc