⦿ in the start-up space
⦿ working with conversational AI
⦿ with B2B, B2B2C, and SAAS platforms
⦿ excelling at turning complexity and ambiguity into delightful user experiences.
experience
⦿ in the start-up space
⦿ working with conversational AI
⦿ with B2B, B2B2C, and SAAS platforms
⦿ excelling at turning complexity and ambiguity into delightful user experiences.
experience
⦿ in the start-up space
⦿ working with conversational AI
⦿ with B2B, B2B2C, and SAAS platforms
⦿ excelling at turning complexity and ambiguity into delightful user experiences.
experience
Project X
View →
Project Y
View →
Project Z
View →
ON Platform
ON Platform
ON Platform
Live Chat
Live Chat
Live Chat
Overview
Overview
Overview
ON Platform is an industry-leading, enterprise-grade conversational AI platform specializing in customer engagement through a robust web chat interface. With the desire to enhance their value to existing clients and expand their market reach to new clients and verticals, ON faced the challenge of creating a lightweight live chat solution to include in their product offering.
ON Platform is an industry-leading, enterprise-grade conversational AI platform specializing in customer engagement through a robust web chat interface. With the desire to enhance their value to existing clients and expand their market reach to new clients and verticals, ON faced the challenge of creating a lightweight live chat solution to include in their product offering.
ON Platform is an industry-leading, enterprise-grade conversational AI platform specializing in customer engagement through a robust web chat interface. With the desire to enhance their value to existing clients and expand their market reach to new clients and verticals, ON faced the challenge of creating a lightweight live chat solution to include in their product offering.
Problem
Problem
Problem
Without live chat functionality:
⦿ Existing customers were required to use more tools than they desired.
⦿ New partners were blocked from being able to onboard
⦿ Access was blocked to specific channels that the company hoped to expand.
Without live chat functionality:
⦿ Existing customers were required to use more tools than they desired.
⦿ New partners were blocked from being able to onboard
⦿ Access was blocked to specific channels that the company hoped to expand.
Without live chat functionality:
⦿ Existing customers were required to use more tools than they desired.
⦿ New partners were blocked from being able to onboard
⦿ Access was blocked to specific channels that the company hoped to expand.
Solution
Solution
Solution
The product team was tasked with conceptualizing a live chat solution that could meet the needs of current and potential clients while keeping the scope of the project light.
The product team was tasked with conceptualizing a live chat solution that could meet the needs of current and potential clients while keeping the scope of the project light.
My role
Design Lead
My contributions
Interface Design
Prototyping
Client demos
User + market research
User interviews
Post-deployment QA
The team
Myself
Product Designer
Product Manager
Front End Engineering
Timeline
Q2 2022 - Q4 2023
My role
My role
My role
Design Lead
Design Lead
Design Lead
Year
Timeline
Timeline
Q2 2022 - Q4 2023
Q2 2022 - Q4 2023
Q2 2022 - Q4 2023
My contributions
My contributions
My contributions
Design iterations
Prototyping
Client demos
User + market research
User interviews
Post-deployment QA
Interface Design
Prototyping
Client demos
User + market research
User interviews
Post-deployment QA
Interface Design
Prototyping
Client demos
User + market research
User interviews
Post-deployment QA
The team
The team
The team
Myself
Product Designer
Product Manager
Front End Engineering
Myself
Product Designer
Product Manager
Front End Engineering
Myself
Product Designer
Product Manager
Front End Engineering
Defining the product
Defining the product
Defining the product
As an AI-powered chat solution, ON originally had little intention of supporting live chat functionality. However, as the number of partners interested in our platform grew, the need for some level of live chat support became apparent.
We researched the solutions our current partners were using and discovered what worked and what caused frustration. We took stock of other popular live chat solutions currently on the market and noted common features among platforms, as well as the platforms used by our partners.
The Product Manager and design team created a PRD to give the team guide-rails for design evaluation during the iteration process. These product requirements were divided into phases, allowing the engineering team to quickly build and release a barebones product. The phases of design and development followed a lifecycle of build, measure, and learn.
As an AI-powered chat solution, ON originally had little intention of supporting live chat functionality. However, as the number of partners interested in our platform grew, the need for some level of live chat support became apparent.
We researched the solutions our current partners were using and discovered what worked and what caused frustration. We took stock of other popular live chat solutions currently on the market and noted common features among platforms, as well as the platforms used by our partners.
The Product Manager and design team created a PRD to give the team guide-rails for design evaluation during the iteration process. These product requirements were divided into phases, allowing the engineering team to quickly build and release a barebones product. The phases of design and development followed a lifecycle of build, measure, and learn.
As an AI-powered chat solution, ON originally had little intention of supporting live chat functionality. However, as the number of partners interested in our platform grew, the need for some level of live chat support became apparent.
We researched the solutions our current partners were using and discovered what worked and what caused frustration. We took stock of other popular live chat solutions currently on the market and noted common features among platforms, as well as the platforms used by our partners.
The Product Manager and design team created a PRD to give the team guide-rails for design evaluation during the iteration process. These product requirements were divided into phases, allowing the engineering team to quickly build and release a barebones product. The phases of design and development followed a lifecycle of build, measure, and learn.
Finding common ground
Finding common ground
Finding common ground
I orchestrated a flow chart that worked to define how requests would move through our system and defined terms to quickly align the involved teams on the terminology used to speak about the product and helped them visualize how our clients would move through the workflow of responding to live chat requests.
I orchestrated a flow chart that worked to define how requests would move through our system and defined terms to quickly align the involved teams on the terminology used to speak about the product and helped them visualize how our clients would move through the workflow of responding to live chat requests.
I orchestrated a flow chart that worked to define how requests would move through our system and defined terms to quickly align the involved teams on the terminology used to speak about the product and helped them visualize how our clients would move through the workflow of responding to live chat requests.
With this flowchart, we were able to accomplish two things:
⦿ We could have strategic conversations with the larger product and engineering team without confusion around terminology
⦿ While building out the workflows, we evaluated the problem through the eyes of our users. The flowchart allowed us to center all early conversations so that our users' needs were considered every step of the way.
With this flowchart, we were able to accomplish two things:
⦿ We could have strategic conversations with the larger product and engineering team without confusion around terminology
⦿ While building out the workflows, we evaluated the problem through the eyes of our users. The flowchart allowed us to center all early conversations so that our users' needs were considered every step of the way.
With this flowchart, we were able to accomplish two things:
⦿ We could have strategic conversations with the larger product and engineering team without confusion around terminology
⦿ While building out the workflows, we evaluated the problem through the eyes of our users. The flowchart allowed us to center all early conversations so that our users' needs were considered every step of the way.
Design iterations
Design iterations
Design iterations
Our design team had a strong belief that the fastest and best way to effectively communicate between teams is through high-fidelity wireframes. We began by using as many design system components without modification as we could and custom built components as needed. This allowed us to rapidly iterate on designs and communicate with clarity between product and engineering teams. While the initial designs look nice, they were far from done and took many rounds to find a happy landing place.
Our design team had a strong belief that the fastest and best way to effectively communicate between teams is through high-fidelity wireframes. We began by using as many design system components without modification as we could and custom built components as needed. This allowed us to rapidly iterate on designs and communicate with clarity between product and engineering teams. While the initial designs look nice, they were far from done and took many rounds to find a happy landing place.
Our design team had a strong belief that the fastest and best way to effectively communicate between teams is through high-fidelity wireframes. We began by using as many design system components without modification as we could and custom built components as needed. This allowed us to rapidly iterate on designs and communicate with clarity between product and engineering teams. While the initial designs look nice, they were far from done and took many rounds to find a happy landing place.
Problem solving for space constraints
Problem solving for space constraints
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
Some kind of dash or informative action center.
We started with a large amount of room to play and set up sprawling architecture with many layers, but as we built the product, we found that the project roadmap for the initial production was going to be smaller than anticipated, and could fit in seamlessly with our main product.
Now we faced the challenge of reduced real estate. This led to the creation of an always-present inbox when inside of live chat. You could view this from the table of live chat requests, as well as when in a focused view inside of a specific live chat request.
We treated the table of requests as a pseudo landing page, with a "heads-up" display at the top of the page, letting agents know how many requests were unassigned, opened, and currently chatting.
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
Some kind of dash or informative action center.
We started with a large amount of room to play and set up sprawling architecture with many layers, but as we built the product, we found that the project roadmap for the initial production was going to be smaller than anticipated, and could fit in seamlessly with our main product.
Now we faced the challenge of reduced real estate. This led to the creation of an always-present inbox when inside of live chat. You could view this from the table of live chat requests, as well as when in a focused view inside of a specific live chat request.
We treated the table of requests as a pseudo landing page, with a "heads-up" display at the top of the page, letting agents know how many requests were unassigned, opened, and currently chatting.
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
Some kind of dash or informative action center.
We started with a large amount of room to play and set up sprawling architecture with many layers, but as we built the product, we found that the project roadmap for the initial production was going to be smaller than anticipated, and could fit in seamlessly with our main product.
Now we faced the challenge of reduced real estate. This led to the creation of an always-present inbox when inside of live chat. You could view this from the table of live chat requests, as well as when in a focused view inside of a specific live chat request.
We treated the table of requests as a pseudo landing page, with a "heads-up" display at the top of the page, letting agents know how many requests were unassigned, opened, and currently chatting.
Early dashboard explorations
Early dashboard explorations
Early dashboard explorations
Before consolidating live chat into our primary product, I worked through a handful of dashboards to operate as an entry point for users, giving them a high-level view of activity and needs throughout their day.
Before consolidating live chat into our primary product, I worked through a handful of dashboards to operate as an entry point for users, giving them a high-level view of activity and needs throughout their day.
Before consolidating live chat into our primary product, I worked through a handful of dashboards to operate as an entry point for users, giving them a high-level view of activity and needs throughout their day.
Early table explorations
Early table explorations
Early table explorations
While the dashboard would serve as a high-level view of daily operations, the table existed as a high-level view of each ticket. These iterations served as conversation starters with the product manager and engineering leads to help discover what information was possible surface here, as well as what would be helpful.
While the dashboard would serve as a high-level view of daily operations, the table existed as a high-level view of each ticket. These iterations served as conversation starters with the product manager and engineering leads to help discover what information was possible surface here, as well as what would be helpful.
While the dashboard would serve as a high-level view of daily operations, the table existed as a high-level view of each ticket. These iterations served as conversation starters with the product manager and engineering leads to help discover what information was possible surface here, as well as what would be helpful.
Early request page explorations
Early request page explorations
Early request page explorations
The iterations for the detailed view of a request were an exercise in making the complex look simple. Agents needed to ability to quickly scan a detailed page and find the information they needed to execute a successful conversation.
The iterations for the detailed view of a request were an exercise in making the complex look simple. Agents needed to ability to quickly scan a detailed page and find the information they needed to execute a successful conversation.
The iterations for the detailed view of a request were an exercise in making the complex look simple. Agents needed to ability to quickly scan a detailed page and find the information they needed to execute a successful conversation.
Early inbox explorations
Early inbox explorations
Early inbox explorations
Once we bundled the live chat into our primary product, there was a need for a light weight inbox that was never hidden. Seconds counted for our customers, meaning an agent needed to see a request at the moment that it arrived.
Once we bundled the live chat into our primary product, there was a need for a light weight inbox that was never hidden. Seconds counted for our customers, meaning an agent needed to see a request at the moment that it arrived.
Once we bundled the live chat into our primary product, there was a need for a light weight inbox that was never hidden. Seconds counted for our customers, meaning an agent needed to see a request at the moment that it arrived.
Explorations combining the inbox and "heads-up" display with other pages
Explorations combining the inbox and "heads-up" display with other pages
Explorations combining the inbox and "heads-up" display with other pages
From here, the product started to take shape. Having to operate under a "less is more" philosophy provided clarity into what information was truly critical to our users.
From here, the product started to take shape. Having to operate under a "less is more" philosophy provided clarity into what information was truly critical to our users.
Designing for the wishlist
Designing for the wishlist
Designing for the wishlist
Having brought the designs to a happy level of polish, we started to pick apart specific features, focusing on the required engineering lift and measuring it against the current customer and business needs.
Having brought the designs to a happy level of polish, we started to pick apart specific features, focusing on the required engineering lift and measuring it against the current customer and business needs.
Having brought the designs to a happy level of polish, we started to pick apart specific features, focusing on the required engineering lift and measuring it against the current customer and business needs.
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, would have been powerful insights for customer success agents, however, the involved teams agreed that the lift for the engineering team was not equal to the customer and business needs at the time of production.
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, would have been powerful insights for customer success agents, however, the involved teams agreed that the lift for the engineering team was not equal to the customer and business needs at the time of production.
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, would have been powerful insights for customer success agents, however, the involved teams agreed that the lift for the engineering team was not equal to the customer and business needs at the time of production.
Similarly, I designed a dashboard that would be an instrumental control center for customer success agents. This was in response to a need for baseline analytics for customer support teams, primarily managers who would need to keep a finger on the pulse of day-to-day operations. The solution was favorable to the team, however, we ultimately worked live chat metrics into a separate software solution that was responsible for handling the analytics of our primary product offering.
Similarly, I designed a dashboard that would be an instrumental control center for customer success agents. This was in response to a need for baseline analytics for customer support teams, primarily managers who would need to keep a finger on the pulse of day-to-day operations. The solution was favorable to the team, however, we ultimately worked live chat metrics into a separate software solution that was responsible for handling the analytics of our primary product offering.
Similarly, I designed a dashboard that would be an instrumental control center for customer success agents. This was in response to a need for baseline analytics for customer support teams, primarily managers who would need to keep a finger on the pulse of day-to-day operations. The solution was favorable to the team, however, we ultimately worked live chat metrics into a separate software solution that was responsible for handling the analytics of our primary product offering.
While these features did not make it into the official product, the designs remained in the backlog as an inspiration for what the future state of our live chat could be.
While these features did not make it into the official product, the designs remained in the backlog as an inspiration for what the future state of our live chat could be.
While these features did not make it into the official product, the designs remained in the backlog as an inspiration for what the future state of our live chat could be.
Outcome
Outcome
Outcome
After aggressively trimming any feature or function that was unnecessary to accomplish our goal of serving current clients and onboarding new ones, we created a delightful and lightweight solution that fit the bill.
Using a comprehensive prototype (shown below), we worked with sales and customer success to communicate to both customers and prospects where the product was going. This allowed for early feedback but also generated excitement around the future of the product capabilities we facilitated conversations through client demos and ultimately shipped a successful live chat feature.
After aggressively trimming any feature or function that was unnecessary to accomplish our goal of serving current clients and onboarding new ones, we created a delightful and lightweight solution that fit the bill.
Using a comprehensive prototype (shown below), we worked with sales and customer success to communicate to both customers and prospects where the product was going. This allowed for early feedback but also generated excitement around the future of the product capabilities we facilitated conversations through client demos and ultimately shipped a successful live chat feature.
After aggressively trimming any feature or function that was unnecessary to accomplish our goal of serving current clients and onboarding new ones, we created a delightful and lightweight solution that fit the bill.
Using a comprehensive prototype (shown below), we worked with sales and customer success to communicate to both customers and prospects where the product was going. This allowed for early feedback but also generated excitement around the future of the product capabilities we facilitated conversations through client demos and ultimately shipped a successful live chat feature.