Task list view
Breathing new life into a beloved workhorse
Company
Teamwork.com
Role
UI/Product Designer
Timeline
2021 – 2023
Overview
Task list view, although the bread and butter of how people use Teamwork.com, was dated, clunky and in dire need of a facelift and a serious UX overhaul.
It had fallen way behind competitors, and our core individual contributor persona, Worker Bee William, had become incredibly frustrated with the experience overall. On joining the team, one of my first main projects was to audit the task list view, map out a timeline for research and design and to validate any ideas around how to improve the area without degrading existing functionality or alienating the existing legacy or power users.
Identified UI Issues - Old task list view
Phase 1 / Audit & research
I began the project with an initial design audit and heuristic evaluation, earmarking the most urgent UI and accessibility issues to address, then moving onto longer-term fixes and less critical issues. Concurrently, I started to look at some of the unusual UX patterns which had developed organically over the years and started thinking of ways to address these using ad hoc UX research methods to gather early feedback.
From the initial UI/UX audit the most critical issues identified were:
Low contrast colours used for text and graphical elements
Inconsistent and unclear icons for key user tasks
Inconsistent styles diverging from other main product areas
Unusual/unconventional patterns for editing and assigning tasks
Less important task actions being forefronted over primary ones
Overall content overload and prioritisation of functionality
Old task list view interface
Updated task list view interface
Phase 2 / Design Phase & User Testing
Based on the findings from the first phase, I began working up UI designs to address the visual and accessibility issues, while in parallel testing out some of the concepts we had devised to address some of the larger UX pitfalls of list view.
Having conducted some initial usability and preference testing, and after receiving the go-ahead from senior stakeholders regarding the UI, I started to break up the work into manageable chunks which we could then ship and start getting feedback from our customer base. A close feedback loop was key here in ensuring that we hadn’t overlooked anything or degraded the experience in any way, and to ensure that we weren’t disrupting the workflow of any of our trusted power users.
A crucial part of this work was ensuring that we leveraged as much as possible from the existing design system while also contributing any new components needed to ensure we weren’t creating unnecessary duplication or one-offs.
Sweating the details - UI Specs
Responding to feedback
As we rolled out the first batch of UI updates, keeping a close on any significant feedback trends that came through was paramount to ensuring we kept our key personas on board with the updates and not to derail, or have to roll back, any of our updates.
Based on these updates two steady trends came back that we knew had enough statistical significance not to be put down solely to change aversion alone.
Task followers icon
With the new batch of UI Improvements we received overwhelming feedback that the new task followers icon was too prominent and distracting when users were following a large amount of tasks and skimming down through a project.
We refined and tested 2 new versions and found that removing the space around the iris resolved the issue and tested well with our legacy users who were accustomed to the old icon style.
Assignee pattern
Another key trend that came back in the feedback was that, despite initial concept testing our user base (particularly existing power users) found the new order of elements more difficult to scan at-a-glance.
They also found the new avatar pattern for assignees more difficult to understand who the task was assigned to while scanning so as a result we introduced some advanced customisation options to allow for the assignee name to be displayed in a more subtle style than before.
Phase 3 / Testing UX fixes, shipping and iterating
Following from the success of the UI updates and based on assumptions from internal stakeholders and anecdotal feedback from customers three main UX pitfalls were identified to tackle, validate and test solutions against:
Content overload/hard to read
Too many options on task hover
Confusing task quick edit experience
Identified UX Issues to test and validate
Results & Learnings
From testing our UX solutions against the identified problems we quickly got some insight into how these tweaks might impact the day-to-day of our key personas, which ones were feasible to release and which ones needed a little more thought.
Reducing the amount of content displayed by default
👎
Despite initial assumptions that imposing a structure or reducing the amount of content on display by default would simplify the experience, our concepts tested poorly with our key PM persona
Decision
Decided to pause on concept and return to it with some alternative ideas in future to test when there are fewer updates being carried out.
Progressively disclosing the task actions on hover
👎
Similar to reducing the amount of task data displayed by default, any attempts to reduce the level of functionality by default in the list view tested poorly with our PM user, they rarely ever go deeper into the task to make edits so they wanted full edit capabilities from this view
Decision
Decided to pause on concept and return to it with some alternative ideas in future to test when there are fewer updates being carried out.
Optimising the task quick edit form
🎉
Similar to reducing the amount of task data displayed by default, any attempts to reduce the level of functionality by default in the list view tested poorly with our PM user, they rarely ever go deeper into the task to make edits so they wanted full edit capabilities from this view
Decision
In usability testing we found that our key project manager personas were creating tasks on average approximately 5 seconds faster, concept was approved to bring forward to production.