Inbox navigation

Teamwork Desk

My role

Qualitative research - ongoing user interviews, community feedback analysis, observed behaviour sessions.

User story mapping, MVP strategy analysis, product concept prototyping, UI visual execution, design system contributions, user-testing, analysis and iterations.

June 2022 — Feb 2023

Project Overview

Teamwork Desk is a help desk and ticketing system designed to easily manage customer emails in one location. Essential to the functionality of Desk is the ability to create, manage and report on tickets through which interaction with the customer and agent is formed.
‍
As part of our overarching design objective to uplift the UI and UX across core Desk pages, we prioritised focus on improving usability of the navigation within the inbox area of the app.

Problem statement

Design problems within the inbox area of Desk were discovered through continual research via user interviews, community feedback analysis and observed behaviour sessions.

In order to organise large numbers of customer emails efficiently, users often create multiple inboxes. The result was often an overly congested inbox navigation area, with an unbalanced information architecture and various usability issues throughout the inbox list.

Our hypothesis was that by providing additional levels of hierarchy within a user's inbox, ticket visbility would be improved and agents would respond to more tickets per hour.

Poor readability within ticket lists

Excess information per ticket row and a lack of colour theory creates confusion and and poor scan-ability when working within extensive ticket lists.

Complicated information architecture

Users are creating an overloaded navigation in order to organise ticket volumes. Information is often duplicated on mass and lacks a prioritised hierarchy.

Stuttering loading times

Calling for the ticket counts of multiple ticket status categories within each inbox has detrimental loading time effects. Usability is effected massively by extensive loading times.

Overwhelming tag prominence

Tags are a commonly used feature within desk as a means of sub categorising tickets. Tickets are often assigned multiple tags which creates an overwhelming visual presence within the inbox

Design problem

Complicated information architecture

Solution

By positioning custom email statuses horizontally it removed duplication per inbox and and offered context to the inbox in view.
‍
Users created many inboxes in order to categorise emails so navigation became confusing and overloaded.

Solution #1

Design problem

Poor readability within ticket lists

Solution

The cluttered UI hierarchy across an email inbox created a confusing experience with poor readability for the user when scanning lists. Users would struggle to distinguish between read/unread emails and be presented with information that wasn’t fully relevant to their decision making.

Testing proved colours for avatars, custom statuses and tags felt overwhelming. Retaining tags as the only custom colour option and removing avatars allowed for improved readability per table row.

Solution #2

Design problem

Too much truncation within ticket lists

User scenario

Too many default table columns resulted in excessive truncation of copy and a very limited amount of context with the information provided. On laptop resolutions, users would be presented with a table of broken content and struggle to make decisions.

Data suggested that by reducing the amount of default columns and removing the preview copy of an email, truncation issues were minimised.

Solution #3

Design problem

Overwhelming tag prominence

User scenario

Tags are frequently utilised in desk to help organise tickets. It is common for tickets to be assigned multiple tags, which can result in a visually overwhelming inbox. Tags previously sat on a horizontal row below the email subject and had no UI solution for multiple tags - tags would just stack vertically and extend email rows horizontally.

Tags were moved to their own separate column within the table. A solution for multiple tags was also implemented that allowed for the most popular to be displayed, with additional tags displayed via a popover.

Solution #4

Design problem

No horizontal scrolling on tables

Solution

By default, the email list (table) within a Desk inbox contains various columns which can be customised to suit a specific workflow. The overload of information often creates a congested list view, with important columns being truncated to compensate for the table not being responsive.

We decided to implement a solution where the leftmost column remained sticky, allowing the rest of the table to scroll on a horizontal scrollbar. Readability was no longer compromised by truncation, while also allowing users to add multiple columns to a table without a compromise for space.

Solution #5

Impact

Desk subscriber counts grew consistently for 3 years as of 2023. Revenue has also risen from 80k pm in 2018 to £500k pm in 2023 as part of the design uplift.
‍
Qualitative feedback suggests a vastly improved experience for users spending large amounts of time answering client queries on the app. Users faced less frustration when using the inbox area and reported less negative feedback around the experience of organising emails within an inbox.
‍

So, why not take a look at my next case study?