HEB app UI/UX Study
I choose the latest comments for month of August to capture a snapshot of feature(s) being used by the bulk of the users.
From Apple app reviews:
- 39% (32 comments/82 comments) used digital coupons and have received errors, due to crashes/glitch, etc.
- 20% (17/82 comments) created shopping list(s) with the app
- 13.4% (11/82 comments) wanted to change store location (because user is at different store than their usual store) and wasn’t able to.
This data from Apple reviews confirms a Nielsen study (pg. 18), suggesting upward trend toward coupon and shopping list usage in shoppers.
Aside from glitches and crashes, users became frustrated with the app because it did not function well.
“digital coupon are inconsistent and sorting them or trying to search for one is a nightmare.”
“app is not user friendly. Please invest in more user friendly interface.”
“list building is horrible.”
“There is no way to shop easily from coupon or the ad.”
This process study is based off this article (https://smashingmagazine.com/2014/11/a-guide-to-conducting-a-mobile-ux-diagnostic/) since the HEB app has been released. This quick evaluative method identifies problems in the app or website and serves as a starting point for redesign improvements.
Personas are used to establish insights into the psyche of the HEB app user. (For this process, I started with one).
June B Profile:
- works as a Sales Manager for a high tech start up company.
- has two elementary school age children with after school activities.
- has less time for grocery due to work, family and activities.
- prefers HEB (vs other grocery stores) because HEB has extensive locations. She can pick a location that are convenient for her to shop. HEB app is handy for her to look up food availability and create a shopping list.
- is interested in curbside and delivery as option.
Shopping List: June likes to have a shopping list ready weekly so that her family is fed with healthy foods. She can create her shopping list in her spare time, in between kids activities and while on the go.
Locations: June finds location look-up useful when she has to buy last minute items/snack for her kids while on the go.
Curbside: She hasn’t tried this service yet. She wants to be able to place an order and pick up at her convenience, especially around the holidays or busy work schedules.
Coupons: If the store has coupons for products she buys anyway, she wants to use them and save money.
This is a user flow of her process of putting together a shopping list using the HEB app. It is broken into 3 parts:
- user evaluates whether login/registration is required for creating a shopping list
- shopping list creation
Some of the problems June B. came across:
- LOGIN on Left top corner of the app. Most app LOGIN/SIGN IN is located on the top right corner or bottom right corner.
- Shopping list creation requires user to register and open an account. Why can’t she generate a shopping list as a guest?
- Sign up took two tries. Process was not quick. Last name was optional on the sign up form, which resulted in an ERROR and another try.
LOGIN on Left top corner of the app is not where you expect it to be.
Both Log In and Register are colored buttons, no distinction preference of Log In over registration
Last Name optional but after submitting without last name…
Error when user did not enter last name, which is optional
June wanted to make chicken pot pie.
HEB app instructed June to start adding to her shopping list via the search function.
- Search function is not predictive. You have to spell the item correctly or the wrong item shows up.
- Search results in a long list of items, but no sorting or filter.
- Extra ‘add this item to shopping list’ under search function is confusing . Why is it there? She is already looking at ricotta items.
- Selected item does not have a weight or volume listed. Only after item is added to shopping list does the weight/volume show.
Confusing or missing info: no weight/volume info, no search filter or sorting, extra list option? where do you add more quantity of one item?
Weight is shown after item has been added to shopping list. If item is wrong weight, user has to figure out how to delete item and re-add correct item to list
June is curious about the “+ Ground Pork option.” She adds it to her shopping list.
- Confusing hotspots: ground pork has 2 selection areas resulting in 2 different results after selection.
- selection 1 allows for simple shopping list, change in quantity and add a note. However there is no indication that you can make changes.
- selection 2 gives a list of ground pork options for selection
Ground pork is selected
2 selection areas for ground pork leads to 2 different screens.
Selection 1. After selecting ground pork, ground pork item is shown. Quantity and Note can be edited but no indication is shown that you can do this.
Selection 2. After selecting specific product, list of product is displayed.
- Quantity change should be easily edited in a one step process instead of two steps (1. add item to shopping list 2. select item, change item quantity)
- How to delete an item on shopping list should be clear. Do you slide left/right? or check off to delete?
- Same name in 2 location leads to confusion. It is unclear and provides two different functions. Selector name should be clear in function. “MORE” on the right top hand side gives option to share or delete the shopping list. “MORE” is also used on home page bottom menu goes to user profile, user opt in notifications, etc.
- Brief confirmation note (item is added to shopping list) disappears quickly. No indication on “MY LIST” menu how many item is in shopping list.
No indication on UI on how to delete item until user tries sliding left/right or check to delete.
MORE at top corner allows shopping list sharing, deleting…
MORE on main menu leads to user profile change, etc.
In comparison, Sprout Supermarket Shopping List:
- Is easily identifiable by an icon
- Uses intelligent search function: mistyped or mispelled word (ricott) sends user to “ricotta” correct products page
- Shows user visually how many item are in the shopping list
- Gives user estimated cost as items are added to the list.
- Allows for item quantity to be adjusted and deleted.
- Notes can be added under an item, instead of going to another screen
- Shopping list allows for flexibility of add item as a list and coming back later to refine list with specific product brand.
- It needs a feature edit. There are options that are probably not used and could bog down the app–for example: recipes, ship to home
- It also requires an overhaul of its site architecture. Same selector name can be found in various locations in the app (ie. redeem coupon, weekly ad, coupon), which is not necessary if the user knows where he/she needs to navigate to find that specific function.
- It should integrate well with other functions, such as store locator and curbside.
- For user convenience, it includes ready lists on app download (curated shopping list and checklists, according to thinkingwithgoogle.com encourages app uses and brand recognition)
- It needs to work on its coupon function. Many app users from Apple app review complained that coupons were not working. According to Inc., “59% consumers say their opinion of a retailer would be enhanced if they were to offer coupons and offers that could be saved to their mobile devices.“
HEB Curbside has made strides in addressing some of HEB app shortcomings. Specifically, it
- made it easier to add and remove items to the shopping list
- uses intelligent search
- includes sort and filter with its search function
However, the HEB curbside website UI needs to be refined.
- Avoid using yellow/yellow orange with white text due to low contrast. Other HEB color substitutes can cyan blue or purple, since yellow green is used as ‘add to cart’ button.
- Left align body text vs centered for item descriptions and add left and right padding
- Place coupon icon/item purchase limit next to the item, not at the bottom of the item box/card. At a glance, I had mistakenly thought the coupon was for the item below.
- Rework the icons throughout the website so they look like they came from the same set and look consistent.
centered text and small text size on yellow orange background makes texts harder to read
yellow coupon icon should be within item box/card, especially if user is looking to clip a coupon.
icons are too small, details harder to distinguish
icons need to look like they are from the same design: all enclosed in a circle, same line weight details