INTRODUCTION
Transforming self-checkout kiosk into a simple & enjoyable process for supermarket customers.
This is a Design Thinking project done in collaboration by 3 UX designers: Sean Neo, Herman Lim and Darius over a period of 7 weeks. During this journey, the team immersed themselves through the lens of the users, synthesizing their findings and emerged with unique approaches to resolve the problems users faced.
“Winners don’t do different things;
they do things differently.”
~ Shiv Khera
Environment
The team has chosen to focus this project on NTUC FairPrice Co-operative Ltd (NTUC). NTUC is Singapore’s largest grocery retailer with 230 outlets island wide (Statista, 2019). In most of their retail outlets, self-checkout kiosks are installed to facilitate as another alternative for a quicker check-out.
UX Research Methods & Tools
During the project period, the team is subjected to Safety Distancing measurements due to COVID-19 outbreak. As such, we have decided to employ a less intrusive observation research such as ‘Shadowing’.
The team also shares their progress collectively on an online whiteboarding collaboration platform, Miro, which enables the creation of UX tools such as empathy map, affinity diagram, user persona and user journey map.
User Pool
Interviewees were selected from around our closer contacts such as friends and family members to prevent unnecessary exposure to the general public due to COVID-19 considerations.
DESIGN THINKING
What is Design Thinking?
Design Thinking commonly fall into the categories of either a Process, Mindset or even Toolkit. (Gibbons, 2018, Design Process, NNGroup)
Referencing from the diagram above, Design Thinking is a non-linear, iterative process that focuses on 5 key stages which our team has utilized throughout this project.
Empathy
We immersed ourselves in what the users are experiencing by observing them in their most natural form in the context of the project.
Define
To better understand our users’ pain points, we synthesize the data that we have gathered and started connecting the dots to form the bigger picture.
Ideate
The team brainstorm for ideas without judgement at this stage valuing quantity over quality with the intent of sparking new creative ways to solve a problem.
Prototype
We pursue our solutions by creating simple low-fidelity wireframes and eventually turning them into paper prototypes.
Testing
In order to understand if our solutions make sense, we schedule a pool of users to test it, give us feedback and for us to reiterate and improve on it.
EMPATHY
Understanding the User
Before the commencement of the project, the team members each visited a NTUC and have personally experienced what it was like using the self-checkout kiosk.
The self-assessment began at the queue while waiting for our turn to the kiosk, using the kiosk and ended when we packed our purchases and left the store. This is an immersion process that allowed us to have a glimpse of what users might be going through themselves.
Empathy UX research techniques
There are various techniques that we could utilize for empathizing based on the project requirements. In this scenario, we have started out mainly with Shadowing, observing other users from a distance.
We consolidated all our other observations and findings into an ‘Empathy Map’. An empathy map is a matrix quadrant that divides into what the user Does, Says, Think and Feels.
Usually we get to see the user doing something first, they might say something along the way, we then make assumption on what they might be thinking and lastly, the hardest part is to imagine how they are feeling.
Based on our observations, some of the key user behaviors are exemplified as:
- Confusion with the on screen instructions.
- Social pressure while using the station.
- Preference to be left alone to complete their purchases having little to no interactions with others (eg. earphones in their ears).
- Annoyance to error messages.
DEFINE
Dealing with our observations
After gathering all our observations, we decided to visualize our findings using various UX tools, Affinity Map, User Persona and User Journey Mapping.
Prioritizing the pains points
From our findings, there are multiple pain points that the users faced. Having an affinity map, allowed us to cluster our findings into common headers and rank them accordingly to what user finds to be the most frustrating.
In the diagram above, we can identify that Packing, Scanning and Kiosk errors are the main areas that users are having the most issues.
Persona
Based on our research, we created a user persona to visualize the needs, experiences, behaviors and goals of our user group. In this case study we focused on the tech-savvy millennials as one of NTUC’s target audience.
Customer Journey Map
The customer journey map was used to visualize the entire self-checkout out process based on our persona. It gives clarity and helps to highlight actions, thoughts and emotions of our users when they use the self-checkout kiosk. Customer journey map is also used to uncover insights and opportunities for ideation.
IDEATE
Turning pain points into solutions
After gaining insights from our users, as well as defining our area of focus, we then move on to Ideation.
In this process we explore a broad range of possibilities and find solutions that meet the needs of our user. We do so by employing various ideation methods such as generating HMW (How-might-we) statements, Worst Idea Possible method as well as the Four Category method.
Generating HMW (How-might-we) statement
We frame our questions by using HMW statements to explore new ideas and solutions. This method encourages explorative thinking and encourages collaboration among the team. We are also mindful to craft our questions broad enough for innovative thinking but narrow enough for us to make meaningful improvements to the current system.
After exploring a few HMW statements, we decided to focus on exploring ways to better guide customers throughout the checkout process.
Worst Possible Idea Method
We made use of this method to examine our ideas, challenge our assumptions as well as highlight areas of the checkout process that matter to our users.
Four Categories Method
After exploring many new ideas, the four categories method helps to evaluate and refine solutions used to improve the current self-checkout process. Our ideas are broken into categories of Impossible, Improbable, Probable and Possible.
Ideas with stars are our point of focus for our first prototype design. Ideas would be iterated or added based on feedback from our usability testing.
PROTOTYPE
Bringing our ideas into realization
After all the massive brainstorming, comes the next step in the design thinking mindset.
Prototyping is the section of the Design Thinking mindset, that allows us to test our ideas quickly and improving on them.
Prototyping Techniques
There are 3 ways of rapid prototyping:
- Sketching and Paper Prototype
Sketching & paper prototyping is a quick and cheap way for UX designers to translate their ideas into reality.
Through sketching and paper prototyping, we can show and give users (in the testing phase) a taste of the idea, even going as far as allowing them to interact with the paper prototype.
But you may be thinking, how would a user interact with just a piece of paper?
The great news is, classic arts and craft allows us to create mock ups of digital features, such as drop-down menus being simulated by creating an accordion fold paper, or making a “scroll-able” screen just by putting an elongated paper through an added front layer paper.
Paper prototyping also allows for an easier transition into digital prototyping, as it acts as a foundation for future improvements to the product.
- Digital Prototype
Digital prototyping is a process of exploring an idea by building an interactive experience.
Explaining abstract ideas and words can be tough, and by creating an interactive design that other people can experience themselves, it can really help bring an idea to life.
Therefore it can be really helpful when you are pitching an idea, explaining a design detail to an engineer or running your own user studies to validate your designs.
If there was a way to summarize digital prototyping, it would be as similar as to how architects build models for engineers to create.
- Native Prototype
Native prototyping involves writing codes and done using real devices and data to bring your ideas to life.
This method of prototyping provides a more realistic experience for your users, thus collecting more accurate and valuable feedback.
However, as mentioned earlier, native prototyping requires strong technical proficiency in the computer languages that you decided to prototype with.
Our Decision
For our project, we chose Sketching & Paper Prototyping as our method.
This is because it allows us to test our ideas without having to invest a lot of money and time.
Here are some examples of the first draft our team created for the project.
TEST
Time for Feedback
At this point, now that we have a physical product of our ideas, it is time to bring it out for a test run.
We have now arrived at the Test section of the Design Thinking mindset.
Testing allows the team to have a chance to receive feedback on our solutions/ideas as well as our prototype.
This process allows us to refine our thoughts, solutions and ideas, as well as giving us the opportunity to learn more about our users and to make sense of their reactions and emotions, because we get the chance to see them face to face.
Creating Tasks
To start, we first have to create tasks for the user to accomplish. These tasks need to be Realistic and Actionable.
While creating these tasks, it is important that we the designers avoid giving clues in the tasks to the users.
The task we crafted for the users were as such:
- Use the checkout system to complete your purchase
- Some items will not have bar codes on them, find a way to include them in your basket
- During your checkout experience, try to cancel one of your scanned items
- While checking out, find out how to sign up for membership perks
Creating the Scenario
After ironing our tasks, we moved on to creating a scenario from the tasks.
Scenarios help to provide the setting and context for the users. This gives the user clarity and purpose while carrying out the tasks.
Here is the scenario that we crafted for the users:
“You are buying some fruits for a party, after gathering all the items and whilst queuing, you noticed signboards telling you that members get a 5% discount. While you are scanning, you realized that a fruit does not have a bar code on it. Also, you received a call from your family to cancel one of the items at the last minute. Using this checkout system, try to complete your checkout process.”
After the users carry out the first scenario, our team decided to carry out a re-run of the scenario with a twist.
We added an option for the user to go through the checkout scenario as someone who is already a member to test our checkout system for members.
The Test
Now with our scenario crafted out, it’s time to hit the streets to get feedback from users.
Our team carried out a test run with 5 different individuals of backgrounds that were similar to our persona, Ming Hui.
Feedback
After carrying out our tests, we were able to gain valuable feedback and insights that we never could have thought of during our ideation process.
From our testing, we found out that a bulk of the user problems came from our E-Payment section of the prototype.
For example, when users carried out using payment from the membership section, we lacked a confirmation screen, which made users feel angry because they were worried about the situation where someone unintentionally tapped on the button and the payment went through nonetheless.
After reviewing the feedback, we took our prototype back to the drawing board, thus going back to the start of the design process once more.
ITERATION
Back to basics
After getting the necessary feedback from our users, it is time to refine our prototype.
It is crucial that we rebuild our prototype with their input because being able to meet our users needs is our main purpose.
Here are some of the screenshots of version 2 of our NTUC checkout prototype:
REFLECTIONS ON OUR WORK
“Throughout the entire redesign of the self-checkout process, we saw how the iterative nature of Design Thinking helps create empathy among us as well as uncover insights that truly matter to the users. It reminds us that the process of finding solutions are non-linear and its always important to get feedback from our users. The road to continual improvement never ends and I am glad to be on this learning journey with the team.”
~ Sean Neo
“Collectively as a team, we thoroughly enjoyed every moment we had with the project. Throughout the entire design thinking journey, only one thing matter: The User.
Design thinking is an iterative process and we experience it first hand when we were at our prototyping phase and we were still going back to our affinity map again to see if what we are designing fulfils the original project intent.”
~Herman Lim
“This process has been an eye-opening experience. Though it’s just only the start, I’ve learned so much, from thinking only inwards (myself) to thinking about the users and empathizing with them.
To me, my most enjoyable moment is the culmination of all the “eureka” moments whenever the users tell us something new about our product. It’s almost just as satisfying as getting a reward for completing a quest.
I can’t wait to experience and learn about what else is in store for us, as we continue to grow in this field.”
~ Darius Goh
Thank you for reading!
A Collaborative Project By:
We had much fun completing this project and certainly hope you enjoyed reading our article too! Be sure to 👏🏽 and leave any comments and suggestions as well. Thank you for reading.
