Route Smarter, Not Harder
How a chatbot helped to connect customers to the right store associate in real-time.
OVERVIEW 📖
Background
Tulip’s LiveConnect is an omnichannel messaging application that connects retail store associates to e-commerce customers in real-time. The application allows retail customers to chat directly with an associate at their preferred store from either a web chat, or a social platform such as WeChat or WhatsApp. For associates, LiveConnect allows them to chat with their customers on each of these platforms from a single application.
For the web experience, Tulip implemented a chatbot that routed e-commerce customers to an associate on the LiveConnect app. Customers used the bot to answer questions which routed them to a specific store. Once routed, associates would see the queue of conversations in their app, which they could review and pick up to continue the chat.
The routing experience, however, proved to be time-consuming, manual, and tedious. In our next iteration, we put the user experience front and center, researching and designing a smart-routing solution that connects web chat customers to the right associate in less time.
Summary
Project Year: 2021
Team: 1 Product Manager | 1 iOS Dev | 3 Backend Devs
My Role: Product Designer, Content Designer
WHERE WE STARTED 🚦
Routing Bot
Due to time and technical constraints when we initially launched LiveConnect, we needed to design a routing solution that was quick to implement. As a result, we ended up with a routing conversation that acted more like a questionnaire than a chatbot. Customers were asked a series of questions that narrowed down their location in order to return a list of stores. Once they selected their preferred store, they would wait for an associate to pick up their conversation.
Note: we used an integration parter for the web widget UI. The flow logic and content were done by me, as well as all of the app design.
Associate App
In the app, associates would see the queue of conversations that had been routed to their store. They would review this list and accept the chats they felt qualified to handle.
ALIGNMENT 🌟
Project Goals
Our goal for this project was to determine the best approach and interaction sequence for the routing bot by understanding how we could:
Leverage the context of the user to guide the experience
Make user selections and inputs more meaningful
Personalize the experience by using familiar, natural language
USER DISCOVERY 👩💻
Usability Testing
We conducted a series of moderated usability tests with our target users on our original solution. We recruited 6 participants - half of whom were familiar with similar web chat experiences, and half of whom were new to this type of interaction. Our goal was to uncover whether the routing bot easily, clearly, and quickly connected customers to an available associate.
We had the participants perform two tasks. The first task was to simply interact with the routing bot to connect with an associate. Once connected, they were told that unfortunately the store was closing soon and they’d need to re-connect to an available store. The second task was to end the conversation and initiate a new one with a different store.
Surprisingly, there was little difference between how both groups responded to the routing bot. Unfortunately, there was very little positive feedback. Although each participant was able to successfully complete both tasks, the experience was neither frictionless nor pleasant.
What We Learned
Does not compute: Although participants were talking to a bot, they also felt like they were talking to a bot - it was too impersonal. The conversation flow felt strictly for the benefit of the technology, rather than for the benefit of the user.
“I felt like I was talking to a bot - it wasn’t friendly. I would have preferred something softer and more personalized.” - Participant 4
Lost in translation: Participants found the bot challenging to navigate and were not clear on the responses they were expected to give. Do I type the number or do I type the word? We assumed that providing options would offer flexibility to the user, but it only slowed them down when trying to complete both tasks.
“I was confused by the store name versus the store ID. It was too much information and overwhelming.” - Participant 2
The path of most resistance: Participants were annoyed that they had to manually re-route themselves. They were frustrated that they had to re-start the entire flow, and wondered why the associate they were already speaking to couldn’t manage this action for them. This left them a bad impression of the brand.
“This was so inefficient. I was hoping to complete the task and move onto the other one within the same conversation” - Participant 1
BUSINESS DISCOVERY 💼
Client Interviews
The initial LiveConnect routing solution was launched knowing there were gaps in the feature. Over the subsequent 8 months, we saw the anticipated feedback roll in from our clients. This feedback added extra validation to the red flags we uncovered in our initial user testing.
Knowing we needed to address these issues with the right problem in mind, we engaged three of our clients to better understand their existing challenges and to identify their primary business needs around routing.
What We Learned
Time is money: For an app whose main goal is connecting customers to associates in real-time, it was taking an ironically long time to do so. The user was expected to do the heavy lifting for the bot, rather than vice versa. This was resulting in customer frustration and high drop rates on web chat. It left customers with a negative perception of the brand, which poses a large risk in luxury retail.
Context is key: There’s more to routing than knowing where a customer is. The context surrounding that customer is just as important. Criteria such as language, loyalty level, and what sort of expertise they might be looking for are just as crucial. Getting connected to an appropriate associate was being left up to chance, resulting in awkward re-routing and customer frustration.
A two-sided relationship: While routing needs to take into account the customers’ needs, it also needs to consider the reality of the associates working on the floor. Factors such as the store’s opening hours, the real-time availability of the associate, as well as their chat capacity were also things to consider. Without this, too many customers were being left on read.
DEFINE ✍️
Understanding User & Business Needs
Customer Needs
Personalization, especially in luxury
Clarity on expected response or input
Quick connection to an associate (not a store)
Associate Needs
Flexibility and time management
Quick understanding of customer needs
Equitable distribution of incoming requests
Business Needs
Reduction in drop-off rates
Maintain a standard of excellence and customer satisfaction
Ability to translate bot into other languages
DESIGN ✨
Solution 1: Personalization
A chatbot is always going to feel somewhat robotic and prescriptive, but we wanted to make it as friendly and relevant as we could while still aligning with customer expectations of a luxury brand.
Language Detection:
Web Widget: We leveraged the customers’ browser language to translate the entire experience immediately upon opening the widget. The previous routing bot was manually translated & hard-coded into different languages as needed by our retailers.
App: In order for associates to quickly determine if a conversation was in a language they spoke, we added language tags to each chat request in the queue. This was especially important for our retailers in Europe where customers and associates spoke multiple neighbouring languages.
Pre-chat Form:
Web Widget: We presented the customer with a short pre-chat form that asked for their name, and email, and provided an option to change their language. We were then able to leverage their name throughout the bot conversation, making it more personal and friendly.
App: The form had the added benefit of allowing us to cross-check their email with existing profiles. If we found a match, we were able to automatically link that profile to the conversation. This provided the associate with a ton of context about the customer, allowing them to personalize their advice.
Solution 2: Geolocation-based Routing
Rather than making the customer slog through the manual process of finding and selecting a store to be routed to, we would simply just ask them to share their location. Based on the routing logic configured by the retailer, this location data would then be used to auto-route that customer to a specific store.
Routing Logic
Admin Console: We created a set of rules to allow retailers to configure their preferred routing logic. They could modify the default search radius to specify the maximum distance from a user’s location that would be searched for an available store associate. From there, they could choose whether to route based on Availability First or Closest Store First.
Location Sharing
Web Widget: After filling out the pre-chat capture form, we then asked the customer to share their location with the bot. With this one question, we completely eliminated the existing routing flow. We could now use the customers’ location data to execute the necessary routing based on the clients’ preferred logic and parameters.
Routing Configurations:
Customer Web Widget:
Solution 3: Associate Availability
We needed to give the associates more control to manage their chat capacity and availability.
Chat Limits
App: We added a configuration for the brand to set up universal chat limits for their associates. A chat limit is the maximum number of concurrent conversations that an associate can manage at one time. For example, if the chat limit is set to 3, as soon as an associate has accepted 3 conversations, they would be blocked from accepting any additional chats until one of their conversations had ended. Reaching a chat limit effectively makes an associate “unavailable”, which affects whether new chats are routed to that store.
Availability Management
App: We also gave the associates the ability to manually set their availability in the app. This does not override the chat limits functionality, but it gives the associate flexibility to determine when they have the capacity to accept chats and when they do not. Being “unavailable” still allows the associate to continue existing conversations. From a routing perspective, if every associate in a store is unavailable, no new conversations will be routed to that store.
Associate App - Chat Limits:
Associate App - Availability Management:
CUT FROM SCOPE 🙅♀️
Chat Transfers
In cases where an associate was unfamiliar with the problem or specialized knowledge was needed, associates would have the option to transfer a chat to another available associate or manager within their store. This would notify the new associate and let them decide if they wanted to accept the transfer or not. Accepted transfers would go directly to the receiving associate’s active conversations, bypassing the queue.
This solution would have addressed one of the pain points identified in our early usability tests - customers did not want the onus of re-routing being placed on them. It was cumbersome and frustrating. This solution would have given associates the ability to take this over from within the app. Unfortunately, the implementation of this solution was cut from the scope, but I hope to see it built one day.
CONCLUSION 🏁
Learnings
LiveConnect was the first product at Tulip that served more than one user. Up until this point our suite of products only served store associates/managers. The experience for the end customer was tangential - not directly related to what we were designing and building. Now, we had a product that was going to be used by both the associate and the customer to communicate, but with two different interfaces.
This was a new challenge for me as I was designing. Depending on what part of the experience I was working on, I really needed to switch my perspective. While designing for the associate experience I had to keep in mind time management, flexibility and data presentation. However, designing for the end customer required me to focus on simplicity, speed and maintaining brand affinity. And both of these things needed to work cohesively in order to facilitate a successful and meaningful interaction.
Overall, undertaking a project of this scale was an extraordinary learning experience of melding associate user needs, customer user needs as well as specific business goals. I’ve continued to bring this layered perspective into all of my designs going forward.