Trello – Notifications

A system to see upcoming tasks at a glance

Information

Partner

  • Jordan Caron

Stages

  • Design research
  • Ideation + Exploration
  • Prototyping

Role

  • UI design
  • UI writing

The Project

The challenge given to us was to design and introduce a new feature into an existing interface. My partner and I chose Trello — a user-friendly project managing tool that lets people manage, and organize projects in a visual way. Our tasks were to study Trello’s interface, conduct user research, explore possible solutions as new features, and prototype the final solution.

In our research, we found that users wanted to have better overview awareness of upcoming tasks to manage simultaneous projects. Our solution was to design a notifications system into the home dashboard consisting of interactive boards and a sidebar that would allow users to quickly view and navigate into upcoming tasks and activity across all boards.

My Role

My partner and I created this project over the course of 3 weeks. I contributed to ideation and worked with my team to conduct user research, and plan the user experience. I was in charge of designing the user interface to be consistent with Trello's existing visual language. I also wrote product education copy to allow for a smooth integration of the new feature into the interface.

Insights

Several of our research participants were freelancers, who were always managing several client projects at once. Because freelance work could be chaotic, they needed to be able to keep track of tasks on multiple project boards. A key insight out of our user interviews was that users managing multiple projects spent a lot of time figuring out what the most important tasks were.

Through task and interface analysis, observation, and testing, we found two reasons why this might be:

First Insight

On the dashboard, all boards have the same level of hierarchy and importance.

In user tests, participants spent time diving in and out of each board to figure out the most important tasks. The home dashboard could provide better indication of which boards have upcoming tasks.

insight-1
Second Insight

Within project boards, users with may find it hard to see all the "active" lists because of all the horizontal scrolling.

In our user tests, participants had up to 20 active lists at once. Horizontal scrolling made it difficult to see all lists at once and find the most important tasks.

insight-2

Exploration

Based on these insights, we explored three possible solutions using low-fidelity mockups:

Task sorting filters

Trello users spend a lot of time figuring out what task takes priority because task are spread across the board. A task sorting feature would provide users with an “at a glance summary” of upcoming or urgent tasks. By filtering out tasks which don’t require the user’s immediate attention, users can spend more time being productive. One possible filter might be by due date.

task-sorting-filters

Rejected: While this solution could reduce cognitive load by increasing visibility of upcoming tasks in projects, users managing multiple projects would still have to dive in and out of boards to figure out due dates. Furthermore, it would be research intensive to figure out the best filter modes. Due dates are an obvious option, but what are other indicators of importance?

Project Stages

To improve workflow on Trello, one idea is to implement a feature that lets him bucket “lists” into project stages. Project stages can be stacked vertically in order to reduce the amount of horizontal scrolling on the project board. This feature would provide users with more control and customization over the interface by adding flexible layout options, while providing another dimension of project organization.

project-stages

Rejected: We liked the idea of being able to create stages in addition to lists and cards — a vertical dimension of categorization could reduce the amount of horizontal scrolling, thereby improving the visibility of tasks in projects. Additionally, creating stages could improve workflow and give users more flexibility and control over project organization. However, solving for horizontal scrolling started to veer off course of our original goal which was to help users focus on the most important tasks.

Dashboard Notifications + Sidebar

With notifications that are contextual to the boards page, users will be able to see which boards have impending or upcoming tasks. The right-hand sidebar would provide further details about those notifications so that users would not have to dive into each board to find out more about them.

dashboard-notifs

Selected: Out of the three solutions, we felt like this was the most direct and intuitive approach in helping users reach their goal. The home dashboard is the most ideal location for users to get an overview of tasks across projects. In Trello's current interface, the dashboard provides no information about projects at all other than their titles. Having a notifications system in the main dashboard might support multi-project management and help users be more productive by giving them overview awareness of multiple projects.

User Flow

Onboarding

The first thing a Trello user would see would be a message from Trello, notifying them of the new feature:

onboarding
Dashboard Notifications

The updated dashboard would display alerts contextual to boards that have upcoming tasks. On hover, each Trello board will reveal more  information about that project: the number of cards completed, a bar graph indicating the users progress, and the number of cards due soon.

notifs
Sidebar

Clicking the light blue alert launches the sidebar on the right hand side which provides various streams of information coming from that project. The sidebar continually updates with three helpful feeds:

1) Due Soon 2) Coming Up and 3) Recent Activity

sidebar

The sidebar is interactive, giving the user the option to view card details, or navigate into the project. Expanding a card in the sidebar, reveals that card’s checklist and recent activity. Clicking on a card's title…

sidebar-detail

…brings the user into the detailed card view inside the project:

card-detail

Interface

The sidebar provides various streams of helpful information at-glance: it alerts users to tasks that require immediate attention, tasks further down the line, as well as recent project activity.

interface

Takeaway

In this project, I learned that design research is vital to understanding a design context and the people in that context. We began by exploring and investigating the existing interface, documenting the on-boarding process, the primary purpose and features of the application, and important interaction patterns. User research enabled us to learn who the primary users of the interface were, and, most importantly, what their goals were. Finally, we examined which of these goals were served by the application were are designing for and which were not. This research process was crucial in making decisions that served the application's users goals within the constraints of the existing application.

I also learned the importance of designing visual cues and micro-interactions into the interface, so that users aren’t left to wander the interface wondering how to interact with it. One thing I wish I could have done better would be doing more exploration: there were various other subtle directions this design could have taken, but that I didn’t prototype due to time constraints. I also wanted to update Trello’s visual language for icons, prompts, progress indicators, status updates etc. However, I decided against it since staying with visual patterns that were familiar to users would be less jarring and more conducive to the learnability of the interface.



Next Project