Secondary Skills

About

Shop

Contact

Secondary Skills

About

Shop

Contact

Associate E-Commerce Solution

Associate E-Commerce Solution

Associate E-Commerce Solution

In 2024, I joined Walmart's User Experience team to focus on the finance ecosystem within their product suite. As one of the world’s largest retailers, Walmart offered a unique opportunity to design for a platform serving millions of users globally, contributing to a high-impact experience in a $642.6 billion net sales revenue ecosystem.

Primary tools

Savings of supply cost

Savings of supply cost

Annually

$17m

$17m

$17m

Before

-$12M

After

+5m

Reduce search time

Reduce search time

Annually

1.7 hours

1.7 hours

1.7 hours

Before

45 min

After

30 secs

Associate time repurposed

Annually

$2.6m

$2.6m

$2.6m

Assuming

$15 hr rate

Associate time repurposed

Annually

Improved perceived satisfaction rating

Improved perceived satisfaction rating

Single ease question (SEQ)

2.6 points

2.6 points

2.6 points

Before

4 / 7

After

6 / 7

Introduction

Introduction

ME@MyGNFR is a native iOS and Android e-commerce application, supported by a responsive desktop experience, that enables associates to order and track essential items needed for their departments (e.g., restocking toilet paper for bathrooms). The product was designed within a six-month timeline.


To ensure the solution met the needs of its users, I conducted interviews with 10 associates across two Walmart Supercenters. Over the course of two days, I worked closely with store managers and upper management to identify challenges in the ordering and tracking process. These insights guided the development of features to streamline operations and enhance the user experience for associates.

Problem

Problem

Native app design

Native app design

1

Visual tracker

The MVP of Me@GNFR lacks the ability to view order details. Users find it easier to track products with a visual tracker, and adding this feature to the native experience would improve productivity.

The MVP of Me@GNFR lacks the ability to view order details. Users find it easier to track products with a visual tracker, and adding this feature to the native experience would improve productivity.

2

Missing feature

To condense both responsive screens into one, additional details like approver, shipper, purchase order, and tracking information were added.

To condense both responsive screens into one, additional details like approver, shipper, purchase order, and tracking information were added.

1

Visual tracker

The MVP of Me@GNFR lacks the ability to view order details. Users find it easier to track products with a visual tracker, and adding this feature to the native experience would improve productivity.

Responsive web design

Responsive web design

1

Information revision

During testing, 20% of users overlooked the "View Details" button located under the product, making it difficult for them to locate tracking details. The remaining 80% found switching between the details pages confusing and indicated a preference for having the "View Details" button always exposed, without the need to expand the Cart # section.

During testing, 20% of users overlooked the "View Details" button located under the product, making it difficult for them to locate tracking details. The remaining 80% found switching between the details pages confusing and indicated a preference for having the "View Details" button always exposed, without the need to expand the Cart # section.

2

Wizard tracker

In-app feedback revealed that users want additional details on the wizard tracker, such as the approver's name and the expected delivery date, which are not currently displayed.

2

Wizard tracker

In-app feedback revealed that users want additional details on the wizard tracker, such as the approver's name and the expected delivery date, which are not currently displayed.

3

Image consistency

Images are inconsistent between in-person shelf tags and the Me@MyGNFR platform.

Images are inconsistent between in-person shelf tags and the Me@MyGNFR platform.

3

Image consistency

Images are inconsistent between in-person shelf tags and the Me@MyGNFR platform.

Persona

Persona

Sarah Johnson

Sarah Johnson

Sarah Johnson

"Finding what I need takes too long, and we often order the wrong quantities. If the app remembered my preferences, I could focus more on my team and customers.."

"Finding what I need takes too long, and we often order the wrong quantities. If the app remembered my preferences, I could focus more on my team and customers.."

"Finding what I need takes too long, and we often order the wrong quantities. If the app remembered my preferences, I could focus more on my team and customers.."

About

About

Age: 29

Job Title: Walmart Supercenter Store Manager

Location: Dallas, TX

Experience: 16 years

Age: 29

Job Title: Walmart Supercenter Store Manager

Location: Dallas, TX

Experience: 16 years

Goals

Goals

Efficiency: Wants to streamline the process of ordering and tracking department supplies to save time during shifts.

Accuracy: Aims to avoid mistakes or delays in ordering essential supplies that could disrupt operations or customer satisfaction.

Accountability: Seeks an easy way to track order history and fulfillment to ensure tasks are completed and meet expectations.

Efficiency: Wants to streamline the process of ordering and tracking department supplies to save time during shifts.

Accuracy: Aims to avoid mistakes or delays in ordering essential supplies that could disrupt operations or customer satisfaction.

Accountability: Seeks an easy way to track order history and fulfillment to ensure tasks are completed and meet expectations.

Pain Points

Pain Points

Manual Processes: Existing experience is confusing to navigate, and orders are often missed due to a lack of search efficiency.

Delays: Tracking order statuses can be confusing or lead to delays in critical supplies.

Device Consistency: Frustrated when mobile and desktop experiences aren’t consistent, leading to inefficiencies.

Manual Processes: Existing experience is confusing to navigate, and orders are often missed due to a lack of search efficiency.

Delays: Tracking order statuses can be confusing or lead to delays in critical supplies.

Device Consistency: Frustrated when mobile and desktop experiences aren’t consistent, leading to inefficiencies.

Motivations

Motivations

Tech-Savvy Level: Comfortable with mobile apps but prefers intuitive interfaces due to her busy schedule.

Work Habits: Takes inventory of what is needed each morning before the work day starts.

Collaboration: Works closely with other salary employees to align orders with budget constraints and operational needs.

Tech-Savvy Level: Comfortable with mobile apps but prefers intuitive interfaces due to her busy schedule.

Work Habits: Takes inventory of what is needed each morning before the work day starts.

Collaboration: Works closely with other salary employees to align orders with budget constraints and operational needs.

Solution

Solution

Native app design

Native app design

1

Display images

Sense users are primary identifying orders my the products in them. I expose the first four product images that are attached to an order so that users are able to quickly identify the orders they are looking to find quickly.

2

Streamlined Delivery Details

I simplified the high-level information displayed to users, focusing solely on the essential delivery details to help them quickly identify the product they need.

2

Additional order details

To condense the two pages, we created a clear and quick way for users to view detailed order information. Since orders are often similar across products, we streamlined the content and moved it to the top of the page alongside the order comment details.

3

Reorder action button

Since improving search functionality is a larger effort, I found that associates often use carts to reorder hard-to-find items. To support this, we updated the secondary action button to make reordering products easier.

2

Additional order details

To condense the two pages, we created a clear and quick way for users to view detailed order information. Since orders are often similar across products, we streamlined the content and moved it to the top of the page alongside the order comment details.

3

Improved Order Interaction

I made the "View Details" button visible for each order number section and relocated the edit CTA to the details page, creating a more intuitive flow that better guides users through managing their orders.

1

Improved tracker

I restructured the wizard tracker into a new experience called the "Spark Tracker." Using the Walmart logo, it displays order progress and key information across six defined steps in the tracking process.

2

Additional order details

To condense the two pages, we created a clear and quick way for users to view detailed order information. Since orders are often similar across products, we streamlined the content and moved it to the top of the page alongside the order comment details.

3

Reorder action button

Since improving search functionality is a larger effort, I found that associates often use carts to reorder hard-to-find items. To support this, we updated the secondary action button to make reordering products easier.

2

Additional order details

To condense the two pages, we created a clear and quick way for users to view detailed order information. Since orders are often similar across products, we streamlined the content and moved it to the top of the page alongside the order comment details.

1

Improved tracker

I restructured the wizard tracker into a new experience called the "Spark Tracker." Using the Walmart logo, it displays order progress and key information across six defined steps in the tracking process.

2

Additional order details

To condense the two pages, we created a clear and quick way for users to view detailed order information. Since orders are often similar across products, we streamlined the content and moved it to the top of the page alongside the order comment details.

3

Reorder action button

Since improving search functionality is a larger effort, I found that associates often use carts to reorder hard-to-find items. To support this, we updated the secondary action button to make reordering products easier.

2

Additional order details

To condense the two pages, we created a clear and quick way for users to view detailed order information. Since orders are often similar across products, we streamlined the content and moved it to the top of the page alongside the order comment details.

2

Additional order details

To condense the two pages, we created a clear and quick way for users to view detailed order information. Since orders are often similar across products, we streamlined the content and moved it to the top of the page alongside the order comment details.

Responsive design

Responsive design

1

Improved tracker

I restructured the wizard tracker into a new experience called the "Spark Tracker." Using the Walmart logo, it displays order progress and key information across six defined steps in the tracking process.

2

Additional order details

To condense the two pages, we created a clear and quick way for users to view detailed order information. Since orders are often similar across products, we streamlined the content and moved it to the top of the page alongside the order comment details.

3

Reorder action button

Since improving search functionality is a larger effort, I found that associates often use carts to reorder hard-to-find items. To support this, we updated the secondary action button to make reordering products easier.

3

Reorder action button

Since improving search functionality is a larger effort, I found that associates often use carts to reorder hard-to-find items. To support this, we updated the secondary action button to make reordering products easier.

3

Reorder action button

Since improving search functionality is a larger effort, I found that associates often use carts to reorder hard-to-find items. To support this, we updated the secondary action button to make reordering products easier.

2

Additional order details

To condense the two pages, we created a clear and quick way for users to view detailed order information. Since orders are often similar across products, we streamlined the content and moved it to the top of the page alongside the order comment details.

2

Additional order details

To condense the two pages, we created a clear and quick way for users to view detailed order information. Since orders are often similar across products, we streamlined the content and moved it to the top of the page alongside the order comment details.

Desktop

Desktop

Responsive Desktop Design

Since this is also available on responsive, we needed to account for the desktop experience to ensure consistency and usability across all devices.

2

Additional order details

To condense the two pages, we created a clear and quick way for users to view detailed order information. Since orders are often similar across products, we streamlined the content and moved it to the top of the page alongside the order comment details.

3

Reorder action button

Since improving search functionality is a larger effort, I found that associates often use carts to reorder hard-to-find items. To support this, we updated the secondary action button to make reordering products easier.

2

Additional order details

To condense the two pages, we created a clear and quick way for users to view detailed order information. Since orders are often similar across products, we streamlined the content and moved it to the top of the page alongside the order comment details.

Responsive Desktop Design

Since this is also available on responsive, we needed to account for the desktop experience to ensure consistency and usability across all devices.

2

Additional order details

To condense the two pages, we created a clear and quick way for users to view detailed order information. Since orders are often similar across products, we streamlined the content and moved it to the top of the page alongside the order comment details.

3

Reorder action button

Since improving search functionality is a larger effort, I found that associates often use carts to reorder hard-to-find items. To support this, we updated the secondary action button to make reordering products easier.

2

Additional order details

To condense the two pages, we created a clear and quick way for users to view detailed order information. Since orders are often similar across products, we streamlined the content and moved it to the top of the page alongside the order comment details.

Reflection

Reflection

This project involved working with two different platform states. The native Me@Walmart experience had logic to break out products by status, while the responsive version had not yet been updated to reflect these changes. Our challenge was to balance and unify the two mobile versions to deliver a seamless experience, achieved by introducing the new "Spark Tracker" UI component.


There were three designers collaborating on this project, located in Seattle, Bentonville, and Austin. This setup allowed us to support one another in conducting in-store research and gather diverse user data nationwide, providing a broader perspective on user needs.


Looking back, I would aim for a more 1-to-1 alignment between the mobile app and responsive versions. However, to maintain consistency, we adhered to similar patterns across platforms.

See Ruggable Project

BACK TO HOME

BACK TO HOME

Kyle Mattson. Product and user experience designer, Austin Texas © 2024

Kyle Mattson. Product and user experience designer, Austin Texas © 2024