My Role
I provided the wireframes and visual design, working with 1 other designer, 2 developers and 1 product manager.
The Opportunity
People (especially of younger generations) are becoming increasingly more demanding of instant responses from companies and brands, when they have a question or want to use their services.
Rather than navigating to a business's website or making a call, more and more people are interacting with a business or brand through the communication channels they're most familiar with - messaging apps.
We decided to evolve with this paradigm shift in business communication and create a chatbot builder platform for mobile apps and Facebook Messenger.
The Goal
Our goal was to build an automated chatbot solution that would enable marketers to set up conversational-based interactions with their customers, at scale.
Problems We Faced
Our campaign builder solution limited a marketer to sending one campaign card at a time.
This solution works fine for promoting something that users will see once but it does not cater for brands and businesses wanting to continue the conversation with their app users.
We allowed app users to reply to these campaigns, however these user replies need to be manually managed by an admin/admins. This solution does not work at scale, as hundreds or thousands of app users could be sending messages. It takes time to reply to these often repetitive enquiries, giving marketers another daily task to manage.
Evolving the Campaign Builder
Before the chatbot solution, the Pulsate campaign builder consisted of 7 steps:
Choosing the campaign type
Naming and setting the goal
Designing the campaign card
Setting the notification
Choosing who the audience is
Selecting the delivery options
Reviewing and hitting the big blue "Activate" button
Constraints We Had
As we were building our new chatbot builder on top of our current campaign builder (made with AngularJS), this update required our developers to refactor the existing code, which can be time consuming and cause unexpected issues along the way.
We've put a lot of hard work and energy into the steps of our current campaign builder (including updates for iOS 10/11 and Android N/O push notification capabilities), so we didn't want to throw this hard work away. Instead, we wanted to find a way to merge our old system with these new enhancements.
We're building two chatbot solutions: one for mobile apps and one for Facebook Messenger. We have a lot more freedom in how we design a chatbot builder for mobile apps but we are restricted in some ways for how Facebook Messenger integrates with a chatbot solution.
Approaching the End User Experience First
We wanted to begin with the end user experience first. This approach was to allow us to figure out what kind of conversational flows we wanted to send to users (of different app industries with different user needs and business goals). After doing some market research and discussing the various use cases, we established what components were needed for this conversational interface:
Message bubbles (Like text messages)
Rich media (Images, Videos, GIFs, Audio Files)
Cards / Carousel of cards (To give users a choice of rich options to dive into)
Interactive buttons (So users can choose their responses to questions)
Links to other chatbot flows (So the admin does not have to build out huge flows. Instead, there can be a flow for each user need and these can be linked together in the conversation. Eg: Onboarding new users, Support & FAQ flow, Discovery flow, Checkout flow, etc.)
Early Sketches and Ideas
We wanted to let marketers build out interactive chatbot flows for their end users to interact with. Every outcome and path for the end user could be determined by the marketer using an edit in place style canvas.
It was important for users of our platform to be able to visually connect the different blocks of the flow as they build them out, so they understand the various branches of the conversation, making it easier to imagine the end user experience.
Our solution was designed for both basic and complex conversational flows. We aimed to create a solution that works well in either scenarios.
Taking our current campaign builder as a starting point, we experimented with parts that could be re-designed or re-purposed.
Wireframes for Building Chatbot Flows
Findings from The Wireframes
No matter how basic or complex a flow is, we wanted our users to focus in on one active block of the flow at a time.
When a block is active, we chose to use progressive disclosure to highlight the available configuration settings for the active block only (hiding the configuration options for the other blocks, to minimise the distractions).
This aesthetic’s purpose was to create a focussed state within a potentially complicated flow, which could be made up of multiple branches and conversation blocks.
Final Designs of the Chatbot Builder
What I Learned from This Project
When designing a potentially "busy" interface, you're challenged to not overwhelm the user. The challenge is to provide the necessary visual queues to guide your user around the interface. The challenge is to de-clutter the options when they are not needed.
You don't want to confuse the user and leave them frustrated, you want to help them get the most out of your design. You want to make them feel like they're actually quite good at navigating around and using it. It's kind of like playing a video game for the first time, you want them to be able to figure out what they need to do and make them feel like they've accomplished something.
Different interactive states played an important role in this interface, highlighting where the user should be focussing their attention after each mouse click and what action they should perform next.
It took us iterations after iterations to get to the final design. Some ideas we had at the beginning of this update never made it to the final design or had to be tweaked. It's only when you begin to design or develop something that you realise that it is or isn't going to work the way you originally planned it. You have to be ready to adapt at all stages of the project and be prepared to say goodbye to some of your designs that never "made the cut".
Interested in Working Together?
Or you can find me here: