Design Thinking: NTUC Fairprice Self-Checkout

ntuc fairprice.png
 

Team: Ain Sahimi, Alicia Tan, Jun and Royce Lee

Tools: pen, markers, papers, sticky notes, glue and scissors

The Design Challenge

Fairprice supermarket chains in Singapore that have started practicing self-checkout. The challenge for us to improve its user experience through the design thinking. The team objectives are:

  • Simplify the self-checkout process.

  • Ease of use for non-tech savvy, the hearing-impaired and challenged community.

About Fairprice Supermarket Chains

NTUC Fairprice Co-operative Ltd was founded by the labour movement in 1973, with a social mission to moderate the cost of living in Singapore. From one supermarket, it has grown to become a leading retailer in Singapore serving more than half a million shoppers daily through a network of over 370 outlets, comprising FairPrice supermarket, FairPrice Shop, FairPrice Finest, FairPrice Xtra, Unity Pharmacy, FairPrice Xpress and Cheers convenience stores.

Today, with its multiple retail formats serving the varied needs and interests of people from all walks of life, NTUC FairPrice has kept pace with the changing needs of its customers while remaining committed to its social mission and its aspiration to be Singapore’s leading world-class retailer with a heart.

Design Thinking Process

The process does not stop but iterates; a cycle for continuous improvements.

Design thinking is a process that helps us to solve problems from users’ perspective and translate our ideas into a prototype that is testable and eventually usable. The process has five stages:

  1. Empathise

  2. Define

  3. Ideate

  4. Prototype

  5. Test

Empathise

The journey can only begin only we learn to understand who are the users, what are their challenges and what they need. This is the heart of human-centric design.

We immerse ourselves into the position of a Fairprice shopper using its self-checkout. Observing and shadowing users through at the self-checkout. We continue to engage the user by asking the users about the experience. What the user does/says/thinks/feels is captured in the Empathy Map.

This is an example of what we have done for User Z, 36, Female:

Empathy Map for User Z.

Empathy Map for User Z

Reflection: Empathy — the ability to recognize and share other people’s feelings — Simon Sinek. Without empathy or interest in users’ problems, we are not able to see problems in users’ perspectives. The journey can only begin only we learn to understand who are the users, what are their challenges and what they need. This is the heart of human-centric design.

Define

The key is to keep it human-centered over our assumption and bias.

At this stage, we want to make sense of the information we have gathered in order to gain clarity and focus. The Synthesis Process helps us to move from empathy work to drawing clues from all the things we gathered through the empathy stage where all is heard and observed..

Although using the self-checkout is a breeze for most of us, however we discover pain-points from other users. We have coded pain-points in pink, observations in blue, quotes from users in yellow. We ask ourselves about their similarities and differences, and cluster similarities in an Affinity Diagram.

Affinity Diagram cluster in similarities: Pain-points coded in pink, observations in blue, quotes from users in yellow.

Affinity Diagram cluster in similarities: Pain-points coded in pink, observations in blue, quotes from users in yellow.

We identify 5 clusters and name them to help us create an information structure and discover themes to describe the users pain-points. Then ranking the clusters from the most important over less important clusters. They are relating to:

  1. Audio prompts

  2. Post-payment

  3. Payment

  4. Barcode

  5. Packing

We create a persona that is a hypothetical archetype of actual users and define the persona’s goals. Goals are the reason why the users perform tasks and tasks are an intermediate process needed to achieve the goal. Here’s our persona, David, we have develop:

Persona: David

Persona: David

David is a mid-age horticulturist, married and thrifty with four children. Hearing-impaired makes communication extra challenging for David. The ability for him to meet with the rapidly advancing technology is also difficult. He is always in a hurry to run errands and needs more confidence in using the self-checkout at the supermarkets.

Through the Customer Journey Map, we visualize the process of self-checkout at Fairprice supermarket going through it to accomplish a goal. A series of user actions into a timeline from entering the supermarket to self-checkout. In the timeline, we can clearly narrate user thoughts and emotions:

A typical customer journey map.

A typical customer journey map.

Reflection: Self-checkout may sound like a breeze for most of us as seasoned users at NTUC Fairprice. However, we find out it is not the same when we talk to and understand from other users. The key is to keep it human-centered over our assumption and bias.

Having a persona gives us a better picture and an overview of who we are designing for and what problem to solve. The information helps us to predict how our target users will interact with the product we are designing to achieve their goal.

Ideate

Great ideas rarely come from silos

At this stage, the team generated a range of ideas, possible concepts and outcomes.

With our persona’s needs in mind, we ask ourselves How-Might-We (HMW) questions and explore possible solutions to the problem we are trying to address. Based on the needs from the persona and framing it into 10 HMW questions. We voted on our three favorite HWMs and we selected one of them, which is inline with our objectives, to work on:

Three favorite HWMs.

Three favorite HWMs.

We brainstorm a wide range of ideas to offer us options for addressing the problem at hand. Including throwing up ideas that are ridiculous and wild. With one idea on 1 sticky note, we took the highest voted HMW and build on it:

Highest voted HWM and our brainstorm ideas.

Highest voted HWM and our brainstorm ideas.

Here goes another voted HWM and our brainstorm ideas.

Here goes another voted HWM and our brainstorm ideas.

Our aim is to produce relevant solutions to solve the problem thoroughly and a certain degree of novelty so the solution exhibits originality. When we have generated sufficient ideas, we reach our convergent stage and evaluate the ideas and cluster good ideas.

The Worst Idea Possible “inverted” search process helps us to seek the worst solutions at ideation stage. We came out with many extreme ideas and considered options to address what make them so extreme. Indeed, it turns out to be the most impossible idea and possible. This is what we’ve:

Selected HMW: How might we improve the self-checkout process without the audio prompts?

Selected HMW: How might we improve the self-checkout process without the audio prompts?

Reflection: Asking the correct HMW is very crucial to give us an opportunity to think creatively to solve the problem at hand.

During brainstorming, it helps that all of us are open. It enables us to generate different options for solving our problem at hand without judging. We get more momentum as we go through more ideas including wild one 🤪. Wild ideas can also throw us down the path of distraction, however we stay on track and truly enjoy the fruitful session. We learn that great ideas rarely come from silos while focusing on quantity over quality.

On Worst Idea Possible, it was very uncomfortable but it led us to take a different lens and unleash our creativity to generate ideas working towards common good.

Prototype

To fail quickly and cheaply

Prototyping is an integral part of UX Design and Design Thinking because it allows us to test our ideas quickly and improve on them in a timely fashion. Creating quick and dirty paper prototypes allows us to test a number of ideas without investing a lot of time and money up front — “To fail quickly and cheaply”.

There are many prototype options and we proceed with a low-fidelity, multiple screens and call-to-action interfaces paper prototype to complete a user task.

0_0-0DwNe9seRZeZz-.jpg

We start off with sketches before the paper prototype. Sketching is important; it has helped us to discover the best ideas and solutions before starting on a much complex prototype.

Based on the sketches, we start working on the paper prototype with basic materials such as A3-size paper, coloured post-its, adhesive tape, scissors and markers. Time given was approximately three hours to build the prototype. We create paper prototypes mimicking the screens with placeholders and interfaces. Red post-its to highlight areas that require call-to-action while green indicates interactivity. The rest are static functions.

Given the short timeframe, four brains crank on the prototype, with some disagreements we are arrive at a common ground and agree to settle on these ideas:

  1. Progress indicator — a sticky interface that will appear throughout the screens. The intention is to inform the user that a task is in progress and provide an estimate of how far through a task has progressed. Reassuring that the self-checkout is working but not stalled or waiting for user input.

  2. Video Cues — a sticky interface that will appear throughout the stages of the self-checkout. The intention is to allow users with hearing impairment or challenges be able to continue with their task at self-checkout. It will be an aid for persons communicating primarily in sign language. Sign language for the hearing-imparing and dialogue for the members of the public, especially the seniors, who may have hearing challenges and are non-tech savvy. It comes with an option to turn on or off the audio.

The current user interfaces will be still intact including visual cues on the current task, list of items scanned for purchase, total amount due and call-to-action interfaces to select membership and payment mode.

Our first paper prototype. Red post-its to highlight areas that require call-to-action while green indicates interactivity. The rest are static functions.

Our first paper prototype. Red post-its to highlight areas that require call-to-action while green indicates interactivity. The rest are static functions.

Reflections: Prototype on paper sounds like going to stone age. However it helps to understand deeper with the help of simple tools. It has helped us to realize concepts, test designs and early discovery of design problems. With paper prototypes, it gave us the advantage in focusing on the important things that can be quickly modified.

Test

Testing is never a waste of time and we understand truly of having one.

In a group of four, each of us continued the testing remotely. We searched for volunteers to take on the test. During testing, it was extremely important for each of us to get feedback on our product prototype. It allows us to refine solutions in order to build better and continue to learn about our users. Before we proceeded with the user testing, we highlighted to the users that the test was not based on the user but only on the product itself. This is highly important to minimize discrepancy.

3 important tasks were taken into consideration when users go through the prototype — scenario, goal and user testing. In this case, we planted the idea of the Persona that we created earlier, onto our users:

3 important tasks and scenarios.

3 important tasks and scenarios.

We have 5 users with broad profiles for users testing and their feedbacks and comments:

User #1, Age 40, Male

  • face difficulties to start as the paper prototype screen was filled with many items. Going through all of them was tedious and the process was unpleasant after the welcome page.

  • comment that the membership and payment screens were straightforward. It was easy to understand.

User #2, Age 62, Male

  • face difficulties reading in English.

  • struggle throughout the process due to bad layout design.

User #3, Age 27, Male

  • happy with the video cue that caters to both the hearing impairment community and also the mass.

  • “what if I have one basket full, 20 items of small products, each of different brands, will that be allowed”.

  • “If I missed out on the scanning of my membership card, will I be able to go back to do it?”

User #4 — Age 32, Male with hearing impairments

  • having a hard time understanding each screen and interface. “I don’t understand, very messy”.

  • When asked if the video is a good function to have, he said “Yes. whatever you do for the deaf community you will also do for normal people. So it’s a win-win situation”.

User #5 — Age 27, Male with hearing impairments

  • happy with the video cues.

  • mention “it’ll be nice to have this for my community and I will feel more confident in using self-checkout”.

User #6 — Age 35, Female

  • face challenges looking through the items on the screen before it gets to understand what to do next.

  • glad that the membership and payment screens are much easier to comprehend.

Reflections: Testing is never a waste of time and we understand truly of having one. Often it is scary 😱 because users are tested on a far from finished product. It helps us to gain valuable insights from users on how they use the product to complete their tasks. This process allows us to iterate, including radical changes, to enhance user experience.

Iterate

The first idea isn’t always the best version. Although it can be but rare; most of the time terrible.

Based on the feedback received from the users, we re-work and add additional solutions on the prototype to address concerns raised in the test stage:

1. Re-layout the prototype and declutter and simplify for an easier user journey.

2. Scroll bar for scenarios when there are more items being bought. The prototype is to improve ten rows of items on the self-checkout screen. A scroll bar will only appear when the item exceeds more than ten items.

3. ‘Back’ and ‘Next’ options allow users to go back to the previous step before proceeding to the next process. However, both ‘Back’ and ‘Next’ options will only be activated at certain stages to aid users with the process journey.

4. Provide multiple language options for English, Mandarin, Bahasa and Tamil. After much consideration as a team, we decided to scope the study and point #4 will be done if we are given more time

Reflections: The first idea isn’t always the best version. Although it can be but rare; most of the time terrible. Just like this report, many iterations are made to improve. It does not take thousands of years but we learn from it and create solutions.


Proposed User Experience (UX) design

0_-QDeNhUirTpiYrgq.jpg

With the feedback given at user testing, we re-work on the prototype and execute a simplified and goal-achieved version. We manage to validate these iterations with another round of user testing with some users from the first round. This time is pretty much better and well received.

User #3—Age 32, Male with hearing impairments
“Haha err. This is cleaner! I can understand clearly what to do now compared to the first one.. I feel like it’s dummy proof. Again, I’m excited about the sign language video. I think Singapore is backwards in terms of awareness about this compared to the EU”

User #4 — Age 27, Male with hearing impairments
“This one I like” — pointing at the video section on the screen.
“Ok lah I understand better now. Quite easy. But (the team) need to make it nice, add color all if not boring”.


Takeaways

What really kills our users is an overload of irrelevant interfaces.

Through design thinking, such as creating persona, customer journey map and prototyping, helps us to realise an easy to understand yet simple user interface is sufficient to help users complete his/her task. When that happens, it enhances user experience. What often kills our users is an overload of irrelevant interface that kills the experience.

To begin with, NTUC Fairprice self-checkout has continuously improved over the years. We relook at how the current design can be improved unlike an overhaul. The ideas of the progress indicators and video cues with sign language bolster the experience and confidence of the hearing-impaired users at the self-checkout. This works for the members of the public, especially seniors, who may have hearing challenges. It was well received by users who tested it and they are excited about it.

Thank you for reading!

Previous
Previous

Part 1 : UX Research on Mytransport.SG