My Role

What I did

UX Designer

Visual Designer

User research

Concept Development

Interface Design

Tools Used

Figma

After Effects

Voiceflow

Photoshop

10 weeks

Duration

Mobile App Design

VUI Motion Design

OVERVIEW

Problem

An average person sits on hold for 42 minutes when calling customer service.

The Solution

This case study revolves around the creation of an intelligent, virtual assistant equipped with responsive voice-led capabilities. The core objective of this solution is to enhance and streamline the customer support experience through a web-based customer support portal. By harnessing the power of conversational AI, this virtual assistant aims to address the key pain points of high inquiry volumes, consistency in responses, handling complex queries, ensuring continuous availability, accommodating business growth, achieving personalized interactions, and facilitating effective agent training.

OUTCOME

Concept Video

Hi, I am LUMI!
How may I help you today?

OUTCOME: INTERFACE DESIGN

LUMI better ​provides the users with the support they need

Make Lumi your everyday buddy!

  1. Find the right product

  2. Order or schedule the correct product for you

  3. Solve a delivery issue

  4. Solve refund and return issues

Find the Right Product

The "Find the Right Product" screen provides users with a personalized product recommendation experience, where they share their preferences, and the virtual assistant offers tailored product options, along with the ability to explore further details or recommendations in different categories.

Multi-Language Support

Enable users to choose their preferred language for interacting with the virtual assistant, offering a more inclusive experience for a diverse user base.

Integration with Other Services

Allows users to integrate LUMI with other services, like email or social media, for a more comprehensive and integrated customer support experience.

EXPLORATION

Why Focus on E-Commerce Customer Support?

Irrespective of the business type, the importance of a robust customer support strategy cannot be undermined. This is what keeps contact centers at the core of such a strategy. With rising customer expectations, most contact centers are under tremendous pressure to do more with fewer resources.

On one side, cost-cutting narrows down the quality of customer support to be delivered. On the other, there are higher contact volumes via inbound and outbound customer communication channels paired with complex consumer problems. This is where technology, in the form of conversational AI, comes to the rescue.

What is the current status of customer support?

  • Omnichannel Support: Many businesses have adopted an omnichannel approach to customer support, offering assistance across various channels, such as phone, email, live chat, social media, and self-service portals. This allows customers to choose the most convenient method of communication.

  • Companies have been dealing with a record influx of support tickets—30% every year. And with people shopping more online, it's become the primary way that customers engage with brands.

Source:https://www.zendesk.com/blog/customer-service-trends/

63% of companies are prioritizing customer experiences more after 2021

Common issues that lead to people feeling frustrated with customer support.

By conducting on-site research and engaging in interviews with 20 individuals who regularly shop online, I obtained firsthand insights into their online shopping journeys. Through these conversations, I gained a comprehensive understanding of their experiences, both from the perspective of customer support interactions and the actual shopping process. This approach also enabled me to identify common challenges that people commonly encounter during their online shopping process.

SCENARIO USER JOURNEY WITH PAINPOINTS : Online Purchase Issue

UX DESIGN: SITE MAP

Establishing the scope of the project

The main focus is on the features of VUI, which make it easier for users to find and use features in an app. Also, the VUI improves the human side by making it easier for users to find information without having to read a lot or do the same steps over and over again, as they would have to do in a Graphical User Interface (GUI).

UX DESIGN: REFINED USER JOURNEY USING LUMI

New User Journey with Features

Generated ideas for features aimed at tackling the challenges and tasks uncovered during our research. Our process began with outlining the complete user’s online journey, spanning from initial website chat interactions to order inquiries and addressing delivery concerns. Among the numerous improved journeys resulting from our feature brainstorming, here are a select few that we have further developed.

Why VUI Be Helpful To Solve regular shoppers ' Problems?

Upon examining the touchpoints and user requirements of regular shoppers, it's clear that a Voice User Interface (VUI) offers significant advantages for problem-solving and enhancing customer support. VUI provides convenience and accessibility, allowing hands-free interaction and quicker support responses, resulting in personalized assistance and streamlined product searches using voice commands.

UX DESIGN: USER FLOW

New User Journey with Features

I developed user pathways that encompass both existing functionalities and future possibilities. Through a comprehensive analysis of these pathways, I successfully pinpointed areas of friction within the current user experience and addressed these pain points by undertaking a redesign process that involved reorganizing elements, introducing novel interactions, and incorporating fresh features. This iterative approach has enabled us to craft user-centric and smooth-flowing experiences, ensuring that engaging with our products is not only effortless but also a source of enjoyment for our users.

User Flow for Product Recommendations

  • The designed user flow for "Product Recommendations" within the website chat demonstrates a strategic approach to guiding users seamlessly through the process. This user flow streamlines the interaction, allowing users to receive personalized product suggestions and make informed choices with ease.

User Flow for Delivery Issue

  • A user flow tailored to address "Delivery Issues" within the context of E-commerce Customer Support demonstrates a meticulous approach to enhancing the user experience. This user flow is meticulously designed to assist users seamlessly through the process of resolving delivery-related concerns

User Flow for Order Inquiry

  • The user flow for "Order Inquiry" in E-commerce Customer Support ensures seamless navigation for users seeking information about their orders. From identifying the order to addressing delivery status, product details, and potential issues, the flow offers a comprehensive and user-centric support experience, fostering confidence and satisfaction.

UX DESIGN: CONCEPT AND TESTING

Wireframing the Application

I initiated the wireframing process and experimented with two different design concepts for Voice User Interfaces (VUI). The first concept emphasized a heading-centric approach on the left side, while the other featured a Conversational User Interface (UI) 💬 on the right side. Our objective was to evaluate which design would offer a more intuitive user experience for navigating and accomplishing tasks. To assess this, we conducted A/B testing with our colleagues.

2 UI CONCEPTS: TO BE A/B TESTED

Overcoming the challenges of initial wireframes

The first design sketch was simple, but people said it couldn't remember past talks, and the way it worked was not easy to understand. It also wasn't using the voice interface to its fullest potential.

WIREFRAME CONCEPT: HEADING DOMINATE UI

Balancing Intuitiveness with Functionality

In the end, I found that the Conversational UI design 🗨️ was more successful because it offered a more natural and human-like interaction. Users could also view their conversation history, see past actions, and finish their tasks more easily. This led to a more efficient and straightforward task completion process.

(VALIDATED) WIREFRAME CONCEPT: CONVERSATION UI 💬

REFINED UI AFTER A/B TESTING

DESIGNING THE VUI

NOW LET’S MEET LUMI!

LUMI’S Design System

In our pursuit of establishing a visual system that exudes reliability, warmth, and professionalism, LUMI crafted a fresh palette featuring shades of purple.

LUMI’S Logo and Form

VUI Motion States

Meet LUMI’S siblings

Resting

Processing

Awake

Success

Listening

Error

Speaking

Confused

GRAPHICAL USER INTERFACE

Activating LUMI

I learned about universal design principles and keeping user’s information private. I then tried out different ways for users to use their voice to control LUMI. Users can talk to LUMI by saying "Hey LUMI" and touching the screen to talk or type on the keyboard.

Mobile Interface

By understanding universal design principles, I explored voice activation prototypes aimed at helping users reach their objectives.

VUI Integration

After initiating LUMI, the app moves to a conversation page. The VUI states are designed to complement GUI patterns on the screen

Mobile GUI

I've prepared a comprehensive, high-fidelity wireframe user flow that is an example of the process of "discovering the perfect product." This flow offers a detailed visual representation, providing a deeper understanding of the design elements and interactions at play, and facilitating a more thorough grasp of the user experience.

* These are just a few sample screens to test the visual design

PROTOTYPING 💻

LUMI creation in Voiceflow

In the development of LUMI, I used Voiceflow to create a conversation flow prototype encompassing various scenarios, including the ideal user journey, error handling, and security protocols such as user identity verification. This integration with Voiceflow enabled to perform remote usability testing sessions that closely simulated real-life interactions, facilitating a smoother iterative process during product development.

Screenshot of prototype V.1 (VUI only)

Testing

Wizard of Oz

In the initial phase of our product development, I conducted remote usability testing using the Voiceflow prototype. This testing involved five young adults who had previously participated in our survey. This early testing allowed to achieve the following objectives:

  1. Gain insights into the reasons behind users' hesitations concerning the use of Voice User Interfaces (VUI) for their e-commerce activities, as identified in the prior A/B Testing of wireframes.

  2. Observe and record users' responses to the prototype, noting alternative phrasings and interactions.

  3. Capture and document user mental models, understanding how they anticipate the VUI to function and their expectations regarding its operations.

  4. Evaluate users' ability to successfully complete the designated tasks.

This user testing phase was crucial in shaping our product's development and enhancing its user-friendliness.

Key Insights 💡

Here are the key insights we observed and analyzed from the participants’ interviews and testing sessions.

Affinity Diagram and usability testing data analysis

What worked well 😊

Preference for Multimodal Experience

Users expressed a strong preference for the multimodal prototype, which combined voice interaction with visual information. This dual-mode approach was well-received, as participants found it more engaging and informative.

Option to Read Information

Participants appreciated having the choice to either listen to the voice assistant's spoken information or read it visually. This flexibility was well-received and catered to individual preferences.

What can be improved? ☹️

Concern with accuracy

Participants were also concerned with accuracy, especially errors that may occur due to miscommunication between the system and the user. Double confirmation with important information is needed.

Limitation of the prototype

More glitches and technical issues happened during user testing 2. Voiceflow cannot detect accents and misunderstood what the participants said. Moving forward, we need to invest in more reliable prototyping tools for long-term usability testing.

Final Learning 🖼

Through two rounds of user testing, I saw a continuous trend in people's concern with the safety and security of using VUI. I proposed that these improvements can be tackled by considering features our interviews identified as contributing to users' experience of voice assistants for E commerce.

Improve Interactions

  • Prompts

  • Visual aids

  • Concise conversation language

  • Option to speed up voice pace of VUI

What I learned

User testing is super important for this project because one of our main goals was to figure out how people understand and use voice user interfaces (VUIs). Even though there are some similarities with testing regular mobile apps, there are also some big differences. One challenge was finding practical ways to test VUIs and deciding how to interview our testers and measure success.

Testing our VUIs was tricky because the usual methods, like users talking out loud while testing and capturing their screens, didn't work. However, by using tools like Voiceflow and creating good questions for interviews after testing, I managed to test VUIs early on. This helped gather both numbers and opinions from the testing. By doing this, I learned how people talk and interact with our system and used that knowledge to improve our VUIs.

Take a look at other case studies