Lu Gao · Follow
13 min read · Mar 14, 2019
--
Austin, TX — HEB pilots its brand new self-checkout technology called “H-E-B Go” around Austin.
It’s widely acknowledged that checkout-free approach usually involves revolutionary concepts and latest technology in the retail industry. As the largest retailer in Texas, HEB is not the first one to implement this concept. Before that, Amazon launched the “Amazon Go” in Seattle in January 2018, and it adopts real-time cameras to track customers’ movements and activities with heatmaps and artificial intelligence to analyze people’s purchase experience.
Compared with Amazon Go, HEB Go doesn’t incorporate advanced technology such as AI, but it is simpler, more flexible, and it’s easier to be compatible with the original stores by providing customers with multiple options when checking out.
I was very excited to see H-E-B Go launching in Austin and have been impressed with the app. I started using H-E-B Go in November 2018 and have used it several times since then. By conducting guerrilla testing and using it myself, I discovered that it provides a brilliant in-house solution to enhance service, but still needs some work to improve the user experience.
I’m not in any way affiliated with H-E-B and am just a frequent shopper who is extremely curious about the real-world design and eager to create cool user experiences to improve our lives!
‣ Examine and evaluate the H-E-B Go shopping’s user experience design
‣ Address opportunities for improvement
‣ Redesign the User Flows and Journey Map for the checkout process
‣ Redesign the interface of H-E-B Go machine
Lakeway H-E-B, Austin, Texas, 2000 Ranch Road 620S
- The Onboarding and Sign up Process
The first step is to download the H-E-B Go app, just like any other self-checkout mobile apps. Then the app asks the user to sign up for a new account or sign in with an existing account.
The onboarding process is simple and straightforward. These flat design illustrations informed users the basic features and steps they will undergo in the shopping and checking out process.
There are 3 main sections in the onboarding tutorial. As a user, you can:
(1) Either scan the bar code or weigh product at a scale before adding items to your cart;
(2 ) Visit an H-E-B go checkout station to pay directly with your mobile device;
(3) Add a payment method such as credit card information to the account beforehand, so that you are able to exit the store by just scanning the QR code generated by the mobile app (for a new user).
2. The initial store searching before shopping
After signing in, the app automatically detects the store name based on the user’s location. Notice that there is a small line says “Find participating H-E-B stores” on the screen, the user is allowed to explore the map first to select any H-E-B store with H-E-B Go service.
3. The in-store shopping experience
The in-store shopping experience is smooth and pleasant, and there are no frictions to scan and weigh products when moseying around. For new users, it doesn’t take a long time to understand how the app works and users don’t need to tap around to try things and figure it out. Everything is designed straightforward and effortless. Because users’ tasks are clear enough:
(1) Scan the barcode via the mobile app;
(2) Input quantity in the mobile app;
(3) Weight product via the scale;
(4) Scan the barcode of the printed price tag via the mobile app.
Users tend to rely on the old shopping habit and experience and learn from it. The mobile app provides a familiar context and environment so that users don’t need to explore more information and think a lot.
Particularly, the UI asset for setting item number is well designed. Users can be well informed all the time with adding more items in their carts since the app keeps running total number for everything. This feature is helpful to keep the shopping on a budget. Meanwhile, it’s easy to delete the items or change the quantity of them, which gives users chances to “redo” the shopping activity.
As for alcohol shopping, I found alcohol such as beer and red wine are recognized as restricted items after scanning their codes. It requires an HEB employee’s permission to continue to check out.
The H-E-B Go system is very environment-friendly. As clients are allowed to shop around and check out by themselves, so they can easily put everything in their reusable bag, which can reduce the waste of plastic bags.
4. The checkout anxiety
The top pain point that I identified is checkout with coupons.
The top pain point identified is checking out with coupons.
When completing shopping, users proceed to the checkout area and scan the QR code on the H-E-B Go machine. The mobile app then creates a Checkout page with the total price, sales tax, and payment information.
Unexpectedly, after tapping “Yes” for the question “Do you have coupons?”, the shopping list on the user’s mobile phone disappears without any warning, which causes anxiety and uncertainty. People will immediately question themselves like:
(1) Where is my shopping list?
(2) Oh, no! Should I have to re-scan everything again?
(3) Did I tap a wrong button?
(4) Is it possible I can go back to the previous step?
Nobody wants to scan all the items all over again, especially if you have a great number of items in the cart already.
“People are afraid of making mistakes. Failing makes you worry about what other people think about you.” — Psychology Today
After around 3–5 seconds, the item list shows up on the checkout station, then users realize that the system is working on connecting and transferring the information from the mobile app to the checkout station.
The coupon scanning is not smooth either. Apparently, a user’s task includes:
(1) Tapping on the smartphone;
(2) Pressing the button on the machine;
(3) Scanning the coupon, etc.
It is very challenging to handle all the tasks simultaneously without a clear and logical guideline to follow.
Although the director of public affairs of H-E-B stated that the system allows customers to walk around and scan items as you go, the reality is that the final checkout task needs plenty of actions, such as several times of pressing, taping and scanning. It’s even more confusing when customers need to use coupons or purchase alcohol.
I observed a few customers performing checkout tasks and asked them what the most challenging part is when completing the shopping with H-E-B Go. Most of them mentioned that they are a bit confused about using coupons and buying alcohol, so they had to ask for the cashier’s help. Some of them complained that electronic coupons don’t work sometimes. But undeniable, all these customers stated that H-E-B Go is very helpful and it’s much quicker than waiting in line and check out at the cashier.
After talking with the employees who work in the H-E-B Go checkout area, I gathered the following insights:
‣ The retailer has been piloting H-E-B Go for a year, and there are 7 stores that have it. The pilot can gather customers’ shopping habit information and analyze the rate of system usage as well. The Lakeway HEB store launched two H-E-B Go machines 6 months ago, and the usage rate is 3%, which means only 3 out of 100 shoppers chose to use the machine;
‣ The system is based on people’s honesty and integrity. Although the employee said they have assigned people in the checkout area to check the users’ mobile app and items in the cart, but there is no way to know exactly if the customer has scanned all of them by a quick glance. Moreover, it is difficult for retailers to discern between maliciously actions and honest mistakes；
‣ As the employees stated, most frequently asked questions are about coupon handling and checking out alcohol. It’s hard to recover from the error of neglecting the “Do you have coupons” question and skipping that part.
Journey Map
To visualize the existing happy moments and pain points, I created a user journey map.
I divided the whole system into 3 sections: H-E-B Go Mobile App, In-Store Shopping, and Checkout. The user flow provides a clear hierarchy and a holistic understanding of the system.
The Mobile App and In-store Shopping Sections:
The Checkout Section:
Issue 1. It takes 10–15 seconds to build an order.
When finished shopping, users proceed to the checkout area and hit the “Checkout” button to scan the QR code from their phone to check out.
Issue 2. The system does not always keep users informed during checkout.
While the user’s mobile phone is connecting with the checkout machine, glitches happen inevitably sometimes. Technically, this awkward situation arises when the NFC (Near-Field Communication) connection delays a bit between the devices. Users need to know their current context in a system, and the application should notify the user what is happening by appropriate feedback.
“The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.”
— Jakob Nielsen <10 of Jakob Nielsen’s Heuristics of Usability>
My Recommendation:
(1) It makes the most sense to use a dialog to inform users before continuing. I designed this interface below followed by an animated loading indicator, thus users are able to expect the system procedure without any panic.
However, first-time users may feel confused about how the system works and connects, thus errors often occur when they engage with the interface. I would rather for the mobile app to keep the checkout screen up instead of showing the “Your Cart Is Empty” screen. Therefore customers would feel safe and always have a chance to recover from user errors and connection failures.
(2) Create a breadcrumb trail on the checkout screen to inform users where they are and how far they have to go. A study (Minjung Koo and Ayelet Fishbach, 2010) has shown that people are more likely to be motivated to finish a task if they see what remains to be done, rather than what they have done. A breadcrumb process on the checkout screen can effectively inform users about their position and how far they can eventually complete the task.
Issue 2. The task of scanning coupons frustrates most of the users.
The coupon scanning process is a nightmare. Obviously, the checkout frictions occur due to inadequate understanding of the user task flow. A complex task like checkout usually contains multiple sub-tasks that require users to finish step by step so that they can eventually reach the endpoint. As the checkout user flow with coupons shows below, each sub-task involves 3 interfaces to handle: user’s mobile app, the coupons, the checkout machine. Inevitably, users may feel confused and frustrated in handling them together.
The image with arrows and numbers below has shown the sequence of how a user is working on the task. Without any similarity and the proximate relationship between elements to aid in understanding the information presented, users have to look and search from left to right, from top to bottom.
Normally, users’ attention will be distributed the most on the main screen. After spotting the words “Please scan paper coupons” on the top, users are eager to find the place to scan coupons by shifting back and forth from the checkout screen, the smartphone, and coupons. But the scan slot (location 4) is detached from the main screen and located beneath it. When the system is ready to scan your coupon, there is no sign to inform users where the scanner is.
According to the Gestalt grouping principles of similarity and proximity, people perceive elements by organizing similar patterns, objects, and shapes into whole forms that we can understand.
My Recommendation:
(1) Add an animated arrow on the screen of the H-E-B Go machine to let users know the location of the scanner;
(2) Consider about installing a signal on the scan slot with blinking light to catch users’ attention;
(3) The “Used Coupons” slot is a distraction and may not be necessary for this context. Users usually care about if the coupons work, and once the discounts are applied, they can simply toss them into the trash can near the checkout station.
(4) An alternative way to redesign the checking out process:
If the user interface is designed based on users’ shopping logic and task expectations, it’s possible that the user flow of handling coupons be simplified by less than 4 steps. Most importantly, users don’t need to look up and down to look for the place to scan coupons. Instead, they are able to continue scanning coupons using their phones under the guidance of the app. Because they have already done that many times while shopping around in the store to scan products, they have been proficient in scanning already along with the shopping.
In this case, the redesigned user flow would look like the image shown below:
Issue 3. The mobile app should have contained a shopping list feature so that users can remove the items from the list while scanning the products into the cart.
More and more people value time efficiency and try to stay organized, and customers who shop with lists are likely to follow a healthy diet. Compared with similar mobile apps such as Amazon Go with a customized shopping list function, it’s necessary for H-E-B Go to build a similar one for users to check off from the list as shopping around.
This statistic depicts the results of a survey conducted in 2015 by the Food Marketing Institute. U.S. consumers were asked if they typically make shopping lists when buying groceries. The findings present that 72 percent of Millennial shoppers create a list for their grocery shopping trip.
Since the potential users of H-E-B Go are assumed to value time and money spending, the shopping list could be one of the most wanted features when using a self-checking system. With a built-in function that allows users to customize and save the shopping list before coming to H-E-B, people can avoid switching screens between a shopping list app (or a note taking app) and the H-E-B Go app.
My Recommendation:
Incorporate a shopping list feature that allows users to plan their shopping before going to the store. Also, provide shoppers the location for each category so that they can easily find the right aisles and pick up everything on their list.
Overall, from a shopper’s point of view, it’s ecstatic to see an option to skip the line and make shopping easier and more efficient.
Interacting with a brand new system can be intimidating, especially for people who are not tech savvy. Shoppers are unclear where to scan the coupons because they find it confusing and unsure where to go on the checkout page. I believe a new checkout interface to scan coupons will allow customers to quickly and easily identify where to go. In that case, the mobile app could be called the Scan&Go app.
However, all the assumptions above need to be measured and tested many rounds before eventually validating. Well, all the design decisions need to have rationales to back up and they also need to be iterated until the outcomes are good enough. Creating an end-product is expensive. The whole system combines not only the hardware but also the app that users need to interact with all the time. The end-product system should be able to foresee the challenges that users may encounter while interacting with the system. Even small inconsistencies in user interface components, interaction patterns, and connections between devices can cause frustration and users’ friction.
Therefore, observing our target users in their own environment performing tasks and activities where they interact with the end-product is crucial for designing a successful system.
Thanks for reading! This is my very first article about UX/UI design, and I appreciate your valuable feedback and claps👏🏻 :-)
My other article:
I’d like to hear from you. Feel free to check out my personal website :
