Joy Zeng—Multidisciplinary artist and designer

Work

Info

Resume

A smart grocery shopping tool with list integration.

wegmans go cart hero image

Wegmans GoCart

The Wegmans GoCart is a smart grocery cart that tracks customer expenses in real time. This project examines and redefines the GoCart to better address user shopping needs.

𖤐 Role

UI Design
UX Research

✐ Tools

Figma
Illustrator

⏱︎ Duration

6 weeks

𖠋 Team

Solo

wegmans go cart final image 1

wegmans go cart final image 2

Background

What should modern grocery shopping look like?

Wegmans is a supermarket chain that has been providing customers with high quality selection and innovative shopping experiences since 1916. Since then, it has grown tremendously and become well-loved all over the American northeast.

In 2022, Wegmans released their SCAN app, an in store service that allowed customers to scan product barcodes as they shopped, expediting the checkout process. Although it became popular within its customer base, the app was shortly discontinued due to increased theft.

In 2023, Wegmans began testing the GoCart, its first smart cart in collaboration with Shopic. This technology used a combination of cameras and sensors allowing customers to track their expenses in real time as they placed items in the cart.

Challenges

How smart is this cart—really?

Smart products have steadily grown in popularity—especially in recent years. While these tools have the potential to increase efficiency, their effectiveness hinges upon how seamlessly they can integrate with existing processes.

The GoCart's primary purpose is to optimize repetitive steps of grocery shopping. By allowing an automated system to keep track of products in the cart while customers are actively shopping, it aims to relieve users of having move items in and out of their cart during the checkout process.

After conducting a heuristics evaluation, there are some clear challenges with the product that were raised.

Inconsistent Flow

There are multiple ways to reach different areas of the cart and interface language changes even when communicating the same things.

Stubborn Interface

When navigating large quantities of items, the interface becomes very manual and tedious to maneuver.

Lack of Autonomy

Error states require help of employees and mistakes will often require users to recall previous ways to navigate the system.

wegmans go cart cart interface

Goals

Strealine experience

Users should be able to easily follow and repeat simple processes.

Cater to preferences

A smart device should learn and apply user habits to optimize experience.

Provide active guidance

Provide timely assistance that doesn't require significant user effort.

shopic go cart

Workflow

Personalize experience based on individual user shopping needs.

There is a lot of potential real-time shopping features that can be incorporated into an updated smart cart. For this project, I focused on personal list integration that provides navigational guidance and trip estimates. The Wegmans app has a list building feature that allows users to create grocery lists—this smart cart redesign implements this data.

Below are the primary screens for the redesigned interface along with their respective user flows.

Login

Users will have the option to log in to their Wegmans account to connect shopping lists, unlock deals, and more.

List Selection

After logging in, users will be able to select their created lists which will outline in-store navigation.

Cart Home

This is the primary screen that shoppers will use. It will contain the user's digital cart, list, and any other features.

login work flow

list selection work flow

cart home work flow

Design

Sketches

The first sketches explored the module relationship between the cart and the list.

redesign sketch ideation

What should the spatial relationship between the digital cart and list be?

Earlier iterations focused on the module relationship between the digital cart and the list—these two elements, their hierarchal relation, and their functional complexities.

wegmans go cart redesign initial wireframes

When redesigning the interface, I started with creating a more intuitive digital cart system. The original digital cart requires users to manually scroll through the entire cart to locate specific items. I created a category grouping system within the digital cart and experimented with search and sort options.

wegmans go cart digital cart module wireframes

wegmans go cart list module wireframes

wegmans go cart full interface wireframes

How important is the digital cart?

The original GoCart interface allocated a large portion of the screen space for the digital cart, but after additional user testing, I found that users actually interacted minimally with the digital cart while shopping. I found the digital cart was a lot lower in importance than I had originally assumed.

The following iterations give the list portion of the screen more hierarchal weight compared to previous iterations.

wegmans go cart visual comps 1

wegmans go cart visual comps 2

wegmans go cart visual comps 3

wegmans go cart visual comps 4

Style Guide

Wegmans' branding leans in a hand drawn, home-y style which fits their brand aesthetic and mission, but I wanted to create a cleaner, simplified style guide for the GoCart that would mesh with Wegmans' current branding while still allowing the interface to be easily readable. I created simple iconography and used all of the brand colors within the final GoCart compositions.

wegmans go redesigned style guide

Final Comps

Unifying interface features within a modular design system.

An issue I ran into within the many iterations that came prior to the final composition was marrying the digital cart and the list without unknowingly creating redundancies within the tangent modules.

The grocery list is essentially a group of items that will be in the cart and the digital cart is essentially a group of what was on the grocery list. I also didn't want to make either module too functionally complex—users should ultimately be focusing on actually shopping, not figuring out a digital tool that is supposed to help them shop.

wegmans go cart final login pages comps

wegmans go cart final orientation pages comps

wegmans go cart final main screen layout comp

wegmans go cart final homepage comp

wegmans go cart final list component layout

Conclusion

Continuous testing and empathy

Testing and remaining empathetic is so important in any experience design. Researching and testing old and new designs allowed me to better understand my decisions and question biases.

A solution beyond the product

Although I spent a lot of time brainstorming features that could be feasibly implemented within the GoCart ecosystem, it also became very apparent at the end of the project that there may be stronger solutions that may be more helpful to users beyond the cart. The GoCart is an interesting product, but in the process of understanding the shopping experience, I began to see more growth opportunities beyond the interface.

Good designs are often simple

The more I delved into my designs, the more I realized that keeping things simple was time and time again, the most intuitive way to go. It takes a while to reach a simple and elegant solution to a layered problem.