Jason Nguyen

  • UX3DAbout

Designing an ethnographic research-informed customer care system to empower and enhance Walmart associate support.

Organization: Walmart Customer Care

Project Summary

As one of the world’s largest retailers, Walmart experiences some of the highest rates of customer service requests in the industry.

Recognizing this, our team saw an opportunity to tackle challenges faced by customer care associates and the systems they rely on daily.

Diving into these issues, we aim to enhance both the efficiency and effectiveness of the customer service operations, ultimately improving the experience for both customers and employees.

My Responsibilities

  • Ethnographic Research & Survey
  • Competitive Analysis
  • Wireframes
  • Prototype
  • Animation
  • Front-End Development for Landing Page

Timeline & Team

3 weeks | UX team of 6.

Defining The Problem

What's The Problem?

Though robust, Walmart’s customer care system can be slow and inefficient and does not offer features customer care associates need to appropriately solve or flag requests.

The Goal

We believe an intuitive customer care system will enable customer care associates to quickly validate users and provide effective solutions, resulting in high user satisfaction, customer retention, and an increase in overall financial profit.

Key Research Takeaways

Graphic showing what kind of research was done. Secondary research with 28 articles cited. Surveys with 41 survey responses. Ethnographic observation with 11 stores visited. And user interviews with 4 users interviewed.

Survey Results

Associates want better tools and integrated systems.

Many asked for more communication between associates and management.

Understaffing was a major concern.

Ethnographic Research

Associates experience high volumes of requests.

The typical return process includes reason for requests, inspection, verification, and receipt.

33% of customers made a return with a receipt, while others used their credit card for validation.

User Interviews

Associates want more intuitive systems that make searching for a customer information easier.

Associates want a quick and easy way to escalate requests or call higher-ups.

Associates want a simpler way to process requests for damaged items.

User Persona

Who Is the Target User?

Profile picture of young working male.

JAY, 29
Walmart In-Store Customer Care Associate
‍
Jay has been working as a customer care associate for three years. He is responsible for customer inquiries and providing assistance in-store. Jay is passionate about his job, and is committed to providing excellent customer care.

Needs

Streamlined customer care system that incorporates necessary tools in one platform.

To seamlessly find/retrieve customer information like product tracking.

Goals

Efficiently handle customer requests to enhance customer service experience.

Quickly validate the customer and get all necessary information about the order.

Pain Points

Not having the ability to make case-specific judgment call exceptions to policies.

Limited ability to view and use customer information to provide insights.

Potential Solutions

User-friendly customer care interface that provides necessary assistance all in one place.

Implement a system for tracking and analyzing customer feedback and complaints.

MVP

After synthesizing the information from the research phase, a minimum viable product (MVP) was determined. The synthesized insights were used to address the limitations of the current system and discover a MVP that would provide a better experience for associates.

Minimum viable product graphic.  It shows one half of a pyramid sectioned into 5 parts, and each part represents what the product should have. The lowest section, number 1, is the foundation. From 1 through 5, we have Functionality, User-Centered, Usability, Intuitive, and UI.

Some Key Features of this MVP include:

The ability to flag customers and call managers.

A customer profile database.

A product catalog.

A company-wide knowledge base for frequently asked questions.

Task Flow

Task flow chart showing the process for returns on the customer care dashboard.

New Streamlined Task Flow

Our streamlined task flow empowers customer care associates to efficiently assist customers returning damaged items. By simplifying the process from validation to refund on the dashboard, we ensure faster transactions, improved customer satisfaction, and increased productivity for associates.

Designing A Solution

Sketching Out Ideas

Sketching digital screens with the goal to simplify associates' return process for damaged items.

Low fidelity screen of the customer care dashboard. This screen shows the first step of the process where associates are able to choose between returning an item, exchange an item, or order lookup.
Low fidelity screen of the customer care dashboard with item returns and services. This specific screen is step 3 of the process, where associates can select items for refund, see the payment details, and choose a refund method.
Low fidelity screen of the customer care dashboard for confirming a return request. This is the last step of the process and the associate is able to view the scanned customer receipt, the items for return, reasons for return, refund amount, and button to proceed with refund.

Testing & Iterating

Usability Testing and What To Revise

Changes for mid-fidelity wireframes based on testing results and user insights.

Mid fidelity wireframe of the Walmart Customer Care dashboard. Highlighted are the order details and the dropdown menu for reasons for return.

Scanned Receipt Screen

  • All items listed on receipt after scanned by associate.

  • Total costs in center column.

Select "Reason" Dropdown

  • After item is scanned, associates can select the reason for return.

  • Notes and remove added to menu.

Mid fidelity wireframe of the Walmart Customer Care dashboard. Highlighted is the refund method buttons. Options include: Credit Card, Gift Card, Debit Card, Cash, EBT Card, and Check. Only Credit Card and Gift Card are available based on initial payment.

Refund Screen

  • Associate can select the method of payment the customer wants for return.

Additional Testing and Recommendations

The screens here were used during additional usability tests, which eventually led to revisions to the design.

Mid fidelity wireframe of the Walmart Customer Care dashboard. Highlighted is the Total Amount which initially was placed screen center.

Issue:Users expected to see receipt totals in the bottom right corner.

Recommendation:Realign all content in receipt screen to match industry standards.

Mid fidelity wireframe of the Walmart Customer Care dashboard. Highlighted is the dropdown menu for reasons for return.

Issue:Users wanted the option to adjust quantities with minimal steps.

Recommendation:Add quantity drop down so users can adjust and remove.

High Fidelity

The resulting mock-ups from a combo of Walmart’s existing design system, our assets, and usability testing results. Changes for mid-fidelity wireframes based on testing results and user insights.

Also seen here is the Customer Care mobile companion we designed with associates in mind. In this case, it functions as a convenient way for managers to track, approve, or deny any transaction requests from their colleagues without having to be physically present at a kiosk.

High Fidelity mock-up of the the customer care dashboard as seen on desktop. This screen shows the third step in the refund process for associate, displaying refund details like item name, item number, quantity, reason, dollar amount, and payment method. Associates are able to select refund method here and confirm the return.
High fidelity mock-up of the Customer Care Dashboard mobile companion for employees. It displays the home screen with a list of pending transaction approvals and a separate screen for detailed individual approval requests.

Animations

I created a simple and joyful loading screen to show system status for the associate when completing a return approval request. The animation is consistent with Walmart’s brand identity, created to replicate a loading screen on the Walmart website. The colors are Walmart brand colors, using their “rainbow” palette.

My Loading Animation

Animation of the loading animation I worked on. It consists of a colorful variation of the Walmart logo that spins to indicate loading to the user.

Design Rationale

Why did we do the things we did? Design rationale enables concise explanation and intention for design decisions made.

High fidelity desktop screen of the customer care dashboard with design rationale.
High fidelity desktop screen of the customer care dashboard with design rationale.
High fidelity desktop screen of the customer care dashboard with design rationale.
High fidelity mobile screen of the customer care dashboard with design rationale. Approval Request: Managers can see the item name/number, purchase condition, and the requester so they can confirm the return eligibility. REFUND AMOUNT: The total refund amount is in bold at the bottom so it’s the last thing managers see as they’re making their decision. APPROVE OR DENY: We chose to use Walmart’s red and green colors from their design system since they most notably correlated with ‘yes’ and ‘no.’ If a manger clicks deny, they will be prompted to visit the customer service counter to explain the decision to the customer.

Design System

The system was important to keep the dashboard consistent and easy to pass off to others. This also meant ensuring the designs passed accessibility tests and stayed within Walmart guidelines. Below are samples from the final design system.

Samples of the Walmart Customer Care Dashboard design system. It shows the typography, colors, grid system, accessibility ratio, icons, and logo usage. All based on Walmart's current branding.

Interactive Prototype

The final result can be seen in this interactive prototype that guides users through the new system, including the steps managers may take on their mobile companion app.

Desktop Prototype

High Fidelity mock-up of the Walmart Customer Care Dashboard login screen as seen on desktop. There is a play button overlaying the screen to indicate it links to the prototype.
View DESKTOP Prototype

Coded Landing Page

For the last bit of the project, I created a live page using HTML, CSS, and Bootstrap to display the design and rationale.

Screenshot of the coded landed page I created. It displays information on why we did this project, the specifications, group members, and list of deliverables.
View Landing Page

Recap of the Process

Graphic listing the steps of the process from left to right: Empathize, Define, Ideate, Prototype, Test, and Iterate.

What Did I Do?

The overall project involved, but not limited to, the following:

  • conducting surveys and interviews with possible users.
  • participating in ethnographic research across 11 different retail stores.
  • developing low to high fidelity designs.
  • creating animations and micro-interactions.
  • usability testing with real users.

Final Thoughts

High fidelity mock-up of the Customer Care dashboard login screen. The top of the screen has the Walmart logo, language selector, date, and time. Employees have a choice to scan their badge or enter their employee ID and password manually to login.

Takeaways

A highlight of this project was definitely the ethnographic research which physically brought us to numerous retail stores to speak with their associates. It broaden the scope of empathy and opened our eyes to the real issues, which in turn, defined the solution.

Based on two rounds of usability testing with very positive feedback, we believe our solution was successful. Throughout our design process, we made sure to prioritize features that would address the pain points of real customer case associates we found during the research phase.

Some of our priorities included:

  • Easy way to associates to flag customers.

  • Feature allowing associates to digitally ping managers.

  • Simple returns interface allowing associates to report damaged items, and other complex transactions.

  • Scalable designs that allow for adding content and features.

  • Accessible visual design that caters to all users.

Like what you see?

Go to next >
see all ux work >
see all 3d Work >

Let's create something together.

jnguyen3d@gmail.com
© 2024 Jason Nguyen. All rights reserved.
HomeUX3DABOUT