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.
👓 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
Old experience
User personas
Desk is a SaaS product utilised by support agents in various industries as a tool for managing consumer communications (via email).

Users frequently dedicate the majority of their shifts to working within Desk's inbox and ticket areas. Therefore, it is crucial that the app's usability remains at the forefront of our design thinking.

Personas within Desk can be categorised into 3 main users:
Jobs to be done
Foundations for an MVP feature backbone were created by analysing the user stories at agent level when working within the inbox area of Desk. User mapping workshops helped define the requirements of our core users. Examples that were used as design parameters can be found below

User mapping workshops helped define the requirements of our core users.
User journeys
Insights gained from the jobs-to-be-done exercises identified common user tasks and allowed us to organise the user journey of the agent into key categories.
Design problem
Complicated information architecture
User scenario
Users created many inboxes in order to categorise emails so navigation became confusing and overloaded.  It was also possible to create custom sub categories for emails within inboxes which resulted in excessive duplication and poor readability throughout the architecture.
Solution #1
By positioning custom email statuses horizontally it removed duplication per inbox and and offered context to the inbox in view. Quantitative data was also used to remove the ability to search inboxes from within the navigation. As was live chat functionality which further improved the experience for core user journeys.
Design problem
Poor readability within ticket lists
User scenario
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. Inbox lists appeared overwhelming visually and a daunting experience for users being onboarded.
Solution #2
Testing proved colour to be a specific issue within the list. Colours for avatars, custom statuses and tags felt overwhelming and a poor experience when choosing which email to open. Retaining tags as the only custom colour option and removing avatars allowed for improved readability per table row.
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.
Solution #3
Data provided insight into which columns to retain in order to display the most valuable information to users making email selections. By reducing the amount default of columns and removing the preview copy of an email, truncation issues were minimised.
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.
Solution #4
Tags were moved to their own separate column within the table (which can we hidden if a user prefers not to categorise via tagging). A solution for multiple tags was also implemented that allowed for the most popular to be displayed, with additional tags displayed via a popover. The more formalised UI layout of tags improved the overall appearance of the table and heightened feelings of improved clarity.
Design problem
No horizontal scrolling on tables
User scenario
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 (such as the sender of the email) being truncated to compensate for the table not being responsive.

A lack of contrast visually also made it hard to distinguish between hover, read and unread states on emails within the list.
Solution #5
In order to improve the usability of the table, 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.

Hover states to allow email preview were also added to the uplift, removing the need for incorrect preview clicks when searching for a specified email.
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.