Preview Mode

Redesigning one of the most important flow to establish trust with users

Context

What you see is what you get… until it isn’t. That’s the exact problem Instabot was facing with its preview mode; interactions/UI elements differ from the live chatbot. It’s further compounded when the preview mode is not discoverable. Finding a way to accurately show chatbot’s preview will improve users’ confidence and satisfaction with the product.

We used a design-sprint approach to get initial direction in the project and followed through with a full in-house implementation, using human-centered design approach to reduce risk and uncertainty.

I made an UI audit of the bot in preview versus production, conducted market research, produced wireframes, and designed hi-fi prototypes. This ultimately led to a dedicated preview mode solution that made switching between content editing/previewing seamless for users.

Process

To better identify with our customer, I start by casually interviewing Samantha Nasser in Sales (she has their pulse) to hear the common pain points when building and previewing the chatbot.  Some of the complaints were:

1. “Why do my bot look different when I launch it on my site?”

2. “How do I even preview my bot? Where do I click?”

Building of insights gleaned from Samantha, I framed the problem statement to ground myself and spark ideas that could address the problem: How might we ensure a constant chatbot experience for users from drafting to launching of bot?

As the bot currently stands, here’s how the preview looks compares to the live production:

What stood out to me was that the preview mode was confined to a tight right-panel that recedes into the background when so much elements are happening at once.

From market research, most preview mode are dedicated with distinct difference in appearance. A common pattern that I want to adopt (so as to not reinvent the wheel) for our solution.

I ran the idea through my Product team via wireframes and they felt strongly that this solution feels right to them. To see it more in-situation, I quickly went to XD and designed a hi-fi prototype.

Next, I tested out the prototype with Product and Sales during our next weekly sync to minimize doubt. Feedback was generally favorable and they found that the solution to be intuitive.

I made the necessary edits and quickly worked with the Product Manager to write up tickets in JIRA to allow the development members to work their magic. Alakazam!

Reflection

Ensuring users’ confidence in Instabot’s platform among their bot-building sessions was this project’s biggest challenge, which I found could be overcome if the chatbot’s visuals and interactions were constant in draft, preview, or production mode.

Iterative research and prototyping led to a final solution that reduced help tickets regarding preview issues by 40% in a month (from 16 prior to 10 tickets). Also, Sales shared that anecdotally during demo calls — they reported an increase of “ooohs” and “aaahs” (wow moments) from prospects when showing off new Preview function.

Looking back, if time/resource wasn’t a crunch, I would’ve conducted a thorough usability test with real clients to evaluate solutions. However, using sales and marketing members as a proxy was good enough because I value progress over perfection.

For the next steps, I want to minimize clicks between preview-edit of a node even further. Also to eventually scrape a client’s site with chatbot’s preview to show Instabot’s value quickly.