Karen Dringenberg
DESIGN LEAD + UXR
Walmart
Future of item groupings
Overview
Variant groups account for over account for 37% of the Walmart item catalog resulting in $230M in revenue. There was a customer experience problem of having very similar items appear on different product detail pages which clutters the shoppers search experience. Thru research and user testing, my PM and I discovered we could sunset multiple tools and simplify functionality in our app to allow our users to easily ensure items lived on the same product detail page and therefore improve sales.
The Challenge
Today, users have 4 tools to create variant groups depending on their item category. These item groupings account for high volume online sales and it’s imperative that the groups appear correctly for the customer experience, as well as for business reporting and inventory.
MY CONTRIBUTIONS
UX
User Research
User Testing
UI Design
Dev Collaboration/Oversight
​
RESULTS SNAPSHOT
50% decrease in support tickets being submitted post variants launch
​
Decrease in time to make updates and have them publish to the site, from ~3 days to 4 hours
​
Increase of user adoption with 60% of users using our tools (up from 30%)
​
10
User interviews conducted
45+
Sketches
3
Rounds of usability testing
Process
I partnered with my product manager, sketching and brainstorming various possibilities based on initial user research. There were three main areas of opportunity in our tooling.
IMPROVED SEARCH/FILTERING
Outdated tooling exists today to group items. Currently it's a multi-step process to find items that should be grouped together onsite that usually involves more than one application and multiple tabs open.
ALLOW SPLIT & MERGE GROUPS
Can only split or merge groups via excel sheets and the upload process for these documents typically results in a multitude of unforeseen errors.
EASE OF EDITING GROUP ATTRIBUTES
Tedious to make edits to items in groups, such as a simple color or size change. These had to be made one item at a time.
Initial design thinking
With this understanding of the problem space, I started design explorations that led to two rough prototypes for user testing with different layouts.
Using tables to organize content.
I began my exploration by designing in a table format. This wasn't scalable for smaller screens and didn't align well with the existing design language of the tool. The solution moving forward from here was to place product attributes into an item card design for easier viewing, editing and sorting.
Using a split screen for drag and drop 🤔
Also spent time exploring split screen ways of merging multiple groups which was cognitive overload for the user. I evolved this design into a stepper flow to break down that cognitive overload into smaller chunks.
Considering how to edit product attributes.
I explored micro interactions for editing attributes on screen. I considered using icons and overlayed modals to edit content but decided that would be too many clicks for users looking to quickly edit their attribute information. I opted to display the editable fields by default. This allowed us to build one universal submit button vs. multiple submits to save the individual attribute value which improved performance while interacting with the page.
The users have spoken and the product card layout was the clear preference.
The results of usability testing were clear. Using cards created more alignment with the overall design system and allowed for easier product attribute editing. It was time to get into the detailed design.
Micro-modals and
micro-interactions were
key to simplifying the
end to end experience
Research showed that users wanted a lot of robust functionality and this allowed me to evolve existing design system patterns to allow for more flexibility and scalability in our design language.