Helping support agents find information easily
Agents spend most of their time on the ticket details page & one of the most important things for an agent is finding the right information while responding to the customers. The average response time to customer support tickets is 7 hours 4 minutes. Response time is probably the most important metric & it should always be as low as possible despite the company or industry specifics.
Agents were having trouble finding informations because a)Information architecture is flat, ambiguous & not distinct b)information on the screen was too dense and difficult to read c)confusing viewing pattern
What the design looked like before
In an earlier iteration of the ticket details page, the latest customer replies were hidden in the bottom of the page. This led to a few problems:
Users always need to scroll down to bottom of the page to see latest updates
Scrolling to the page bottom hides all important information on the top section
Not able to refer ticket information and simultaneously reply
Everything is hidden in the bottom of the page
Exploring possible solutions 🔮
I came up with two hypotheses:
The user doesn't need to see all the information simultaneously as this is overwhelming
Layout should have a separate section to independently scroll & access all additional information e.g. contact info, ticket info, integration data
Based on these assumptions, I started exploring some options that showed all the information more clearly while adding a reply. While working on information design, my primary goal is to create an experience that allows the user to focus on their tasks, not on finding their way around.
The more content a product has, the more significant the role of IA in the UX design process.
Mock Version 1 - Bottom Sticky Floating Reply Section
Mock Version 2 - As per product team input
In my proposed solution I decided to balance both ticket conversations & all additional information visible on the screen at a glance. Basic principles of IA is to focus on the organization of information based on the content priority & removing any irrelevant information. For eg: Queues below main menu is unnecessary as it doesn’t add any value while replying to the customers. With new design scanning content in view provides users a format that follows their natural reading pattern like the F-shaped pattern.
The best solution was achieved by ensuring that the correct information was accessible at the most pertinent time.
What was shipped 🚀
Agents can simultaneously refer all available information & reply
A few months after this had been shipped and significant data had been collected, I was happy to see that we had a ⬇️ 32.7% decrease in average time spent on tickets!