SnapTravel
Chatbot Experience Design (2019)
SnapTravel is a travel booking company that uses conversational commerce to offer competitive prices for hotels through a chatbot.
The company has focused mainly on their website experience, with many users ignoring the chatbot and immediately navigating to the website. As the bot is the portal to the SnapTravel website, an improved chatbot experience provides users with a positive impression of the service, helping to increase sales and conversion rates.
My work completed for SnapTravel consisted of undertaking an entire design sprint. Phases of this sprint included Research and Discovery, Ideation, Prototyping, and Testing. SnapTravel's chatbot operates through SMS, WhatsApp, and Messenger- and our focus was primarily on the Messenger experience.
My Role
As a user experience intern, I worked on a small team of three to evaluate the current experience and propose changes to improve the chatbot experience. I worked both in research and design- conducting guerilla usability testing, user interviews, and developing various graphics, flows, prototypes, and high-fidelity deliverables.
Project Overview
Identified and prioritized problems
We assessed their product and used our professional opinion to identify, prioritize and approach the problems we encountered.
Established design principles
Through our research, we developed design principles for ourselves and future designers at SnapTravel to follow when developing the bot experience.
Ideated solutions
We collaborated on ideas for how the product should change to improve the user experience, and decided what ones to prioritize and implement.
Created prototypes
We implemented our ideas in prototypes we presented to our superiors and to usability testing participants for feedback.
Conducted testing
We performed usability tests involving real users to explore the problems and solutions we identified. We determined how tests were operated and deployed.
Based on SnapTravel's goals of increasing conversion rates and sales through the bot, our team sought to uncover areas of improvement and design solutions for:
-
Chatbot on-boarding and personality
-
to encourage users to engage with the bot
-
to provide a positive and accurate first impression of the service
-
-
Hotel Search and filtering
-
to help users complete tasks in chat
-
to show more customized results
-
to facilitate more sales
-
to make more actions visible to human agents- helping them help users
-
-
Transition to the in-app experience
-
to make the transition less jarring
-
to provide a more unified experience
-
Recommendations Summary
On-Boarding Experience
-
Change the use of language and emojis to make the bot feel more friendly while maintaining professionalism
-
Have a consistent bot personality and tone
-
Condense the introduction message to be more concise and make sure to clearly explain the bot’s abilities
-
Clearly convey the service and the chatbot's capabilities in the introduction
Search and Filtering
-
Have consistent button options throughout the chatbot flow so users know the capabilities of the bot and have a streamlined way to proceed
-
Create more descriptive hotel cards so that users can get relevant information without having to go to the app
-
Have clear messaging for how to filter in the chat and make it clear if an option is transitioning from the chat to the app
One of our proposed chat introduction pages
A proposed hotel card view
Future Considerations
-
Create options for more novel and personalized engagements with the bot with additional travel features
-
i.e. Local event information, post-booking experience
-
A potential local events card for chat
Process
Research & Discovery
Original introduction message
Professional Analysis
Before conducting additional research, we experienced the app firsthand and determined areas in which we felt users may experience the most friction.
Findings:
-
Conducting any task completely in-chat presented significant challenges, especially with searching and filtering.
-
Links to external websites were hard to determine, and transitioning between the chat and website was jarring.
-
There was a lack of backtracking commands, such as "go back" and "clear search"
-
Conducting transactions entirely in chat was not possible
Competitive Analysis
We researched chatbot designs from various companies and academic articles written about the subject to gain an understanding of trends, products, and guidelines.
Major findings in this area informed our decisions going forward, and contributed to our Bot Design Guidelines deliverable, which was submitted to the company to inform future design decisions.
Findings:
-
Chatbot Design Guidelines
-
Messages should set accurate expectations
-
Messages should be brief, friendly, and to-the-point
-
It should be clear that a user is talking a bot
-
Multiple versions of backtracking and fallback messages help prevent frustration
-
Messages should directly support the completion of tasks be de-prioritizing unnecessary or superfluous text and characters
-
A unique, memorable experience helps maintain engagement and enjoyment
-
User Testing Videos
Our research also involved reviewing 40 user testing videos provided by SnapTravel. These videos were valuable to our process, as they gave us key insights into areas of improvement to focus on. After reviewing existing user testing videos, we designed our own user test with questions and steps to follow up on our initial findings.
Findings:
-
Users would unknowingly skip engaging with the bot altogether by tapping the first link they could, bringing them to the web app
-
Users would ignore the introduction carousel images or misunderstand them
-
Users would ask questions to the bot that it couldn't understand, leading to frustration with the results.
-
Changing certain aspects of the search were impossible through the bot
-
Users felt like the bot added no value compared to using the app.
Agent Chats
Agent chat logs were also provided to us. These chat logs were once again valuable to our research, as they marked a point in time the chatbot failed- and a human agent needed to step in to help a user.
Findings:
-
Agents show up unprompted quite often, usually as a result of simple commands that the bot is not prepared for.
-
There were issues with the kind of search capabilities that were available (for both the user and the agent) resulting in instances where the agents could not help the user find what they needed.
-
Common reasons to involve agents include: requesting email receipts, cancelling bookings, payment issues or for early check-ins
-
It was common for users to have to explain their issue multiple times to the bot and agent. Sometimes they had to explain it to multiple different agents.
Ideation
After investigating areas of research and pain points, we entered the ideation phase to improve upon aspects of the chatbot experience. We begun by fully fleshing out user flows and how tasks such as “searching and filtering" are completed by users currently in the chat.
Next, we looked at all of our research findings and developed ideas for how to improve the user experience based on what we discovered. Then, we took these ideas and flows to the design team, and received feedback. This feedback directly influenced our focus going forward.
An example of a potential user flow through search/filtering with the chatbot
Testing Prototypes
We focused on designing prototypes that addressed the following three areas, as we deemed them the most problematic and impactful:
-
Chatbot introduction and personality
-
Hotel search and filtering
-
Chat commands
We used two prototypes in testing, one focused mainly on the chatbot introduction, providing a friendly tone and personality. The second prototype dealt with the searching and filtering aspect of the bot, with a modified introduction with less personality to see what users responded to the most.
As seen in the image below:
Before shows the current chatbot introduction, containing multiple images with no chat prompts. After is our tested redesign idea, with a condensed introduction, lighthearted tone, and additional instructions.
A screenshot of the current introduction (Before) and the bot introduction used in testing (After).
A screenshot of the current hotel results (Before) and the hotel results used in testing (After).
We conducted usability testing on the street with our generated prototypes to receive feedback on our ideas from potential users. I acted as mediator for the majority of tests, approaching participants, moderating interaction with the prototype, and conducting interviews.
Findings- Usability Tests & Interviews
-
Users seemed generally satisfied with our prototype, with no major issues or grievances reported
-
Users expressed wanting the option to see events close to hotels
-
A map with hotel location was the most suggested feature for the chat
-
Chat commands were used easily and without hesitation
-
Users responded positively to the bot personality of "Snappy"
One tested introduction message
Recommendations
After testing was completed, we refined our prototypes and mockups based on our findings, and presented our recommendations to SnapTravel.
Get Started Screen
I provided multiple options for this recommendation as research was somewhat divided on the use of emojis.
As users often disregarded this screen altogether during testing, the 2nd option sought to provide an alternative with more visual impact to slow the user down and read the information. Through further testing, the efficacy of this solution can be explored.
Condensed Introduction
The condensed introduction provided more information about the service through only one branded image link. Additionally, the bot embodies the personality of "Snappy" as users found this more approachable and engaging, and the use of emojis is eliminated, as users found their original use to be unprofessional.
Hotel Cards and Extended Details
These hotel cards were the ones tested, and they proved to be successful. These updated cards contain more detailed information so users can determine the relevance of their results in-chat, as originally only an image and savings amount was included- which didn't give users enough information.
The external site link is clearly advertised with the button label "Book Now on SnapTravel.com" to help users understand their options, and "Hotel Details" returns an additional card with more hotel information.
More Options: Hotel Card
I designed this alternative hotel card design to maintain consistency with Facebook's standards, as well as SnapTravel's website and future design direction. Though testing results of the previous design were positive, I felt it could be further improved.
I additionally wanted to ensure information was aesthetic, readable, and formatted so it could easily be generated with dynamic website information.
More Options: Hotel Details Carousel
I felt that a single card outlining hotel details might not be enough for some users, so I designed these carousel cards to be included in future research.
As many users expressed wanting to view the hotel on a map before they "Book Now", I thought a map card would be helpful to entice users to book. The lack of images for various hotels was also expressed, so the third-fifth card above can further help initiate a sale, as polished, promotional images from the website can be chosen.
More Options: Nearby Events
Many users expressed that they wanted additional chat options that may be personalized based on their current trip or desired location. I designed these potential options for nearby events cards to appear in chat during a post-booking experience.
Though our research stopped at the booking stage due to scope and time constraints, providing post-booking options and services may further engage users with the product. These events cards are an example of how such an extension may be realized.