H-E-B Produce Scanner Feature

H-E-B prioritizes the comfort of the customer by sustainably providing fresh groceries for the community and launching initiatives to create a positive shopping experience through guided shopping, delivery services, and SNAP payment options.

Roles: UI/UX Designer UX Researcher Software Engineer

Challenge

Customers during the height of the pandemic wanted to avoid exposure to COVID-19 without giving up their shopping experience. They enjoyed forming relationships with ingredients by selecting their own produce in-store, so I needed to create a sustainable hybrid shopping experience to minimize germ exposure while providing the freedom to manage all necessary in-store transactions efficiently and independently through the H-E-B mobile application.

Approach

Existing Experience

Produce Scanning Experience

H-E-B shoppers can now more efficiently purchase groceries through an added feature in the MyHEB mobile app. They can input produce information (price, weight, quantity) on their phone through scanning appropriate barcodes in-store. Meanwhile, the produce will be placed in one reusable bag within their cart, removing the need to individually bag or sort products. Afterwards, all of the individual product information will accumulate into one “checkout barcode” that is easily scanned during checkout to streamline the purchasing process and increase customer independence. Since users will only scan one cumulative barcode to checkout, unnecessary wait times in-store will be minimized, allowing for decreased exposure to COVID-19.

Research

I utilized the RITE (Rapid Iterative Testing and Evaluation) method with 2 unmoderated sessions, 3 participants each, and the usability testing participants were filtered by these constraints:

  • Varying age groups
  • Average technical skills
  • Primary shoppers
  • Mix of in-store and digital customers
The overall goal during testing was to identify the users’ thoughts and understanding of the produce scanning feature while gathering customer feedback to iterate and develop on the visual components and navigation of the prototype.

Research Questions
Feedback
  • Reduces hassle using plastic bags to individually sort produce
  • Recognition of increased efficiency during checkout as you do not have to individually search through products during self checkout.
  • Appreciation for independent nature of feature as customers are able to take care of shopping quicker and easier by themselves

Design

I utilized the H-E-B design language system in Figma to create additional components as well as the overall design and navigation for the produce scanning feature. The feature utilizes a button on the home screen to quickly navigate to the “scanning screen” with a list modal displayed on the bottom third of the screen for easy viewing of previously “scanned in” produce. The modal is expandable and contains a “checkout barcode” button so users can easily present their final cumulative barcode during checkout.

Implementation

The produce scanning feature was coded in React and set up through Expo Go. To use the app, access the code through GitHub and follow the instructions in the README file.