Virtual Chat Agent for Mobile
Project Overview
Bring LinkedIn help chat to mobile. Create a system-wide solution so it can be implemented and accessed 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 accessible natively in any LinkedIn app. The goal of this project was to bring VCA to mobile in 3 steps.
Create a design system so users could access and use the VCA on all of LinkedIn’s apps (and have it feel cohesive)
Implement the VCA on the flagship LinkedIn app first as an MVP.
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
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 for system design
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 Goals
The core chat feature and internal infrastructure already existed, so I didn’t have to design that. The main areas I needed to focus on were:
How would users access the VCA on mobile
How users would discover, locate, and navigate to those access points
What kinds of interactions would the users have when starting, pausing, and ending chats
And finally, how to create a system so all of that felt cohesive to users no matter which LinkedIn app they were using.
Understanding the existing system
How to approach such a big, ambiguous problem
This was an incredibly wide reaching project, with multiple touchpoints across multiple products. It needed to be approached holistically, so I needed to understand the all of the components of the existing system and how they interacted with each other.
Understand the Current Desktop VCA
I started by examining the current VCA product on desktop to understand what the jobs to be done, use cases, and user flows were. I would have to capture those to make sure there was parity when transitioning it to mobile.
Understand Current Mobile Experience
I moved on to doing an audit of for everywhere the VCA lives and can be accessed across the LinkedIn Apps. You can see in the image below just how varied the experiences are across the LinkedIn apps, even for something as simple as accessing the feature.
Understand the User
I had a better idea about the VCA as a feature, but now I needed to refocus on the user experience. So I distilled all the information I’d collected on the Jobs to be Done and user journeys into two artifacts. A set of touchpoints for the VCA user journey, and an idealized user flow. They were both abstracted to be app agnostic and applicable to any of the linkedIn products. This helped me stay focused on the user experience with the platform as a whole rather than any one app.
Starting Point
Designing the Entry Point
Before I could continue working on the overall system, I needed to figure out what the entry point design would be. The interaction that I landed on could dramatically change the specific user flows I would need to create next.
Explorations
I started experimenting with multiple entry point types, and tested the best options by placing them in context on
Testing them in context
text here
Choosing an entry point style
After stress testing across all instances of the VCA on each app, I landed on the option that would work the best and had no fail points. I went with a top right icon in the header.
Expanding outwards
Detailing out the touchpoints
Now that I knew what the entrypoint would be, I could revisit the user touchpoints on the VCA journey and figure out how to implement it and use the mapping to figure out the other system design elements I would need to craft.
Identifying problems with VCA on mobile
Using the abstracted flow, I determined that there were four crucial requirements to implementing the VCA on mobile. All of my design work from here on the VCA would be driven by these.
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.
Synthesis
10,000 foot view
Because this was a system wide project, I needed to take my findings and figure out how they applied to a full platform with multiple apps, each with their own touchpoints and user flows.
Abstracting the user flows
After performing the audit, I was able to distill all of the instances of the VCA into an abstracted user flow. This helped me keep my solutions agnostic to any app, and identify what the absolutely necessary elements were for users to interact with the feature.
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
Onboarding: Learn how to use a linkedin Product
Learning: Understand specific topics of the app
Troubleshooting: overcome blockers to finish user flows
Purchasing: Buying and managing subscriptions
Connecting with Other Design Teams
This was a platform-wide effort, so I needed to speak with the design teams working where I’d found instances of the VCA occuring. I needed to know what limitations I had when developing my solutions, and to make sure I would have buy-in from them when eventually presenting the final product.
Over the course of 2 weeks I spoke with over 30 designers, design leaders, and product managers to discuss planning.
Discoverability:
Users needed to be able to find the VCA quickly and easily. It should live in an intuitive placement and have clear sign posting to get there.
Access:
The VCA needs to be accessible to users in the context of their task flow. If it’s in the middle of a task, it should be available to them without having to abandon the task and navigate away to find an answer.
Consistency:
Using the VCA should be consistent across all LinkedIn apps. Users shouldn’t have to learn new interactions to access the same feature when moving between apps.
Persistence:
Users should have the option to keep their chat going even if they leave the chat window. They should be able to look at their original page, or navigate to get required information without having to restart the help process from scratch each time.