Homeslice
UX Design - Web
Background
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.
Sign-In 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
