Inbox

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.

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

Solution

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

Solution

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

Solution

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

Solution

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

Solution

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.

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.
‍

Inbox navigation