Task details panel

Crafting a home for quality collaboration

Company

Teamwork.com

Role

UI/Product Designer

Timeline

2022 – 2024

Overview

While the task list view is like the engine room of how Teamwork.com runs, a place for teams to see in real time how work is moving along and catch any issues as they arise, the task details panel is where they come together to make the magic of teamwork come alive.

I worked on a series of updates to this area to uplift the interface, optimise it for most frequent use, and enhance the overall experience and perceived usability.

Key UI and UX Issues - Old task details panel

Phase 1 / Audit & research

As always, the project began with a thorough audit of the current UI and UX landscape, cataloguing any issues and mapping out the most urgent issues to resolve while earmarking longer term fixes for future sprints/releases. Just like task list view, this was a high traffic (approx 500k visits a day) and a much loved product area that users spent the majority of their day in, so ensuring we didn’t disrupt our existing user base’s workflow was tantamount in terms of business goals and keeping churn of both new and existing customers at a minimum.

Key data (most frequent actions)

Leaning on data

As this was such a longstanding and highly used product area, we had a wealth of both qualitative and quantitative data to lean on when making key decisions. Anecdotally, from speaking to customers, we knew that commenting was a critical action when interacting with a task, and an area ripe for improvement in terms of experience. From our customer interviews and by triangulating with our analytics we identified the following as the key things to address when updating the panel:

  1. Commenting on a task
    Commenting is at the heart of how our PM and IC personas interacted with the task details panel. From our interviews we quickly learned that, when busy or populated with a lot of content, the task comments section could often get pushed out of sight and out of mind, making it difficult for teams to quickly initiate and update the conversation around a task.

  2. Logging time on a task
    Logging billable hours against a task was a massive pain point for teams and particularly when returning to, or updating, a completed task. Users needed quick access to this and to be able to quickly review the logged hours vs the original estimate, so making this prominent and easy to understand at a glance was crucial.

  3. Viewing and completing subtasks
    Subtasks are where the real work happens, as it turned out. Many teams used parent tasks as a folder for a body of work, and it was within the subtasks that a lot of the activity really happened. Previously the subtasks had been neglected within the panel, so we knew we needed to give them extra emphasis and love.

  4. Editing the description and viewing the task history
    Often times things didn’t go according to plan within a project and details needed to be updated. Users needed quick access to edit the details of a task and a changelog in place to come back to in case an issue arose with a piece of work (we’ve all had those nightmare projects that go off-track). We prioritised making the task easily editable and the history easy to find and review.

Task details panel updates

UI and behavioural specs

Expanding the work (literally)

As we rolled out the first batch of UI and UX 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.

With the introduction of these updates, brought a new area for exploration, an adapted full-screen layout for the task details panel. We knew this was something that could vastly improve the experience and with the newly afforded screen estate created by expanding the panel we quickly tested a couple of variants with our users to ascertain which combination of elements aligned best with their mental model when viewing a task.

UI and behavioural specs

Default width

Full-screen

 

Results & Learnings

This was a long project that, once again, we spaced out incrementally to ensure minimal disruption to our user base in their day-to-day workflow. Although this meant that at times it was a tricky project, navigating walls of feedback with even the most minor changes, it also gave us the benefit of being able to react to our customers in real time and quickly put out any fires that arose.

As this work happened in parallel with Teamwork’s new design system Lightspeed being developed, we had the opportunity to define, contribute and deploy many of the core critical components and document best practices in terms of interaction and usage.

We also managed to significantly reduce the technical debt and inconsistency of the platform by unifying the task details panel experience across all product areas (previously a different panel layout was being served to customers depending on where they opened a task, yikes!).

Overall the panel performed much better in terms of time on task for most of our identified high value actions and the percentage in positive feedback from our IC worker bee persona improved over the following months post-release, ultimately contributing towards the business goal of reducing churn.

Next

Task list view