a published work!

Want to see the beginnings of this project?

Visit "Designing for a Chatbot (In Progress)"

Written by Rachelle Caparroso

Published by Chatbot News Daily

Project Overview

the objective

To design a proof of concept and prototype a chatbot for internal testing.

"Robert, why do you need a chatbot?"

the problem

Sysco's customer service department is increasingly receiving a large volume of calls everyday. The department doesn't have the bandwidth to address all calls in a timely manner leaving customers frustrated and angry. About 30% of customer issues are order related (e.g. checking order status, finding substitute items when out of stock, etc.)

conversational ux/UI

the solution

A chatbot prototype and digital experience that creates a human connection between Sysco and their customers by facilitating helpful conversations.

My Role

Interaction Designer (Group Project)

The tools

• Pivotal Tracker

• XMind (Mind Mapping Tools)

• Whiteboard

• Sketch

• Flinto

"You're designing a chatbot" (Heck Yes!)

thoughts and feelings

When I received my client assignment, I was ecstatic to 1) design for an established brand - Sysco Corporation, and 2) build a chatbot because:

• Chatbots are a trending technology. There are many brands including Facebook (Messenger), Amazon (Alexa/Echo), H&M are using chatbots to interact with their customers and drive engagement.
• Conversational UX involves a new and unique design approach compared to mobile/desktop design.
• This is a unique project that a handful of designers have experience in.

Research & Exploration

understanding sysco needs

the first meeting - hypothesis, expectations and deliverables

We met with our client to understand Sysco needs and expectations for a chatbot, and to clarify deliverables. Ultimately, we needed to understand client motivations and reasonings to define scope and guide research methods.

• Hypothesis
  • Chatbot will reduce call volume by tackling less complex customer problems especially order related problems and inquiries.
• Expectations
  • Meet as per request from my team and I
  • Proof of concept to be used for internal testing
  • Using api.ai for natural language understanding
• Deliverables
  • Prototype
  • Mockups 

the source of the chatbot need

user-centered or not?

To determine research methods and timeframe, I needed to understand whether the client need was user-driven or business-driven. During the first meeting, I asked Robert "How did you come up with this idea?" He replied,

This information validated that this was a user-centered problem because it came from Sysco customers.

defining time & steps for the design process

creating a schedule

I created a schedule by starting when we present/handoff client deliverables and working backwards. We ensured that we allowed more time for user testing and iterating based off prior project experiences.

limited access to users

research challenges

Next steps were to interview Sysco customers in order to better understand user needs and to identify any additional user pain points. However, I ran into several limitations:

• It would take 4-6 weeks to connect with a Sysco customer through Sysco when we had a 3 week time-frame.
• No relevant search results appeared when searching 'Sysco customers' or variant search terms using Google.

qualifying users

user interviews - challenges and results

In spite of limitations, I interviewed restaurant managers from nearby restaurants. To qualify users, I validated 1) who was responsible for food/supply ordering, and 2) whether they ordered from Sysco or not. It was difficult to find users within our target audience (Sysco customers) because:

• The people responsible for food/supply ordering did not have the time.
• They used an internal system designed by corporate.
• They did not use Sysco.

As a result, we decided to validate and discover user pain points through 1) online research, and 2) user testing.

discovering user pain points

online sysco customer reviews & Insights

I found that a majority of users were angry and frustrated because of:

• Slow delivery times
• Lack of order/pricing updates
• Long wait times to connect with Sysco customer support

As a result, users did not trust Sysco and their sales/customer support teams.

How do we design a chatbot that will alleviate these pain points and build user trust?

how do we design a chatbot?

Comparative research

Because we've never designed a chatbot before, we researched chatbot design processes and best practices. We were influenced by the below resources to guide our process - what steps to take, which tools to use, etc.

how do other chatbots work?

comparative analysis

I compared different chatbots from companies including Food Network, eBay, and Sephora to evaluate features to include in our chatbot for user testing.

insights from comparative analysis

Click or tap to enlarge image.

Hover bottom or tap on "." bottom right  to learn more.

Defining the UX

understanding the backlog

user stories, use cases and requirements

In the first client meeting, Robert provided us a backlog of user stories, use cases and product requirements using Pivotal Tracker. The backlog focused on 2 main use cases:

1. Order Guide
   • Promotional items (Sysco branded products)
   • Which items and quantities to order based on order history
2. Order Status
   • Substitute items offered after submitting order (Sysco branded products)
   • Out of stock/unavailable items

brainstorming features & interactions

conversation map

I collaborated in brainstorming additional features and user interactions. We grouped those ideas against stakeholder requirements from the backlog. We used affinity diagramming to quickly generate ideas, and to ensure that the design addressed user pain points, and user stories from the backlog. This informed the conversation structure for user and chatbot flows.

understanding user actions

profile chart

We validated Sysco users and target users in the first client meeting, and in online research. We identified 4 main profiles:

1. Restaurant Owner
2. School Food Procurer
3. Chatbot
4. Customer Service Representative

Using information from the backlog and the conversation map, I collaborated with the UX Team in matching actions to the profiles. The highlighted portion of the chart were stakeholder requirements. We created a profile chart to better understand steps in the upcoming user flows.

The profile chart informed us of the features and interactions that are important for each profile to achieve their goals. 

describing sysco as a person

the chatbot persona - second client meeting

From comparative research, users enjoyed interacting with a chatbot when the bot has a personality - a natural human language. However, users found chatbots that were too human-like "creepy." We needed to find a happy medium that was consistent to the Sysco brand. We met with Robert to understand branding.

I asked him, "If Sysco was a person then how would you describe him or her?"

• Friendly
• Polite
• Professional
• A Sysco sales representative 

With this in mind, we created a Sysco Bot Persona to build a human connection and trust with users.

Empathizing with users

the restaurant owner persona

We created the Restaurant Owner persona to understand user goals, and user feelings throughout the flow. We focused on the Restaurant Owner profile because it is Sysco's primary user. 

exploring how the user thinks and feels

journey map

Creating the Sysco Bot and the Restaurant Owner personas inspired me to build a user journey map. I created this to understand how the user thinks and feels throughout the flow, and informed us the screens and conversations we needed to design into the prototype.

designing user & chatbot conversations

mind map of basic conversation flows

I collaborated in designing basic user & chatbot conversation flows using XMind (a mind mapping software tool). We based flows on user stories from the backlog, and the user journey map. This helped organize conversations, and provided a foundation to build detailed conversation flows from.

mapping user & chatbot responses

Affinity diagramming

We used affinity diagramming to quickly brainstorm responses, and to pull ideas from each other. We printed out an enlarged version of the conversation flow mind map, and taped it to a whiteboard. We wrote user and chatbot responses on sticky notes, and placed them to the appropriate flow.

insights from Affinity diagramming

From this we found that we were missing a “Modify Order” flow, where the user is able to modify quantities, ship-to addresses, etc., and a “Goodbye” flow, where the user types in exit chatbot responses. 

making chit chat

building detailed conversation flows

We found it difficult to come up with chatbot responses all at once. To organize, we decided to tackle responses in detailed conversation flows using user stories from the backlog as a guide.

I made the Order Status Conversation Flow using XMind. This helped us understand the chatbot language, and to ensure that chatbot responses aligned to user expectations.

Translating, Testing & Iterating

*Gasp* no style guide?

Color palette & Fonts

In the second client meeting, we asked Robert for a style guide for consistency when designing the mock ups. However, Robert didn't have a formal style guide. So we took a screenshot of the Sysco User Account Homepage using the fake account login that Robert provided, and applied the color dropper inspector tool in Sketch.

I created the below style guides for consistency using Sketch and Font Ninja. 

Now we're talking...

Mock ups & the initial prototype

Based on research and user/client requirements, we created the below mock ups and prototype using Sketch & Flinto.

We focused on the Order Guide User Flow first because it was simpler and quicker to implement compared to the Order Status User Flow.

validating our bot design

user testing

To validate usability standards in the chatbot design, we tested 5 users from a variety of ages and backgrounds. Due to limited access, we weren't able to test Sysco customers. In an ideal situation, I would test target users.

During the test, I explained to users:

• Role and responsibilities as a Restaurant Manager
• Goal was to find what's on sale, and to add a sale item to their cart
• No wrong answers - I'm testing the system, not the user

Iterating & improving the bot

design changes based on user testing results

I collaborated to make the following changes based on results from user testing.

• Made the chatbot button more visible by placing it to underneath the other call-to-action button "Start New Order." For consistency, we wrote the copy "Not Quite Sure?" similar to "Ready to Build Your Order?"
• Created quickly reply buttons for 'simple' responses (e.g. Yes/No). To empower users in their decision, we made a higher contrast for the "YES" button as the 'suggested' call-to-action.

mock ups & the prototype

We incorporated design changes from the first iteration into the "Order Status" prototype.

testing on a target user & Subject Matter Expert

user testing - round 2

In the second round of testing, I tested the prototype on a user fitting the demographic of Sysco target users (40+ years, male, prior exposure to restaurant management). We also received feedback from a subject matter expert in Data/Chat Bots.

The target user was primed with a dislike in using chatbots based on prior negative experiences before testing : 

• Wanted to interact with a person - a human connection
• Confused in what to type and what is a good answer that the bot will recognize
• Frustrated that it takes longer to get what they want using a chatbot compared to calling customer service

Converting A chatbot hater to a lover

insights from user testing - round 2

After the test, the user and the subject matter expert:

• Liked the friendly and professional language of the chatbot
• Enjoyed the experience because
  • Didn't feel the need to talk to customer service
  • The bot streamlined the process to their goal
• Loved the quick reply buttons
• Did not know if invoice #s that were flagged (e.g. Item Out of Stock) were buttons/clickable
• Liked seeing data visuals on 'Sirloin Steak' based on order history
• Suggested to make buttons larger for iPad users

Client Presentation & Deliverables 

success! robert loved it!

client feedback

Robert loved the prototype - clean look and met the requirements he asked for. He also enjoyed how quickly we designed the chatbot prototype, and communication throughout the project.

He loved the work so much that he asked for us to continue this project once it is ready to be implemented!

so now what?

next steps

Now that Robert has a proof of concept, and deliverables/research to back up the chatbot need - next steps include:

• Internal testing
  • Within Sysco management teams and employees
  • Ideally with Sysco customers
• Iterations based on feedback from internal testing
• Ensure style and language consistent to Sysco branding/guidelines

success metrics

To determine design success, we would measure:

• Incoming Call Volume to Customer Service
  • Decreased over time?
• Subject Matter in Support Tickets
  • Do customers continue to call about order related problems/inquiries?
  • Order related customer issues below 30%?

Retrospective

yas ... i successfully designed a chatbot!

Thanks for stopping by!