ON Live Chat

A deep-dive into the journey of developing a live chat solution for an AI chat centered company.

Company

ON

Role

Lead Designer

Length

1 year, 7 months

Team

Product Design, Front End Engineering, Product Manager

Year

2022-2024

Platforms design for

Desktop

Mobile

The challenge

ON held firm that their conversational AI solution removed the need for a live chat platform, however customers were not in agreement

Existing customers were required to use more tools than they desired

New partners required live chat as a product offering and were blocked from being able to onboard

Access was blocked to specific channels that the company hoped to expand

The solution

Find a solution that could meet the needs of current and potential clients while not trying to compete with the scope of existing products

We defined our fairytale future for live chat and then scoped out an MVP


We adopted a philosophy early on that we could “do more with less” and made it a goal to ship an MVP that could win over customers from our competitors, even if there were fewer features


Customers were pitched the MVP for beta testing, and we began moving towards more features after our customers were out of beta

Tools for defining our product

Customer interviews

Notion was our best friend for user interviews. We took a bunch of notes over what we were curious about, and put that into an interview template. This gave us a historical list of all our interviews so that we could measure against each one to find the common threads.

Market research

I looked at and signed up for almost every live chat service that I could get access to. This enabled me to see what each product had in common so I could identify what was standard in the industry, and experience first-hand the friction our customers were telling us about.

User flows

Using a flow chart, I showed how requests would move through our system and defined terms so that everyone spoke the same language about the product were able to visualize how our clients would move through the workflow of responding to requests.

Design iterations

Problem solving for space constraints

Initially, we believed the live chat product should be separate from our main product and would consist of roughly three key parts to what we came to call the "Live Chat Surface":

A table containing live chat requests, both current and historical

A focused view of an individual live chat request

40%

A dash or informative action center.

Creating the structure

I went through many mid-fidelity screen iterations during this journey, diving deep into each part of the experience


Designing at this level of polish allowed for more detailed and focused conversation within the team and was a key factor in helping everyone visualize the end product we had in mind

Ultimately, we welcomed the live chat feature into our primary platform


This felt taking furniture from a four bedroom house to a studio apartment, but we made it work by sticking to our philosophy of being able to do more with less

Product turning point

True to the "less is more" philosophy, we chose to combine the core elements of the feature into two distinct area with the always present inbox acting as the star of the show

Fairytale features

Detailed user behavior and AI enhancements

Features like a detailed chat history that gave insight into an end-user chat history and behavior, an AI-powered assistant for the agents, and AI-powered response suggestions, were fancy and helpful additions


We kept these designs in the archive to serve as inspiration and a reminder of where we could take the product

Dashboards... again

Customers needed baseline live chat analytics, primarily managers who would need to keep a finger on the pulse of day-to-day operations, so we revisited the dashboard.


Our vision was thoughtful and fun, however, we ultimately created a live chat report using a third-party analytics tool

Outcome

Let’s look at the final designs for the live chat feature and it’s anatomy

Outcome

Desktop

Outcome

Mobile

Outcome

Client Demo

I created a prototype demo so that we could work with sales and customer success to communicate to both customers and prospects what we were shipping


This allowed for early feedback but also generated excitement around the future of the product capabilities and aided in shipping a successful live chat feature