ECR Software’s Self-Checkout System 🧾
Role: User Experience (UX) Designer
Timeline: Dec 2021 - Feb 2022
Software + Tools: Figma
TLDR: I redesigned a grocery self-checkout system for ECRS, a retail POS software company. The overall goal was to make the design more modern and clean while also adding in much-needed functionality for guests and customers.
ECR Software (ECRS) 💳
ECRS is a US-based, Certified Evergreen™ transaction and retail solutions provider, with a successful track record that stretches over 30 years. ECRS future-proofs local and regional retailers to win in today’s market while preparing them for tomorrow’s opportunities.
The Users 🧑🤝🧑
Self-checkout systems are used by customers of all ages, grocery store employees, technicians, and more. Since many different user groups frequently use the system, it needs to be easy to use and access. Whether an elderly man, busy mother, or bored teenager walks into the store, they should be able to quickly use self-checkout in an efficient and meaningful way. Store employees also need to be able to use the system to assist in troubleshooting, account setup, and other functions that make the shopping process easy for all.
Replacing Smiley 🙂
The request to create new mockups of the ECRS self-checkout system came from leadership wanting to replace an outdated system— Smiley, who has represented the brand for years. They wanted something cleaner and more modern, so Smiley was removed to make space for more information and key functionality needed in the self-checkout process. These new designs include employee and customer functionalities; the ability to create an account, check account balance, scan and checkout items, and more. I worked on this self-checkout design when I was working full-time at ECR Software (ECRS), being the only User Experience (UX) Designer in the company. I worked with a technical writer on the team to redesign each self-checkout screen page-by-page over a few weeks, constantly referring to the (at the time) current system layouts and designs.
Being the only designer at the time, I worked primarily alone on this redesign. However, I spoke with other team members to go about redesigning the self-checkout experience into something simple and easy to use in stores.
User Flows 📲
Creating these user flows helped me understand what use each page and process would serve. Having this allowed me to find and fill any holes in the flow as I pretended to work as a customer and employee using the system.
Pictured: two user flows for this system, one that shows the process the user would go through to checkout their items (typically done by customers/guests) and one that shows the process of accessing an account and doing things such as checking balance, adding money to an account, and viewing rewards.
Default Checkout Screen 💬
If retailers don’t want or have their own branding to be set up on the system, they have the option of selecting a default state for the system, which uses two colors chosen by the business. In the examples in this section, dark blue and orange are the colors used.
Potential Research: How do we know this design is better? 🥫
As of now, we don’t. However, user testing would be rather easy. Whether observational or through screen time tracking, a good test would be to see how long it takes people of different age groups and backgrounds to complete the same task on the new system versus the old system. For example:
How long does it take an 18 y/o, 30 y/o, and 60 y/o to check out five items? Ten? Fifteen?
On average, how long does it take customers to create a new account?
How long does it take the same people to add $5 cash to their account?
How long does it take the newest and oldest employees to respond to a customer’s request during their shift?
On average, how long does it take employees to create an employee account? Are there outliers?
Doing usability tests to see how long it takes users to complete certain tasks allows us to see what design changes and improvements can be made so that common problems can be easily fixed.
-
Peripheral devices: For self-checkout systems to verify identity, accept payments, and complete transactions, the interface has to be set up to support and inform peripheral devices
-
Simply put, being the only designer is hard, especially when it’s your first time
Asking clarifying questions early on can limit trouble in the future
Keep in mind what people will likely do vs. what you want them to do
A good user interface can go unnoticed; a bad one will not
You can tell when something is designed by developers vs. designers
Don’t work over your design iterations, create new ones to track progress