Domino's website UX case study
The Challenge
For this case study, me and my team analyzed Domino's and Pizza Pizza's websites for their online delivery service, with the goal of creating re-designed wireframes at the end. Through usability testing, we detected areas in the websites where the experience was effortless and where there were pain points. We then chose Domino's to focus on and re-designed the user flow and wireframes.
The Research
The User
For this usability test, our user was given the task to order a large, 4-topping pizza from Domino's for carryout. During this test, they were video recorded as they navigated through the process in order to analyze and study the recording afterwords. It also helped to read the user's facial expressions when they were carrying out the task when examining areas of improvement. They were also given instructions to speak out loud on what they were doing and to express their feelings during the process of ordering the pizza.
The Pain Points
- Choosing a delivery method was at the very beginning of the process. The user was slightly confused with this and wondered why it was first. She would like to have it so that she makes her pizza as the first step.
- The user was not sure how the list of store locations was organized. She googled the first two locations to see which one was the closest to her.
- There was no indication of an increase in price, when the user put on more toppings.
- Had a difficult time looking for the guest checkout.
What Was Effortless?
• Finding deals/coupons
• Finding the 'order' button
• Choosing pizza toppings
The Structure
The User Flow Diagrams
We documented Domino’s current user flow when a user is ordering online for carryout in order to have a visual. Based on the user's video recording and feedback, we then pinpointed areas where improvements should be made and re-designed the user flow.
The Original
Our Revised Version
Redesigns
Sketches
I was tasked with creating the wireframes for the re-design. Based on the gathered information, I developed wireframe sketches and laid down what we wanted for each stage of the pizza-ordering process. I then took these sketches to mid-fidelity wireframes in order to further develop the re-design of the web application.
Wireframes
Thanks to the user feedback and revised user flow, I was able to understand what we were aiming to solve and change when approaching the wireframes.
Pizza Helper Recommendations
• Add the price of the pizza, which changes when toppings are added and taken out
• Dot navigation added to the side in order to show the steps of the pizza ordering process
Review Order
• Extra Coke item is taken out and replaced with another Domino’s side item
• 'Food & Beverage’ is removed from when calculating the price of the order
• ‘Add more items’ button is added under the items detail area
Delivery Method Webpage
• Center ‘delivery’ and ‘carryout’ icons in the middle
• Allow the user to use their current location
• ‘Delivery hours’ and ‘carryout hours’ are put into one section called ‘hours of operation’
• ‘Order carryout’ button and carryout icon aligned and put together
Payment page
• Order summary is on top and enlarged
• Order review box is removed
• Food & Beverages is removed from pricing
Learned outcomes
Through the completion of this project, I found how important it was to observe the user while they fulfilled the task. You can get a lot of information just from looking at the user’s facial expressions, the eyebrows and their verbal reactions.
Thanks for reading!✌️
