Creating a customisable UI to improve usability and add value for users
Side Panel for Agent Workspace
Conversocial
Q1 2020
Role
Product Design Lead, responsible for Research, UX & UI
Side Panel is real estate in Conversocial’s Agent Workspace web app used to display important information about the customer as well as housing CRM integrations.
Research had shown that Side Panel was being neglected by users and that there were opportunities to improve usability, provide more valuable information to agents and develop ways to make integrating with the product as frictionless as possible.
Discovery
A great example of how a strategy of continuous improvement can impact digital products, the Side Panel project was born from insights gained during Agent Workspace Research.
The team supplimented early research by rapidly gathering system data and surveying agents to understand pain points in more detail.
Insights
- Agents leaving AW due to missing information or features
- No visibility of customers’ previous interactions
- No visability of customers’ other social media accounts
- Poor usability - scrolling, colour, readability
- Lots of manual effort to populate important fields
A great example of how a strategy of continuous improvement can impact digital products, the Side Panel project was born from insights gained during Agent Workspace Research.
The team supplimented early research by rapidly gathering system data and surveying agents to understand pain points in more detail.
Insights
- Agents leaving AW due to missing information or features
- No visibility of customers’ previous interactions
- No visability of customers’ other social media accounts
- Poor usability - scrolling, colour, readability
- Lots of manual effort to populate important fields
87%
of conversations handled without CRM integrations
38%
of agents often or always leave AW to complete tasks
5.1/7
Avg. SEQ Score for Usability of Side Panel
Definition
Together, the team defined goals, success metrics, and user stories as well as establishing an MVP approach to delivery. To make integrating with 3rd party tools more efficient the engineering team suggested that apps within Side Panel become modular.
Goals
- Drive agent efficiencies by providing them with relevant and valuable conversation and customer information
- Make Agent Workspace 'stickier’, stopping agents leaving to complete tasks
- Reduce dev time for new integrations
- Enable 3rd party dev of widgets
MVP Scope
- Modular technical structure
- Customisable Front End
- Ability for brands to configure their Side Panel
- Side Panel settings with preview capabilities
- 3x MVP Apps
- Ability to add tabs
- Improved UI capabilities
Backlog
- CRM Intergrations
- V2 Apps
- Auto-populating fields
Development
App concepts were created based on insights gained from our earlier research. Their primary focus was to provide valuable customer information to agents, the primary persona.
Concepts Included:
- Updated Profile Tags, Customer details & Notes Apps
- Customer CSAT
- Recent Convereations
- Other Social Accounts
- Detecting Conversation Intents
- Customer Insights
- Agent Performance
User Flows, Wireframing & User Testing
Sketches and wireframes were created from user flows, then rapidly user tested with the Professional Services team internally and iterated upon. Detailed interactions were designed for apps and tabs within Side Panel.
Delivery
UI was created from existing design language system patterns which made delivering final designs easy and quick. The design langauage system at Conversocial was created and owned by me, with another designer supporting.
Results
This feature is currently in development. Results will be gathered post release.