Instore Markdown Optimization
Role: Product Design Lead
Organization: Loblaw Companies Ltd. (Retail)
Device: Zabra Handheld Device
Type of Project: B2B
Tools: Figma, Miro
Overview
Zebra handheld device is used by more than 180k store clerks across Loblaw to mark close-to-expiry products down by a certain percentage.
During the research, I found out that we cannot change the UI of the device as it's being supported by SAP and any new design must respect the design library and components that the SAP utilizes. Another problem was that the UI that was being used on this device was not responsive and was originally designed to be used on a desktop.
Below is the research I conducted to understand the usability of this device.
Problem Statement
The markdown process used in stores was very static, potentially leading to reduced profit margins or low sell-through rates. In addition, the lack of system control to monitor or track the number of "at-risk products" stickers could lead to misuse of stickers and a lack of reporting on the sell-through or performance of markdown activities.
​
Goal
The primary objective of this project was to enhance profit margins, minimize labor efforts, and document cost savings associated with product markdowns in stores. This was achieved through the implementation of a decision support tool designed to assist store clerks in efficiently markdown products.
​
What We Achieved
-
Significant time saving of 30 minutes per store clerk.
-
Customer checkout and payment processes were completed 30% faster as a direct outcome of the redesign.
-
Customers showed a 35% increase in acceptance of markdowns following the project's redesign.
Empathise
Understanding and empathizing with users is a fundamental aspect of user experience design. It involves the ability to comprehend and relate to the emotions and needs of others, which is essential when designing products or services for users. To address the usability problem of this device, we conducted interviews with multiple store clerks to gain insights into their current experience and markdown processes. Based on the user interviews we gathered valuable insights and organized them into an affinity diagram to uncover common themes and patterns.
The recurring observations that emerged were:
-
The content was very difficult to read as the UI was not designed for small screens
-
The keyboard was disappearing frequently after each tap
-
The scanning UI was not easy to understand
-
There was no visibility to the expiration date of the product in the UI
-
Users had the freedom to input any price they felt was appropriate based on intuition, leading to potential loss of profit margin.
In this phase, we analyzed the insights gathered during the empathy stage and developed a perspective rooted in the user's requirements. We articulated the problem we aimed to address and identified the specific audience we intended to assist. Additionally, it's essential to establish criteria for evaluating the effectiveness of our proposed solutions.
​
Personas
From our research, we defined four main user personas:
-
General store clerk
-
Customers
-
Cashier
-
Operations
Now that the problem, the goal, and the personas were clear, it was time to start the design thinking process.
Design Thinking
Design thinking is an approach to problem-solving that prioritizes the needs and experiences of users. It typically involves five key steps: empathizing with users, defining the problem, generating ideas, creating prototypes, and testing solutions. Rather than following a strict linear path, it's a cyclical process where stages can be revisited and iterated upon as necessary.
After getting a better understanding of the device, it was time for myself and the team to do a discovery workshop and define the goals, requirements, and constraints of the project. The process was a 5-day and 15 hours workshop with 6 people from different departments and the goal was as follows:
-
Define the problem or challenge
-
Understand user needs and goals
-
Understand the business needs and goals
-
Generate ideas and solutions
-
Create a user journey map
-
Establish the project's scope and priorities
-
Foster collaboration and alignment
Usability Testing
After defining objectives, developing test scenarios and tasks, recruiting participants, selecting testing methodology, and creating a hi-fi prototype, it was time to test the ideas with actual users.
The usability testing was conducted in two Loblaw stores with 5 participants representing our user personas. These are the test scenarios we asked the participants to complete as we observed and evaluated the design strategy and UI:
-
Sign in screen
Task:
Sign in to the device, using a sample user ID and password.
Goal:
- Testing the new responsive design. The previous sign-in page was designed for a desktop and it was shown on the top left side of the screen and clicking on the input fields was a challenge, especially for fat-finger store colleagues.
- Testing the SSO sign-in experience
- New keyboard design with much bigger buttens for a better user experience. Other functionalities that users still needed to use because of SAP could be accessed through the FUNC button.
-
Menu screen
Task:
Navigate "Scan".
Goal:
- Testing the new tile design for the menu screen regarding "navigation speed" and "ease of clicking".
- Testing the new tile design menu in terms of perceptibility, especially for non-tech-savvy users.
- Testing the new tile design regarding readability.
-
Scan screen
Task:
Scan a sample product.
Goal:
- Testing the usability of the new simplified scan page.
- Testing the new feature to see scanned products at the bottom of the scan area.
- Testing the new feature of accessing more details about the scanned products on the same screen.
- Testing the ease of use of the manual barcode input in terms of input field size, ease of navigation, and new keyboard design.
-
Timeout screen
Task:
Feedback on the Timeout screen.
Goal:
- Testing to see if users prefer to get a timeout warning.
- Testing the overall experience on this screen (UI, Copy, Buttons).
-
Scan history screen
Task:
Select a product and adjust the price.
Goal:
- Assessing whether the page's title and icon assist users in confirming they are on the correct screen.
- Testing the amount of information provided for each product
- Testing the presence of the product's image to see if it helps users speed up the process
- Testing the timer indicator to ensure users comprehend its significance.
- Testing the inclusion of the expiration date to determine its utility on this particular screen.
- Assessing the utility of the inventory section to understand its potential benefits.
-
Markdown screen
Task:
- Markdown the price using the "Smart markdown" and print the label.
- Markdown the price using your assumption and print the label.
Goal:
- Testing the hierarchy of the screen's data. As per discussions with the analytics team, the markdown price is influenced by both the quantity and expiration date. The objective is to ensure the user comprehends the process seamlessly.
- Testing the details of the product and see if anything needs to be added/eliminated
- Evaluating the dimensions of the dropdown container and calendar buttons to ensure they accommodate users with larger fingers.
- Testing the ease of use of the new calendar design.
- Examining the wording of the suggested markdown price "Smart markdown" to determine its impact on the frequency of its usage.
- Assessing the restriction on user input for the final markdown price. Previously, users could input their own estimated price, but now they are constrained by a predefined percentage.
​
Project Outcome
The redesign led to a notable increase in customer satisfaction, as the device's improved usability made transactions smoother and more efficient for store clerks. This speed improvement resulted in a significant boost in the organization's revenue.