UX Case Study: Walmart E-Commerce Brand Shop Builder 2.0
Project Overview
Challenge
Walmart currently has. a brand shop builder for first party (1P) and third party (3P) sellers. Walmart is only second to Amazon with over 150,000 1P and 3P sellers who account for over 15% of Walmart’s total sales.
However, as of right now, it cannot compete with Amazon’s Seller Central due to its suboptimal user experience design.
Problem Statement
The inefficiencies and usability issues within the brand shop building platform contributes to a less-than-ideal environment for sellers. This potentially limits Walmart’s growth in the e-commerce market.
Objectives
- Frictionless start people need to easily sort showcasing their brand and products
- Continuous support people need guidance integrated in the experience
- More flexibility people need to be able to configure the pages to best tell their brand story
- Seamless customer experience people need customers to easily browse and find products
- Customer knowledge (metrics) people need to know more about the customer to create a better experience
Project Scope
Tools
Team
Senior Product Designer – Allison Kuehn
Senior UX Researcher – Tenzin Namdol
Previous Design
With limited prior research, it was important to understand people’s first-time experience using Shop Builder.
This what the old Brand Shop builder looked like with each section…
UX Research
According to the research conducted of 6 users (including brand shop owners, suppliers and sellers), they experienced the following issues with the current brand Shop builder:
Most people…
- were not sure how to use the Brand shop builder
- struggled to add and edit modules, text and images
- They came back to Shop page to input Shelf page URL. Then, they continue building the Shop page
Half the people…
- were confused by the order in which to build Shop and Shelf pages
- struggled to use modules because they did not meet the requirements
Few people…
- struggled to find what they were looking for on the Shop builder
- wanted more ways to tell a clearer story about their brand and increase customer’s confidence
- were frustrated by the limited ability to preview
- wanted more ways to add and edit items
- were frustrated at not being able to delete Shelf pages
- were frustrated at not being able to easily edit their live page
Through these findings, the following overarching needs were summed up as:
- Frictionless Start 🎬
People need to easily start showcasing their brand and products. - More flexibility 💪
People need to configure the pages to best tell their brand story. - Continuous support 🫶
People need guidance integrated in the experience as they plan, build and improve pages.
Through the observation of user issues and definition of overarching needs, the following were recommendations that we implemented into the new design:
- Consider a more guided experience that can be turned off as people become more knowledgeable
- At minimum, inform people that they need a URL (Shelf or other)
- Enable people to select pre-built Shelf pages during the Shop building process
- Consider if the IA needs to be evaluated
- Consider ways the platform can be more adaptable to people’s needs
- Be able to rearrange the order of modules
- Consider option to add lifestyle images
- Consider a video and image editor within the experience
- Be able to preview at any time
- Easily move items between sections
- Be able to delete and edit sections
- Make it easier to edit live pages
Brand Shop Builder 2.0
Self-Serve Brand Shop - Background
- Brand Shops (BS) are digital storefronts for 1P and 3P brand owners. These pages tell a story and as such, inspire shoppers while also being used for transaction.
- Today, the Walmart Connect (WMC) and Site Ops teams manually build these pages – a lengthy and labor-intensive process that doesn’t scale to support the breadth of suppliers and sellers on our platform.
- Our major competitors (ex: Amazon) offer free Self Service tools for creating brand shops, a capability that is considered “table stakes” in today’s competitive retail landscape.
Goal:
Deliver a Self Service solution allowing Walmart’s 1P and 3P brand owners to build Brand Shops for Walmart.com and the Walmart’s mobile apps
OKRs (Objectives and Key Results):
- Provide brands greater control and customization within Shop Builder
- Enable/provide all modules
- Strive for parity with CP pages
Feature/Deliverables:
- Unlock Module – Flexibility & Configuration – Provide brands the ability to re-arrange the order in which they want their modules to be positioned on the page.
- Add Video Module – Enable a new module type: video, for brands to upload video assets within their Brand Shop page.
- (Internal) Add Module Level Insights to Brand Shop Reporting – Expand our internal insights and learnings to capture data on which modules are performing (clicks, conversions, etc.) to allow Product and XFNs make informed decisions on the future state.
- Share Static Preview – Enable a new module type: video, for brands to upload video assets within their Brand Shop page.
User Hierarchy
After interviewing an internal stakeholder whose role is to serve the customer service needs of users, I came up with this user hierarchy diagram.
This illustrates a structured arrangement of users based on different levels of access, permissions, or roles within a system or organization. Each level has specific nights, responsibilities and privileges.
User Persona
After examining the overarching needs and consequences of not addressing (based on findings and recommendations), I developed a minimal template of the user persona.
The main user personas included: Executor, Admin and Business owner
Addressing the Overarching Needs
As noted in the UX research, the overarching needs were: 1. Frictionless Start. 2. More flexibility and 3. Continuous Support
Through color coding the different users on the hierarchy, they are noted as follows on this index:
Executor (Account Manager, Partner Manager, Digital Marketing Manager)
Admin (Manager)
Business owner
Legal team
IA - Brand Shops
Information architecture (IA) is the labeling of content within the Brand Shop to facilitate effective navigation and information retrieval. This helps users understand where they are, what they can find and how to accomplish their goals within the Brand Shop.
The IA (information architecture) is broken into 3 parts: Brand Shop, Templates, Sections, and Elements.
Putting it all together
Userflows - Brand Shop and Shelf Page
Userflows refer to the representation of the steps a user takes to complete a specific task or achieve a particular goal within the Brand Shop. Userflows provide a structured overview of the interactions and decisions users make as they navigate through the building experience.
When the user creates a page, they have two choices: the Brand Shop or the Shelf Page.
The Brand Shop is one of the first pages a user builds to showcase their brand and the products they have to offer.
On the other hand, a Shelf Page gets more specific when a user has a theme in mind such as a product category or promotion.
Userflows - Brand Shop Sections
1. Hero Banner – is one of the first time visitors see when landing page on a website, and it typically spans the full width of the screen. It is strategically placed to grab the attention of users and create a strong visual impact.
2. Category Hub – refers to a section that serves as a starting point for accessing different categories of products or features within Walmart’s brands.
3. Item Carousel – displays as set of products or items in a rotating or sliding manner. It typically consists of a series of product images or cards and visitors can navigate through these items by clicking or swiping.
4. Promo cards – promotional cards are designed to highlight and promote specific products, deals, discounts or marketing campaigns for Walmart brands.
Wireframe Sketches
Since this project had a tight turnaround time, there wasn’t a whole lot of time to fully flesh out low and medium fidelity wireframes in Figma. While we were doing our team design sync, I sketched out the concepts on dotted sketch paper as we were discussing the different features that needed to be included in Brand Shop 2.0
Hi-Fidelity Brand Shop & Shelf Builder Mockups
After I got a clear idea of what the user experience would be implemented and what UI features needed to be included, it was time to flesh out hi-fidelity mockups for Brand Shop 2.0 MVP.
Since these were designed in the later stage of the process, these represent a more detailed and realistic representation of the Brand Shop.
Brand Shop Builder 2.0 Prototype
Next Steps
Immediate:
- Partners to review recommendations and implement changes
Research Opportunities:
- Test new concepts with users
- Benchmark the new experiences with PURE or ASUJ
- Consider content testing Help Documentation to identify how it can be more helpful
Ideation Opportunity:
- Consider design-led ideation session with stakeholders to brainstorm ways to meet suppliers and seller’s needs
UX Case Study:
Walmart -
E-Commerce Brand Shop Builder 2.0
Project Overview
Challenge
Walmart currently has. a brand shop builder for first party (1P) and third party (3P) sellers. Walmart is only second to Amazon with over 150,000 1P and 3P sellers who account for over 15% of Walmart’s total sales.
However, as of right now, it cannot compete with Amazon’s Seller Central due to its suboptimal user experience design.
Problem Statement
The inefficiencies and usability issues within the brand shop building platform contributes to a less-than-ideal environment for sellers. This potentially limits Walmart’s growth in the e-commerce market.
Objectives
- Frictionless start people need to easily sort showcasing their brand and products
- Continuous support people need guidance integrated in the experience
- More flexibility people need to be able to configure the pages to best tell their brand story
- Seamless customer experience people need customers to easily browse and find products
- Customer knowledge (metrics) people need to know more about the customer to create a better experience
Project App
Tools
Team
Senior Product Designer – Allison Kuehn
Senior UX Researcher – Tenzin Namdol
Previous Design
With limited prior research, it was important to understand people’s first-time experience using Shop Builder.
This what the old Brand Shop builder looked like with each section…
UX Research
According to the research conducted of 6 users (including brand shop owners, suppliers and sellers), they experienced the following issues with the current brand Shop builder:
Most people…
- were not sure how to use the Brand shop builder
- struggled to add and edit modules, text and images
- They came back to Shop page to input Shelf page URL. Then, they continue building the Shop page
Half the people…
- were confused by the order in which to build Shop and Shelf pages
- struggled to use modules because they did not meet the requirements
Few people…
- struggled to find what they were looking for on the Shop builder
- wanted more ways to tell a clearer story about their brand and increase customer’s confidence
- were frustrated by the limited ability to preview
- wanted more ways to add and edit items
- were frustrated at not being able to delete Shelf pages
- were frustrated at not being able to easily edit their live page
Through these findings, the following overarching needs were summed up as:
Frictionless Start 🎬
People need to easily start showcasing their brand and products.
More flexibility 💪
People need to configure the pages to best tell their brand story.
Continuous support 🫶
People need guidance integrated in the experience as they plan, build and improve pages.
Through the observation of user issues and definition of overarching needs, the following were recommendations that we implemented into the new design:
- Consider a more guided experience that can be turned off as people become more knowledgeable
- At minimum, inform people that they need a URL (Shelf or other)
- Enable people to select pre-built Shelf pages during the Shop building process
- Consider if the IA needs to be evaluated
- Consider ways the platform can be more adaptable to people’s needs
- Be able to rearrange the order of modules
- Consider option to add lifestyle images
- Consider a video and image editor within the experience
- Be able to preview at any time
- Easily move items between sections
- Be able to delete and edit sections
- Make it easier to edit live pages
Brand Shop Builder 2.0
Self-Serve Brand Shop - Background
- Brand Shops (BS) are digital storefronts for 1P and 3P brand owners. These pages tell a story and as such, inspire shoppers while also being used for transaction.
- Today, the Walmart Connect (WMC) and Site Ops teams manually build these pages – a lengthy and labor-intensive process that doesn’t scale to support the breadth of suppliers and sellers on our platform.
- Our major competitors (ex: Amazon) offer free Self Service tools for creating brand shops, a capability that is considered “table stakes” in today’s competitive retail landscape.
Goal:
Deliver a Self Service solution allowing Walmart’s 1P and 3P brand owners to build Brand Shops for Walmart.com and the Walmart’s mobile apps
OKRs (Objectives and Key Results):
- Provide brands greater control and customization within Shop Builder
- Enable/provide all modules
- Strive for parity with CP pages
Feature/Deliverables:
- Unlock Module – Flexibility & Configuration – Provide brands the ability to re-arrange the order in which they want their modules to be positioned on the page.
- Add Video Module – Enable a new module type: video, for brands to upload video assets within their Brand Shop page.
- (Internal) Add Module Level Insights to Brand Shop Reporting – Expand our internal insights and learnings to capture data on which modules are performing (clicks, conversions, etc.) to allow Product and XFNs make informed decisions on the future state.
- Share Static Preview – Enable a new module type: video, for brands to upload video assets within their Brand Shop page.
User Hierarchy
After interviewing an internal stakeholder whose role is to serve the customer service needs of users, I came up with this user hierarchy diagram.
This illustrates a structured arrangement of users based on different levels of access, permissions, or roles within a system or organization. Each level has specific nights, responsibilities and privileges.
User Persona
After examining the overarching needs and consequences of not addressing (based on findings and recommendations), I developed a minimal template of the user persona.
The main user personas included: Executor, Admin and Business owner
Addressing the Overarching Needs
As noted in the UX research, the overarching needs were: 1. Frictionless Start. 2. More flexibility and 3. Continuous Support
Through color coding the different users on the hierarchy, they are noted as follows on this index:
Executor (Account Manager, Partner Manager, Digital Marketing Manager)
Admin (Manager)
Business owner
Legal team
IA - Brand Shops
Information architecture (IA) is the labeling of content within the Brand Shop to facilitate effective navigation and information retrieval. This helps users understand where they are, what they can find and how to accomplish their goals within the Brand Shop.
The IA (information architecture) is broken into 3 parts: Brand Shop, Templates, Sections, and Elements.
Putting it all together
Userflows - Brand Shop and Shelf Page
Userflows refer to the representation of the steps a user takes to complete a specific task or achieve a particular goal within the Brand Shop. Userflows provide a structured overview of the interactions and decisions users make as they navigate through the building experience.
When the user creates a page, they have two choices: the Brand Shop or the Shelf Page.
The Brand Shop is one of the first pages a user builds to showcase their brand and the products they have to offer.
On the other hand, a Shelf Page gets more specific when a user has a theme in mind such as a product category or promotion.
Userflows - Brand Shop Sections
1. Hero Banner – is one of the first time visitors see when landing page on a website, and it typically spans the full width of the screen. It is strategically placed to grab the attention of users and create a strong visual impact.
2. Category Hub – refers to a section that serves as a starting point for accessing different categories of products or features within Walmart’s brands.
3. Item Carousel – displays as set of products or items in a rotating or sliding manner. It typically consists of a series of product images or cards and visitors can navigate through these items by clicking or swiping.
4. Promo cards – promotional cards are designed to highlight and promote specific products, deals, discounts or marketing campaigns for Walmart brands.
Wireframe Sketches
Since this project had a tight turnaround time, there wasn’t a whole lot of time to fully flesh out low and medium fidelity wireframes in Figma. While we were doing our team design sync, I sketched out the concepts on dotted sketch paper as we were discussing the different features that needed to be included in Brand Shop 2.0
Wireframe Sketches
After I got a clear idea of what the user experience would be implemented and what UI features needed to be included, it was time to flesh out hi-fidelity mockups for Brand Shop 2.0 MVP.
Since these were designed in the later stage of the process, these represent a more detailed and realistic representation of the Brand Shop.
Brand Shop Builder 2.0 Prototype
Next Steps
Immediate:
- Partners to review recommendations and implement changes
Research Opportunties:
- Test new concepts with users
- Benchmark the new experiences with PURE or ASUJ
- Consider content testing Help Documentation to identify how it can be more helpful
Ideation Opportunity:
- Consider design-led ideation session with stakeholders to brainstorm ways to meet suppliers and seller’s needs
Walmart - E-Commerce Brand Shop Builder 2.0
Project Overview
Challenge
Walmart currently has. a brand shop builder for first party (1P) and third party (3P) sellers. Walmart is only second to Amazon with over 150,000 1P and 3P sellers who account for over 15% of Walmart’s total sales.
However, as of right now, it cannot compete with Amazon’s Seller Central due to its suboptimal user experience design.
Problem Statement
The inefficiencies and usability issues within the brand shop building platform contributes to a less-than-ideal environment for sellers. This potentially limits Walmart’s growth in the e-commerce market.
Objectives
- Frictionless start people need to easily sort showcasing their brand and products
- Continuous support people need guidance integrated in the experience
- More flexibility people need to be able to configure the pages to best tell their brand story
- Seamless customer experience people need customers to easily browse and find products
- Customer knowledge (metrics) people need to know more about the customer to create a better experience
Project Scope
Tools
Team
Senior UX Designer – Allison Kuehn
Senior UX Researcher – Tenzin Namdol
Previous Design
A Shelf page contains a curated assortment of items from a brand designed with a specific theme, category or promotion in mind.
This what the old Brand Shop builder looked like with each section…
UX Research
According to the research conducted of 6 users (including brand shop owners, suppliers and sellers), they experienced the following issues with the current brand Shop builder:
Most people…
- were not sure how to use the Brand shop builder
- struggled to add and edit modules, text and images
- They came back to Shop page to input Shelf page URL. Then, they continue building the Shop page
Half the people…
- were confused by the order in which to build Shop and Shelf pages
- struggled to use modules because they did not meet the requirements
Few people…
- struggled to find what they were looking for on the Shop builder
- wanted more ways to tell a clearer story about their brand and increase customer’s confidence
- were frustrated by the limited ability to preview
- wanted more ways to add and edit items
- were frustrated at not being able to delete Shelf pages
- were frustrated at not being able to easily edit their live page
Through these findings, the following overarching needs were summed up as:
Frictionless Start 🎬
People need to easily start showcasing their brand and products.
More flexibility 💪
People need to configure the pages to best tell their brand story.
Continuous support 🫶
People need guidance integrated in the experience as they plan, build and improve pages.
Through these findings, the following overarching needs were summed up as:
- Consider a more guided experience that can be turned off as people become more knowledgeable
- At minimum, inform people that they need a URL (Shelf or other)
- Enable people to select pre-built Shelf pages during the Shop building process
- Consider if the IA needs to be evaluated
- Consider ways the platform can be more adaptable to people’s needs
- Be able to rearrange the order of modules
- Consider option to add lifestyle images
- Consider a video and image editor within the experience
- Be able to preview at any time
- Easily move items between sections
- Be able to delete and edit sections
- Make it easier to edit live pages
Brand Shop Builder 2.0
Self-Serve Brand Shop - Background
- Brand Shops (BS) are digital storefronts for 1P and 3P brand owners. These pages tell a story and as such, inspire shoppers while also being used for transaction.
- Today, the Walmart Connect (WMC) and Site Ops teams manually build these pages – a lengthy and labor-intensive process that doesn’t scale to support the breadth of suppliers and sellers on our platform.
- Our major competitors (ex: Amazon) offer free Self Service tools for creating brand shops, a capability that is considered “table stakes” in today’s competitive retail landscape.
Goal:
Deliver a Self Service solution allowing Walmart’s 1P and 3P brand owners to build Brand Shops for Walmart.com and the Walmart’s mobile apps
OKRs (Objectives and Key Results):
- Provide brands greater control and customization within Shop Builder
- Enable/provide all modules
- Strive for parity with CP pages
Feature/Deliverables:
- Unlock Module – Flexibility & Configuration – Provide brands the ability to re-arrange the order in which they want their modules to be positioned on the page.
- Add Video Module – Enable a new module type: video, for brands to upload video assets within their Brand Shop page.
- (Internal) Add Module Level Insights to Brand Shop Reporting – Expand our internal insights and learnings to capture data on which modules are performing (clicks, conversions, etc.) to allow Product and XFNs make informed decisions on the future state.
- Share Static Preview – Enable a new module type: video, for brands to upload video assets within their Brand Shop page.
User Hierarchy
After interviewing an internal stakeholder whose role is to serve the customer service needs of users, I came up with this user hierarchy diagram.
User Persona
After examining the overarching needs and consequences of not addressing (based on findings and recommendations), I developed a minimal template of the user persona.
The main user personas included: Executor, Admin and Business owner
Addressing the Overarching Needs
As noted in the UX research, the overarching needs were: 1. Frictionless Start. 2. More flexibility and 3. Continuous Support
Through color coding the different users on the hierarchy, they are noted as follows on this index:
Executor (Account Manager, Partner Manager, Digital Marketing Manager)
Admin (Manager)
Business owner
Legal team
IA - Brand Shops
Information architecture (IA) is the labeling of content within the Brand Shop to facilitate effective navigation and information retrieval. This helps users understand where they are, what they can find and how to accomplish their goals within the Brand Shop.
The IA (information architecture) is broken into 3 parts: Brand Shop, Templates, Sections, and Elements.
Putting it all together
Userflows refer to the representation of the steps a user takes to complete a specific task or achieve a particular goal within the Brand Shop. Userflows provide a structured overview of the interactions and decisions users make as they navigate through the building experience.
When the user creates a page, they have two choices: the Brand Shop or the Shelf Page.
The Brand Shop is one of the first pages a user builds to showcase their brand and the products they have to offer.
On the other hand, a Shelf Page gets more specific when a user has a theme in mind such as a product category or promotion.
Userflows - Brand Shop Sections
1. Hero Banner – is one of the first time visitors see when landing page on a website, and it typically spans the full width of the screen. It is strategically placed to grab the attention of users and create a strong visual impact.
2. Category Hub – refers to a section that serves as a starting point for accessing different categories of products or features within Walmart’s brands.
3. Item Carousel – displays as set of products or items in a rotating or sliding manner. It typically consists of a series of product images or cards and visitors can navigate through these items by clicking or swiping.
4. Promo cards – promotional cards are designed to highlight and promote specific products, deals, discounts or marketing campaigns for Walmart brands.
Wireframe Sketches
Since this project had a tight turnaround time, there wasn’t a whole lot of time to fully flesh out low and medium fidelity wireframes in Figma. While we were doing our team design sync, I sketched out the concepts on dotted sketch paper as we were discussing the different features that needed to be included in Brand Shop 2.0
Hi-Fidelity Brand Shop & Shelf Builder Mockups
After I got a clear idea of what the user experience would be implemented and what UI features needed to be included, it was time to flesh out hi-fidelity mockups for Brand Shop 2.0 MVP.
Since these were designed in the later stage of the process, these represent a more detailed and realistic representation of the Brand Shop.
Brand Shop Builder 2.0 Prototype
Next Steps
Immediate:
- Partners to review recommendations and implement changes
Research Opportunities:
- Test new concepts with users
- Benchmark the new experiences with PURE or ASUJ
- Consider content testing Help Documentation to identify how it can be more helpful
Ideation Opportunity:
- Consider design-led ideation session with stakeholders to brainstorm ways to meet suppliers and seller’s needs
