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.
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
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.
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
Kyle Mattson. Product and user experience designer, Austin Texas © 2026
Kyle Mattson. Product and user experience designer, Austin Texas © 2026
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
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