Live Chat

A customer service experience for Zappos.com

 

The Problem

Customers need a quick and efficient way to contact customer service to solve their problems. 

Client

Consumers of the online retailer

Timeline

2 months

Team

Maney Orm (UX Designer), Ryuji Mano (iOS Developer), Kito Pham (Android Developer), Dorothy Wang (Front-End Developer), Sourav B. (UX Researcher)

The Solution

A dynamic live chat experience, connecting customer service with customers through iOS, Android, Desktop, and Mobile Web applications. 

The Problem

  • Reimagine the user flow of the current live chat of the e-commerce site on multiple platforms, thinking of ways to make it easier and faster to use.

  • Introduce and visualize new features/interaction flows such as media adding, static pill selecting, and personalization to enhance the customer experience.

My Role

  • Create initial design concepts for a new user flow that makes the experience more efficient

  • Conduct remote user interviews that gives data on user expectations of live chat functionalities

  • Visual designs for initial prototypes

  • User testing of initial prototypes

  • Final design of user flow and user interface

 

Impact

25% of customers at this online retailer currently use live chat as their primary source of contact to solve issues with orders. This retailer is heavily focused in customer service, making the functionality of live chat feature extremely important. 

Process

The first step in the process was to identify issues in the current live chat. Those issues included:

  • Visual inconsistency with the live chat UI and the brand's design system

  • Static loading page caused bounce rates to rise from live chat due to confusion of whether the customer was being connected

  • Users were unable to add media to their messages, making it less easy for customers to articulate their issues with product

After identifying issues, I began performing competitive analysis of other live chats. Companies I observed included Warby Parker, Nordstrom, and Amazon. From there, I was able to begin brainstorming through sketching wireframes of possible user flows. From there I was able to gain feedback from the team, iterate on ideas, began to digitally prototype, gained feedback again, and finally come to two final user flow possibilities. This was when user testing took place to determine the best solution. 

 

Initial user interface of live chat on desktop:

Who are the users?

The live chat customer does not like talking to someone on the phone. They'd rather be able to multitask other priorities, such as browsing product, but talk to customer service in the background. This online retailer's live chat customer demographic is heavily focused on the idea of good customer service. They need frequent discount concessions, fast shipping, easy returns, and friendly team members to service them at all times.  The live chat feature needs to provide the friendly, fast service to customers while they are utilizing live chat to shop. 

Success Metrics

  • The number of resolved customer problems is increased

  • Clickable Pill FAQ's cause the number of customers needing more assistance from customer service to decrease, increasing productivity for customer service team members

  • Order conversion increases because customers are able to get their questions answered quickly

  • Time of filling out form fields decreases as users who are signed in do not need to provide their information

User Research

  • Through Invisionapp, Sourav and I tested 3 variations: the current live chat UI, the pop-up modal, and the minimizable chat window with 2 users.

Data needed from user testing and interviews:

  • What users think of the already-existing live chat flow and if there was even a problem?

  • Where users naturally expected live chat to show up?

  • How users expect clickable pills to function?

  • How visually appealing the new prototypes were compared to the already-existing live chat.

Conclusion from Research

  • Users naturally assume that live chat would initially pop-up to the bottom right of the screen, because many other live chats show up in that area.

  • Users also reacted better to the minimizable chat window because it was smaller than the pop-up modal and covered less real estate on the product pages.

  • Customers stated that they expected the clickable pills to lead them to an FAQ after clicking them.

  • Customers also liked the idea of personalization, where if they were already signed in, the live chat would already know who they are and customers could just get straight into asking their questions.

Solution

DESKTOP & MOBILE WEB:

  • A minimizable chat window to the bottom right of the screen.

  • Live Chat recognizes whether customers are logged in or logged out, and will dynamically change it's form field based on that information.

  • Customers are able to click on question-populated pills, which provide some of the most frequently asked questions by customers to customer service. Customers are provided a link to an FAQ page which can answer their question, or if they decide they need more assistance, they are able to type in their information and question and connect to customer service.

  • Add-media option

  • Consistent visual design language with the brand's design system.

iOS: The user flow is consistent with the brand's desktop web version, however the customer's minimizing and adding media experience changes to comply with iOS's design guidelines.

ANDROID: The user flow is consistent with the brand's desktop web version, however the customer's minimizing and adding media experience changes to comply with Android's Material Design guidelines.

Mobile Web UI

IOS User Flow

IOS User Flow

Android User Flow

Android User Flow

Reflection

During this process, the solution became more complex as the exploration of live chat unraveled. There was not one clear path on how to reimagine the user flow, hence I did not know where to begin. If I were to do things differently, I would talk to a lot more users first hand and get their ideas on how live chat should and could work. Although the solution I came up with is a decent solution, live chat can become even smarter and gauge customer questions before they even think of them and answer them before even having to talk to customer service. This was overall a great learning experience and I am eager to explore further depths of live chat in the future. 

Future

In the future I would like to explore dynamic pill faceting, where the pills change as customers click through pill options. That would require much more user research and testing. I would also like to explore creating a smoother flow for the return experience in live chat and how customers could possibly make purchases through live chat. All of these features are just a few of the many user experiences that could be continually evolved through time.