After catching wind of the public criticism of Loblaws' new self checkout system (see BlogTO's article "People are hating the new Loblaws self-checkout system"), two colleagues (UX designers Tony Chen and Roger Luo) and I went to go investigate why.
Together, in May of 2018, we travelled to the nearest Loblaws and tested out the system ourselves. We took notes, pictures, and tested different task flows. We performed a UI audit, and pinpointed areas of frustration and confusion. We took this research and tasked ourselves to redesign the system, aiming to alleviate pains that customers may feel.
Note: Research, inspiration finding, persona, solution ideation, task flow, and wireframes were done in collaboration. Then, we each took the basic wireframe and created our own high fidelity screens and prototypes.
First off, we travelled to the nearest Loblaws in order to test the current self-checkout system first hand. We grabbed a few items, and proceeded to the self-checkout machine where we explored the interface and checked out our items. Along the way, we snapped a few pictures and jotted notes.
Click or tap below images to enlarge.
When going through the customer journey through the self-checkout process, we noted the following main areas for improvement:
Intuitiveness: many buttons lacked proper labelling, and lead to confusion when navigating throughout the process. Questions and thoughts arose like "what does this button do?", "where do I go if I want to do X?", and "I did not expect that button to take me here."
Consistency: some design choices felt inconsistent with standard use of certain design elements. For example, the button with a shopping cart icon lead us to believe this would bring us to a checkout screen, consistent with many e-commerce website use of a "cart", though this was not the case. Also, the big alarming dollar button in red gave us the impression the button was for an error or mistake, though this was the button to bring us to checkout. Without noticing the external paper with instructions placed above the screen, we would have to figure out what each button did by trial and error.
Information hierarchy: the item list felt cluttered. The item names, price & quantity, and barcode were all the same size and weight, and the information most important to the user felt lost in the jumble of words and numbers.
Aesthetics: there was next to no branding or personality added to the UI. Pleasing visuals may add to a user's positive experience. The opportunity to associate a positive grocery shopping experience with the Loblaws brand is missed.
Understanding the shopper
Aiming to get some understanding on shoppers' experience the self-checkout process, we interviewed a few shoppers and gained the following insights:
• Efficiency - shoppers often feel it is quicker when they have less items, but more effort when they have more items.
• Lines - some shoppers feel indifferent between self-checkout and traditional checkout, and will elect to use the self-checkout if the line is shorter.
• Approachability - some shoppers feel intimidated to use the self-checkout process (often if they have not used it before), due to learning curve.
• Assistance - shoppers appreciate the availability of staff if they have questions or concerns.
From the insights gained from the UI audit and the user interviews, we jotted down the main points we wanted to hit (speed, appeal/attractiveness, reliable/dependable, intuitive), and settled on our design question to solve.
"How might we make the Loblaws self-checkout experience intuitive and approachable for grocery shoppers, so that checkout is efficient and delivers a great shopping experience?"
We did an exercise to jog up solution ideas that would help solve our design problem.
What arose was a Frankenstein of different elements we felt would work well. Each of our designs focused on intuitive buttons, clear navigation, and efficiency.
We then took the time to settle down on what user flow to focus on for our prototype. We decided to focus on the task of a user checking out a mix of items, including scannable items as well as produce (which must be weighed and coded).
Together, we sketched a rough mockup of our solution, and then created lo-fi mockups in Sketch.
We each individually tasked ourselves to create our own version of the high fidelity prototype. See below for the InVision prototype I created.
By pinpointing the weaknesses of the current design, as well as gaining insights into the value that shoppers seek from using the self-checkout machine, we were able to design an experience that improved upon:
Intuitive navigation: labelled buttons, step by step header
Information hierarchy: emphasized item names, de-emphasized item codes
Approachability: inviting home screen, language accessibility, payment methods accepted shown in home (including gift cards and coupons)
Aesthetics: branding that reinforces positive association
Reliability: ability to correct mistakes, call upon human associate if needed