Virtual Chat Agent for Mobile

 
 

Project Overview

Bring LinkedIn help chat to mobile. Create a system-wide solution so it can be implemented on the full suite of LinkedIn apps.

My Contribution

I was solo designer on this project for the full process - from development to handoff for shipping

 
 

 Context

 

What was the project?

LinkedIn help chat (Virtual Chat Agent) has been a desktop feature for years, but wasn’t available in any LinkedIn app. The goal of this project was to bring VCA to mobile in 3 steps.

  1. Create a design system that would be able to create a cohesive experience across the suite of LinkedIn mobile apps.

  2. Implement it on the flagship LinkedIn app first as an MVP

  3. After testing, launch the VCA on the other LinkedIn apps.

 

What is the VCA?

It’s the help chat feature on LinkedIn. Users start with an AI chatbot to answer questions like how to navigate to the payment methods page or to get clarification on what certain terms mean.

If a user still needs more help, then they are connected in the same window to a live agent. This feature is usually for more complex things like getting ad credits refunded or how to fix a payment method that isn’t working.

 

Who uses it?

This is a feature that can be used by everyone. It doesn’t matter whether you’re onboarding or a power user, there is always the potential for having needing help when using a product.

To account for this, I used three widely diverse job performers in exploring user flows and Jobs to be Done - A job searcher, a recruiter, and a salesperson.

 

What was the initial situation?


Desktop version
Simple and easy to use. Users could open the help chat by clicking a FAB button in the bottom right corner of the page and a window would pop up. Meant they could keep their task in sight while getting help.

Mobile
Essentially didn’t exist. The only way users could access the help chat was to go through multiple navigation steps and then be routed to a mobile web browser outside of the app. There was nothing built natively inside the apps.

This means users would have to leave their task and navigate multiple clicks away to access it. On top of that, every app had implemented the VCA in a different location. It led to a lot of user confusion and frustration.

 

Why is this a problem? Why solve it now?


User case:
We know that help chat is a feature that has high usage across every user type. Even power users will access it for things like navigating to infrequently used pages like payment methods. And it’s the main channel to connect with live agent. We also know that 60% of our traffic in on mobile, so there’s a huge opportunity to benefit this portion of our customer base that currently doesn’t have access to it.

Business Case:
Having a chat bot feature helps user self-servce and results in reducing customer service tickets by roughly 70%. That helps reduce costs for LinkedIn.

Urgency:
Giving users access to the help chat on mobile opens up huge opportunity to service members by reducing friction and improving user experience. This hopefully will lead to lower churn and improved long-term use.

 

70% fewer customer
service tickets on desktop because of VCA

 

But 60% of LinkedIn
traffic is on mobile

 

Challenges and considerations

Form factor:
Mobile is a very different form factor than desktop. We have to completely rethink the designs and interactions. If we try and just smash the designs from desktop into a smaller screen, we’re going to wind up with a bad experience.

App variation
All of the LinkedIn apps were developed at different times by different teams. That means they have different layouts and design elements, even for something as basic as how to get to the settings page. Means it will be a challenge to come up with a cohesive experience for users across the platform.

 

Project strategy

With all that in mind, the project was broken into three large steps.

  1. Start by developing design system that was comprehensive and flexible enough to could apply to all the apps on the platform

  2. Use that system to implement it on the flagship app first. Test, ramp, and deploy it there to make sure the system is successful

  3. Take what we’ve learned from step 2 to improve implementation on the remaining apps on the platform

 
 

Planning and Learning

 

Research existing resources

I started by reviewing the materials used to create the original VCA and the data collected since it had been implemented. This would help me understand the overall user experience with the VCA:

  • PRDs

  • Design docs

  • Usage data (submitted cases and questions to chat)

  • User feedback (from POM interviews)

 

Understand the users pain points and goals

We’re designing to help people understand and use these tools better. This means any person trying to use our products on mobile. Mobile isn’t used as a channel for admin tasks, so we’re looking at end users

 

Audit existing LinkedIn experience

Collect all existing interactions and flows on desktop, mobile, and tablet across the different products.

 

Competitive analysis

Explore what mobile help chat experiences are like for other companies. Especially important to show what the limitations and restrictions are for the format.

 
 

Evaluate

Results from the research

After the research, I was able to identify 4 key interaction elements for implementing a help chat on mobile.

 

1. Discoverability:
Navigation to VCA is different in each app, hard to find and use
Minimum clicks to access (3).

Access:
VCA is not accessible during user task flow.
Means that if a user needs information or hits a roadblock, they must stop their current task, navigate away from it to get to VCA, then start their task flow from scratch.

Consistency:
Access to VCA is different in each app
Requires users to learn new interactions for each app to accomplish same tasks

Persistence:
Each time you start chat in mobile, it starts from scratch.
To integrate into user task effectively on mobile, VCA needs minimize feature in addition to end chat.
There is also no way to see or access previous chat information, forcing a user to repeat chat interactions to get the same information.

 
 
 
 
 
 

Define

 

User touch points

sample text

Take these learnings and start

 
 

Identify key interaction elements

What is needed to on the mobile interface for users to move through touch points

  • Entry point type and location

  • Navigation

  • Chat interface

  • Leaving chat, returning to chat

 
 

Overall Jobs to be done

 

Jobs to be done for mobile

 

Explorations

 

How I approached this project

There was no way to directly condense the desktop experience into mobile. That was an easy way to create a bad experience.

Instead, I needed to take a step back and approach the project from the original jobs to be done for user help chat.

Once I had that, then I could add in jobs to be done that specifically dealt with

 

Jobs to be Done for VCA

  1. Onboarding: Learn how to use a linkedin Product

  2. Learning: Understand specific topics of the app

  3. Troubleshooting: overcome blockers to finish user flows

  4. Purchasing: Buying and managing subscriptions