LOOKS GREAT
ON ANY DEVICE.
I'm a paragraph. Click here to add your own text and edit me. I’m a great place for you to tell a story and let your users know a little more about you.
Problem
As we started to shift gears from small businesses to enterprises, we needed to provide a more enterprise-friendly customer service solution. Companies were less likely to use our mobile app solution, being they were trying to push their mobile apps. This new solution would have to combat that but also act as a way to showcase our new chatbot capabilities.
Web widget V1
Pypestreams customer service platform consisted of four core products. One of the four was their Web Widget which acted as universal chat portal for users to receive customer service from our company partners. This project consisted of a responsive web experience via our custom built API. Below you can see my thought process and initial solution for our Web Widget V1.
Starting with researching the competition
Our goal was to build a web widget solution that wouldn’t compete with enterprises existing platform.
I started by performing research on the competitive landscape, to determined what features were must-haves for go-live. After doing this, I defined low hanging fruit ideas to differentiate ourselves and go beyond the competition.
Limited chatbots lead to poor user experiences
Based on internal chatbot usability test performed by our CX team, we discovered our limited FAQ use-case chatbots led to poor user experiences. Users had no set expectations and went into chatbots assuming they could handle anything they threw at them.
This feedback profoundly influenced my designs of rich assets within the overall chatbot experience and flow.
Planning all of the moving parts
Wireframing for the web widget, I had to keep in mind that there were a lot of moving parts. The cover image couldn't be shown all the times due to the amount of space it took, but I needed a way to maintain the business logo, name, and universal widget controls. In solving for this, I decided to make the cover image collapsable to make way for other web widget content.
Making the widget feel like home
Being our partners were worried about things competing with there existing solutions, I decided to enable businesses to customize the widget style. Therefore making our widget feel like it belongs on their perspective pages. Giving them the option to upload their logos, cover images and letting them customize colors.
Keeping things accessible
Though we allowed them to customize the widget experience, we still needed to keep things usable and accessible. I did this by maintaining clear contrasts between CTAs, text colors and the backgrounds they where on. Making sure that our solution would be usable by all users including those that were color blind. We also gave them options to customise CTA styles that triggered the web widget.
Helping users understand chatbots
I decided to “hold users hands“ through their chatbot journeys. Designing rich assets that would replace the user text field, providing users visibility to the context that prompted them, reducing our user chat abandon rate. We also highly encouraged our partners to present bot capabilities upfront, using their first initial bot message as a “main menu,” helping set user expectations and improving their overall user experience.
Making our customers happy
Our CX team reported that our overall customer satisfaction rate was on a steady rise after the implementation of our web widget. There was still a lot of work to be done, but we were making strides to solve all of our business partners needs on a daily basis.