UX Case Study: Walmart CX
E-Commerce UI Templates
Project Overview
Challenge
Walmart customers with a strong brand affinity are struggling to find their favorite brand stories when they start a shopping journey. They also cannot see the unique visual identity and brand aesthetic when visiting brand pages on Walmart.
Customers who are interested to learn about the breadth and depth of their favorite brand on Walmart aren’t confident that they see all that the brand has to offer when visiting their storefront on the Walmart site.
Problem Statement
Walmart customers are currently lacking an elevated and inspirational experience to discover, find and buy items from their favorite brands.
Guiding Principles
- Easy to discover clear and easy entry points will be provided to make brand shops a natural destination of the shopping experience
- Optimized navigation build a scalable system that will allow customers to clearly explore, discover and learn from the brands
- On-brand experience support both customer’s expectations and brand owners by providing flexibility to effectively reflect the brand’s language
Project Scope
Tools
Team
Senior Product Designer – Allison Kuehn
Senior UX Researchers – Edith Chang & Marcela Sanchez
Customer Experience (CX) Overview
Walmart’s objective of the Brand Shop initiative is to create a free self-service platform for brand owners to build, customize and manage digital storefronts that customers shopping by Brand can find engaging and useful in their shopping journey.
Guiding Principles for CX:
- Ensure the customer experience and brand discoverability is governed by the same guiding principles as the rest of the site (Discoverability is intuitive, relevant, dynamic and fun.)
- Support and build on-top of capabilities that our site-ops team currently uses.
- Enable scalable capabilities and experiences.
Current brand pages experiences:
- Registry landing page
- Registry setup
- Registry page
- Trending items
- Edit items
- Registry utilities
Storyline
Part 1
👨👩👦👦 Context: Gloria, a mother of two lovely children aged 9 and 5, is excited to create an extraordinary holiday season for her family, as this year marks their move into their own home.
🔖 Looking for home appliances (Google): Having moved into their new home just a few months ago, Gloria realizes that there are a couple of things missing in the kitchen, she is looking to enhance her culinary skills. Her friends have talked to her about the brand Ninja and she starts her research.
🔍 External traffic (Google): Gloria immediately sees Walmart as the first result including some images and easy to scan information of Ninja’s products. Knowing about the fantastic deals available at Walmart during this season, Gloria decides to combine her home appliances shopping and Christmas presents in one go.
🔉 Discovery (BP Landing Page): Gloria lands on Ninja’s Brand Shop page within Walmart and already feels curious by the outstanding images and videos. She can easily navigate and learn about all the categories within Ninja’s BP. From blenders, to air fryers and drink makers it almost feels like being into an actual shop! Gloria starts exploring and go straight to the blenders category and finds a module highlighting one of the bestsellers of the year, she reads through the information, plays a video explaining more about the product and decides to read more on the item detail page. Gloria is excited about her new Ninja blender!
🛒 Internal Traffic Search (from BP): Now that she has the her blender, she decides to begin with the Christmas gifts. Starting with her kids she goes for that gift they’ve been asking for: Super Mario’s LEGO. She starts typing on the search bar and some suggestions start popping up from the search bar. “Lego brand page” is one of the top suggestions so she clicks into the module.
🎁 Discovery (BP Landing Page): Gloria lands on LEGO’s BP and quickly finds all categories by age but also gaming sets available including Mario’s! She clicks into Mario’s gameplay and finds all the products available. She nows what the budget limit is so she decides to filter and sort results. Helena and Sarah will be so happy with their gifts!
Part 2
We also want to showcase how Walmart can transform to reflect even the most iconic brands on our site. From electronics, fashion, home, beauty and beyond, the new brand shops experience at Walmart will make our customers feel as if they were shopping within the official brands stores, and our brand partners, excited to create their storefronts with us.
We’re including 3 different examples here:
- Ninja
- Legos
- Levis
Analysis of Walmart's Current Product Page Design
Walmart Homepage - Audit
On Walmart’s homepage, you can see a well-crafted user interface. According to Baymard Institute, Walmart’s adheres high on the following guidelines for the homepage for best practices in e-commerce:
- Features a broad range of product types on the homepage
- Consider using bespoke imagery and design to present the site’s brand
- Use caution when displaying ads on the homepage
- Avoid using footnotes
- Don’t show overlay dialogs on page load
- Include main navigation categories directly on the homepage
- Ensure text that overlays images is legible
1. Features a broad range of product types on the homepage
61-70% of categories are visually represented in this example.
Many first-time users rely on the homepage content to interpret the type of site they’ve landed on, as well as the diversity of products available, and misinterpretations during this first glance can lead to abandonments. Featuring a sufficiently broad range of product types on the homepage (aim for at least 40% of product types) helps with this.
2. Consider using bespoke imagery and design to present the site's brand
The majority of images on the homepage are cut-out products on custom backgrounds using bespoke imagery that engages users and that shows products in appealing lifestyle cutouts.
3. Use caution when displaying ads on the homepage
Ads on the homepage is generally perceived negatively during testing, and will often leave users with a poor first impression of the site. When no ads or carefully placed ads are displayed on the page, users are encouraged to focus on exploring products and categories, rather than ads.
4. Avoid using footnotes
Never use static text or linked footnotes to provide further information. Instead, use tooltips, overlays or links to dedicated pages.
5. Don't show overlay dialogs on page load
Testing proved that overlay dialogs rarely lead to abandonment of the site, but they contribute to user’s sense of a site being “pushy” and trying to get information from them before they’ve even had a chance to interact with the site content.
Given how much overlays annoy users, they should never pop-up on page load.
6. Include main navigation categories directly on the homepage
Depending on how beneficial a category-browsing strategy is for users on a particular industry, featuring the main navigation categories, or key subcategories, as homepage content help users to adopt the more convenient product finding strategy while reducing the need to have an overly eye-catching main navigation.
7. Ensure text that overlays images is legible
Text-overlaid images often lower scanability and legibility, as the typical white or light-colored webpage background is replaced with an image containing an array of colors and patterns changing throughout the image.
Text-overlaid images that are difficult to read were observed during testing, to lower information scent and cause users to hesitate when deciding which path to take to continue their product browsing.
Ensuring legibility and manually verifying text that overlays images or using a semi-transparent background overlay will help rectify these issues.
Walmart Homepage - Modules & Anatomy
The Walmart homepage user-interface (UI) has set the standard for content page modules.
The order of modules includes:
- Order status tracker
- Grid POV
- Sign In/Sign up module
- Write a review/module
- Item carousel & Hero POV
- Collection module
- Item carousel
- Gallery adds
- Item carousel + Hero POV
- Departments grid
- Capital one banner
- Collection module
- Item carousel
- One debit banner
Note: the homepage contains ads for Walmart-sponsored credit cards, but they are placed discreetly, that still compliment the UI-design
Current brand pages experience
In the current design, the brand pages that allows brand partners to connect with their customers but they have limited parity on web and apps. The brand and shelf pages are not aligned with brand’s expectations set by competitors like Amazon.
Issues with current design:
- Not meeting brand’s expectations
- Not scalable solution due to high operational cost
- Behind main competitor (Amazon)
Customer Experience (CX) User Interface (UI)
E-commerce Templates
Based on the guiding principles of Walmart’s homepage design, the same layout principles and storytelling elements were applied to the brand pages.
The objective is to provide a more engaging experience for users with their brands but having consistency with Walmart.com
The proposals were created using premade medium-fidelity templates to construct the page hierarchy in addition to design inspiration from the original brand websites. Combining the standardized content page modules with the creativity of design inspiration from the brand’s user-interface (UI) created an optimized customer experience (CX) with better engagement.
Ninja Appliances
Levis
Lego
UX Case Study: Walmart CX
E-Commerce UI Templates
Project Overview
Challenge
Walmart customers with a strong brand affinity are struggling to find their favorite brand stories when they start a shopping journey. They also cannot see the unique visual identity and brand aesthetic when visiting brand pages on Walmart.
Customers who are interested to learn about the breadth and depth of their favorite brand on Walmart aren’t confident that they see all that the brand has to offer when visiting their storefront on the Walmart site.
Problem Statement
Walmart customers are currently lacking an elevated and inspirational experience to discover, find and buy items from their favorite brands.
Guiding Principles
- Easy to discover clear and easy entry points will be provided to make brand shops a natural destination of the shopping experience
- Optimized navigation build a scalable system that will allow customers to clearly explore, discover and learn from the brands
- On-brand experience support both customer’s expectations and brand owners by providing flexibility to effectively reflect the brand’s language
Project Scope
Tools
Team
Senior Product Designer – Allison Kuehn
Senior UX Researchers – Edith Chang & Marcela Sanchez
Customer Experience (CX) Overview
Walmart’s objective of the Brand Shop initiative is to create a free self-service platform for brand owners to build, customize and manage digital storefronts that customers shopping by Brand can find engaging and useful in their shopping journey.
Guiding Principles for CX:
- Ensure the customer experience and brand discoverability is governed by the same guiding principles as the rest of the site (Discoverability is intuitive, relevant, dynamic and fun.)
- Support and build on-top of capabilities that our site-ops team currently uses.
- Enable scalable capabilities and experiences.
Current brand pages experiences:
- Registry landing page
- Registry setup
- Registry page
- Trending items
- Edit items
- Registry utilities
Analysis of Walmart's Current Product Page Design
Walmart Homepage - Audit
On Walmart’s homepage, you can see a well-crafted user interface. According to Baymard Institute, Walmart’s adheres high on the following guidelines for the homepage for best practices in e-commerce:
1. Features a broad range of product types on the homepage
61-70% of categories are visually represented in this example.
Many first-time users rely on the homepage content to interpret the type of site they’ve landed on, as well as the diversity of products available, and misinterpretations during this first glance can lead to abandonments. Featuring a sufficiently broad range of product types on the homepage (aim for at least 40% of product types) helps with this.
2. Consider using bespoke imagery and design to present the site's brand
The majority of images on the homepage are cut-out products on custom backgrounds using bespoke imagery that engages users and that shows products in appealing lifestyle cutouts.
3. Use caution when displaying ads on the homepage
Ads on the homepage is generally perceived negatively during testing, and will often leave users with a poor first impression of the site. When no ads or carefully placed ads are displayed on the page, users are encouraged to focus on exploring products and categories, rather than ads.
4. Avoid using footnotes
Never use static text or linked footnotes to provide further information. Instead, use tooltips, overlays or links to dedicated pages.
5. Don't show overlay dialogs on page load
Testing proved that overlay dialogs rarely lead to abandonment of the site, but they contribute to user’s sense of a site being “pushy” and trying to get information from them before they’ve even had a chance to interact with the site content.
Given how much overlays annoy users, they should never pop-up on page load.
6. Include main navigation categories directly on the homepage
Depending on how beneficial a category-browsing strategy is for users on a particular industry, featuring the main navigation categories, or key subcategories, as homepage content help users to adopt the more convenient product finding strategy while reducing the need to have an overly eye-catching main navigation.
7. Ensure text that overlays images is legible
Text-overlaid images often lower scanability and legibility, as the typical white or light-colored webpage background is replaced with an image containing an array of colors and patterns changing throughout the image.
Text-overlaid images that are difficult to read were observed during testing, to lower information scent and cause users to hesitate when deciding which path to take to continue their product browsing.
Ensuring legibility and manually verifying text that overlays images or using a semi-transparent background overlay will help rectify these issues.
Walmart Homepage - Modules & Anatomy
Walmart homepage user-interface (UI) has set the standard for content page modules.
The order of modules includes:
- Order status tracker
- Grid POV
- Sign In/Sign up module
- Write a review/module
- Item carousel & Hero POV
- Collection module
- Item carousel
- Gallery adds
- Item carousel + Hero POV
- Departments grid
- Capital one banner
- Collection module
- Item carousel
- One debit banner
Note: the homepage contains for Walmart-sponsored credit cards, but they are placed discretely that still compliment the UI-design.
Customer Experience (CX) User Interface (UI) E-commerce Templates
Based on the guiding principles of Walmart’s homepage design, the same layout principles and storytelling elements were applied to the brand pages.
The objective is to provide a more engaging experience for users with their brands but having consistency with Walmart.com
The proposals were created using premade medium-fidelity templates to construct the page hierarchy in addition to design inspiration from the original brand websites. Combining the standardized content page modules with the creativity of design inspiration from the brand’s user-interface (UI) created an optimized customer experience (CX) with better engagement.
Ninja Appliances
Levis
Legos
UX Case Study: Walmart CX
E-Commerce UI Templates
Project Overview
Challenge
Walmart customers with a strong brand affinity are struggling to find their favorite brand stories when they start a shopping journey. They also cannot see the unique visual identity and brand aesthetic when visiting brand pages on Walmart.
Customers who are interested to learn about the breadth and depth of their favorite brand on Walmart aren’t confident that they see all that the brand has to offer when visiting their storefront on the Walmart site.
Problem Statement
Walmart customers are currently lacking an elevated and inspirational experience to discover, find and buy items from their favorite brands.
Objectives
- Easy to discover clear and easy entry points will be provided to make brand shops a natural destination of the shopping experience
- Optimized navigation build a scalable system that will allow customers to clearly explore, discover and learn from the brands
- On-brand experience support both customer’s expectations and brand owners by providing flexibility to effectively reflect the brand’s language
Project Scope
Tools
Team
Senior Product Designer – Allison Kuehn
Senior UX Researchers – Edith Chang & Marcela Sanchez
Customer Experience (CX) Overview
Walmart’s objective of the Brand Shop initiative is to create a free self-service platform for brand owners to build, customize and manage digital storefronts that customers shopping by Brand can find engaging and useful in their shopping journey.
Guiding Principles for CX:
- Ensure the customer experience and brand discoverability is governed by the same guiding principles as the rest of the site (Discoverability is intuitive, relevant, dynamic and fun.)
- Support and build on-top of capabilities that our site-ops team currently uses.
- Enable scalable capabilities and experiences.
Current brand pages experiences:
- Registry landing page
- Registry setup
- Registry page
- Trending items
- Edit items
- Registry utilities
Analysis of Walmart's Current Product Page Design
Walmart Homepage - Audit
On Walmart’s homepage, you can see a well-crafted user interface. According to Baymard Institute, Walmart’s adheres high on the following guidelines for the homepage for best practices in e-commerce:
1. Features a broad range of product types on the homepage
61-70% of categories are visually represented in this example.
Many first-time users rely on the homepage content to interpret the type of site they’ve landed on, as well as the diversity of products available, and misinterpretations during this first glance can lead to abandonments. Featuring a sufficiently broad range of product types on the homepage (aim for at least 40% of product types) helps with this.
2. Consider using bespoke imagery and design to present the site’s brand
The majority of images on the homepage are cut-out products on custom backgrounds using bespoke imagery that engages users and that shows products in appealing lifestyle cutouts.
3. Use caution when displaying ads on the homepage
Ads on the homepage is generally perceived negatively during testing, and will often leave users with a poor first impression of the site. When no ads or carefully placed ads are displayed on the page, users are encouraged to focus on exploring products and categories, rather than ads.
4. Avoid using footnotes
Never use static text or linked footnotes to provide further information. Instead, use tooltips, overlays or links to dedicated pages.
5. Don’t show overlay dialogs on page load
Testing proved that overlay dialogs rarely lead to abandonment of the site, but they contribute to user’s sense of a site being “pushy” and trying to get information from them before they’ve even had a chance to interact with the site content.
6. Include main navigation categories directly on the homepage
Depending on how beneficial a category-browsing strategy is for users on a particular industry, featuring the main navigation categories, or key subcategories, as homepage content help users to adopt the more convenient product finding strategy while reducing the need to have an overly eye-catching main navigation.
7. Ensure text that overlays images is legible
Text-overlaid images often lower scanability and legibility, as the typical white or light-colored webpage background is replaced with an image containing an array of colors and patterns changing throughout the image.
Walmart Homepage - Modules & Anatomy
The Walmart homepage user-interface (UI) has set the standard for content page modules.
The order of modules includes:
- Order status tracker
- Grid POV
- Sign In/Sign up module
- Write a review/module
- Item carousel & Hero POV
- Collection module
- Item carousel
- Gallery adds
- Item carousel + Hero POV
- Departments grid
- Capital one banner
- Collection module
- Item carousel
- One debit banner
Customer Experience (CX) User Interface (UI) E-commerce Templates
Based on the guiding principles of Walmart’s homepage design, the same layout principles and storytelling elements were applied to the brand pages.
The objective is to provide a more engaging experience for users with their brands but having consistency with Walmart.com
The proposals were created using premade medium-fidelity templates to construct the page hierarchy in addition to design inspiration from the original brand websites. Combining the standardized content page modules with the creativity of design inspiration from the brand’s user-interface (UI) created an optimized customer experience (CX) with better engagement.
Ninja Appliances
Levis
Legos
