New Entry for

Shared Carts

Case Study

Create New Group for a collaborative cart

Timeline

12 Weeks

My role

UX/UI designer and researcher from conception to protoype

Integrate Shared Cart feature into Walmart mobile app

About

Figma, Adobe Illustrator, Photoshop

Software

Overview

Creating a Shared-Cart feature into Walmart Application

In my final semester of the Interactive Media program, I focused on developing an innovative solution inspired by real-world challenges in grocery shopping apps. I chose to enhance the Walmart mobile application by designing a ‘Shared-Cart’ feature. This feature allows users to collaboratively manage shopping lists, split bills, and coordinate payments, addressing common pain points in group shopping experiences. Guided by user research and insights, my design aimed to improve convenience and usability, delivering a more seamless and collaborative shopping experience for Walmart customers.

the conventional experience

After conducting interviews before diving into the integrated Shared-Cart feature, I learned the style of people doing their group shopping

Collate all shopping list

Purchase items

Pay on behalf of all

Gather payments

Completion

The problem

Grocery shopping has become a chore to plan among roommates, partners or even group gathering. Consumers are now often looking to do pick up option instead of walking in store to avoid big crowds. It has become a common struggle to ensure everything is on list, figuring out how to split the bill and allocating time for grocery shopping

Grocery shopping has become a chore to plan among roommates, partners or even group gathering. Consumers are now often looking to do pick up option instead of walking in store to avoid big crowds. It has become a common struggle to ensure everything is on list, figuring out how to split the bill and allocating time for grocery shopping

THE SOLUTION

Enhancing the shopping experience for groups of people, such as families, roommates, or friends, who frequently make shared purchases or getting their groceries on a weekly basis. Walmart’s app currently allows for individual shopping experiences, but it lacks features that cater to group shopping dynamics. By introducing a “Shared Cart” feature, the Walmart app can allow multiple users to collaboratively add, modify, and review items in real-time.

This feature would include the ability to split the bill at checkout, both online and in-store, and integrate payment management tools, to streamline shared expenses.

DESIGN PROCESS

Empathize

Competitor Analysis

Survey

Define

Problem Statements

Personas

User Journey Mapping

Empathy Map

Ideate

Affinity Map

User Flow

IA

prototype

Paper Prototypes

Wireframes

Eye-tracking

Test

High Fidelity Design

A/B Testing

Performance Testing

Observation

GOAL

To integrate Walmart app by finding a smart solution that ease grocery shopping frustration and making it more enjoyable for everyone.

Let’s dive into my research

Understanding shoppers

Using the survey method allow us to gather valuable and structure feedback of users or potential user about their experience, preferences, and pain points regarding group shopping and payment management. This can further identify how users currently manages group shopping, whether online or in-store and understand their common challenges.

persona

Sarah is a busy working adult who often recharges her social by having gathering with her love ones but she is looking for a convenient when it comes to shopping for her family’s groceries

Sarah Robb. 29

Age: Female

Occupation: Marketing Manager

Location: Toronto, Canada

Living Status: Living with her parents and two younger siblings

“ I enjoy family friends gatherings, many times we host the gathering at our place. Which I would frequent share grocery shopping responsibility with my parents or friends.”

“ I enjoy family friends gatherings, many times we host the gathering at our place. Which I would frequent share grocery shopping responsibility with my parents or friends.”

CHARACTER

Gathers Community

Organized

Proactive

Extrovert

PAIN POINTS

“It’s hard to make sure everyone’s items get added to the cart without repeating or forgetting things, especially when we’re not together.”

“When some of us shop in-store while others shop online, there’s no way to keep the list in sync, so we often end up buying the same things or forgetting something.”

“Splitting the bill after shopping is a hassle, and it’s easy to make mistakes when calculating who owes what”

GOALS

  • Wants a seamless shared purchases with others without having to message back and forth or missed items

  • Wants the convenience of using the same cart to keep everything organised regardless where they shop (online/ in-store)

  • “Prefers an simpler way of splitting cost during checkout to avoid using manual calculations.

user flow

AFFINITY MAP

Intervene Early,

Increase User Engagement

ASSUMPTION / BIASES

At the outset of this research on Walmart Integration, I assumed that most people would engage in group shopping and feel comfortable using the Walmart app for their daily grocery needs. Through surveys, I discovered that while younger generations predominantly use online applications, many Gen X individuals prefer shopping in physical stores. This insight helped me understand varying shopping preferences and purchasing styles among different groups.


As a result, I strategically designed the app to be user-friendly for both in-person and online shoppers. I decided to implement a QR code feature, enabling users to check out their groceries through the Walmart app even when shopping in-store, this way users are able to use Walmart app as a form of shopping list that has been gathered with other shoppers in the group cart. This enhancement aims to create a seamless shopping experience for all Walmart customers, regardless of their preferred shopping method.

Feedback

Based on feedback from users interested in the shared-cart feature, two key concerns were raised: how receipts would be displayed upon checkout and the navigation structure for using the feature. To address these:


1. Feature Introduction: A small pop-up guide will be included to explain the shared-cart feature, its functionality, and how to create group carts, ensuring ease of use.


2. Receipt Breakdown: During checkout, a detailed receipt breakdown will be displayed after setting the split bill, ensuring transparency for all participants regarding cost allocation.

Mobile first.

Desktop later.

Design iteration

Two-thirds of online grocery orders today, in fact, are made from mobile phones. I designed mobile first, then adapted to desktop version.

Bringing ideas

to life

Design iteration

Navigate the Happy Path


This project presented numerous opportunity for design intervention. I prioritise the happy path first, focusing on real-time cart sharing, to split payments. Designing in the direction that enforced simplicity for user.

Sign up to use Shared-Cart with your peers today!

Showing pop-up impacts user’s attention. Pop-up will effectively capture user attention that provides a direction to use the Shared-Cart feature in the application.

ALL IN ONE

fINAL DESIGN

Accessible to Shared Cart:


Create a new cart in less a minute by adding users through the contact list and provides real time notification on the active carts

Accessible to Shared Cart:


Create a new cart in less a minute by adding users through the contact list and provides real time notification on the active carts

Effortless Checkout:


Members are able to split the cost before checkout to ensure a fair payment.

Effortless Checkout:


Members are able to split the cost before checkout to ensure a fair payment.

Interactive Payment:


The application allows users to note down their cost to eliminate confusion on payments

Interactive Payment:


The application allows users to note down their cost to eliminate confusion on payments

Before

No in-built Shared Cart


No Easy QR code checkout


No Split Payment options

After

Real-time Shared Cart Feature


QR code Check out for in-store shopping


Keep track of payment

The next steps

Expand features by directing users’ to bank application through Walmart App.

Design alternative for Desktop / Tablet version

Enhance multiple-user interaction besides Cart-creator viewpoint.

Conduct with actual group tester to check functionality of the platform

Vanessa Yong © 2024

Designed with Figma built on Framer.

Walmart