Trello Chat

Trello Chat



The client

The client

Trusted by millions of people from all over the world, Trello is the easy, free, flexible, and visual way to manage projects and organize anything.

The client


Increase user engagement by creating a better chat feature for individuals collaborating with Trello.

The client


Trello provides a place to contribute and organize projects in a digital workspace. Users can create boards and contribute resources, but the conversation surrounding these boards is often lost. Trello wants to increase user engagement by creating a better chat feature for individuals collaborating with Trello.

The client

Key Business metrics

Increase in sign up once chat feature is created.
Number of projects where users enable chat.
How many people in total use the chat feature

The client


Competitive analysis, Surveys & Interviews, Empathy maps, Personas, Design Studio, Task analysis, Task affinity, Sitemaps, User Journeys, User Flows, Sketches, Wireframes, Mockups, Presentation.

The client


Sharpies, post-it, Omnigraffle, Sketch, Marvel app, InVision, Illustrator, Photoshop, Keynote.


Currently on Trello, users can create and share tasks but can’t have real time conversations between members of a team, so they are forced to use third applications for that (not through the site).

UX Research

Competitive analysis

We started by making a competitive analysis of direct and indirect competitors of Trello, This helped us to see what other companies were offering and see how could we gain competitive advantage.

UX Competitive Analysis


We prepared a list of questions, sent out online surveys and talked to users face to face by conducting an user research.

We learned a few things in our survey:

  • 89% of people stated immediacy as the most important aspect of project communication.
  • 64% of people found that misinterpreting information was the most negative aspect of project communication.
  • 77% of people stated that group chats were the best feature of chat applications.

UX Survey


Once we had a really good insight and understanding of the Trello user we then created prototypes to reflect the findings of behaviours of 3 typical type of Trello users.

We looked into their behaviours, what their day to day lives would look like, what they would want and expect from this platform and how we can enhance their Trello experience with our new chat feature.

Through looking at our user research findings we felt it would be most relevant to take forward our persona Jackie due to the majority of Trello users reflecting the behaviours of this persona displayed.

Persona Jackie
Persona Sarah
Persona Steven

Tasks Flows

We then continued creating task flows for some of the current tasks, trying to understand how individuals and teams interact and use the current website.

Affinity Mapping

Once we had collated our survey and interview results we created an affinity map to help us decide what to focus on. Each point was written out on post-it notes and stuck to the wall. Affinity mapWe then grouped the notes together by concept or idea. Once we’d done this we discussed that we had done and why. Once we were happy with these groupings we came up with titles for each group which gave us our themes. This fed into the personas. It also helped us to see what our features would be.

Task affinity

User Journeys

We also created a user journey map for the process of discussing tasks in Trello which showed the journey through getting organised, checking progress, updating team and following up. This journey map shows the lack in the step of updating team that could be fixed with our new chat feature.

Trello User Journey


We created two hipotheses:

  1. In creating a chat feature which is easy to understand; by adopting common chat characteristics, the learning curve for the user will be reduced therefore increasing integration and creating higher levels of satisfaction in using the website.
  2. By creating a chat feature which is familiar; using recognisable colours and layouts; a level of trust can be created which will make the user more inclined to adopt the new feature therefore creating a better overall experience.


Design studio / Idea Creations

Now that we knew what features and requirements Jackie wanted from the new feature we started Design Studios to generate different design solutions to how this chat feature could work for Jackie, these were developed and tested through a paper prototype.

As a team we setted the tasks then keeping time while the group sketched initial ideas. We started with 5 minutes to draw as many ideas as we could come up with in that time. Each person then had 2 minutes to show their ideas and for the group to ask questions.

Idea creation

Initial sketches & Paper prototype

In the design studio sessions we started to generate ideas and create our first paper prototypes.


User Testing

We had the opportunity to validate our ideas with real users. Having some valuables feedbacks, we learnt what was working well and which areas needed improvements.

User Testing

Feature prioritization

We used the method MoSCoW to prioritise features in our design. To do this each feature and user’s feedback was listed on a post-it note, for instance ‘users can post questions’, and stuck to the wall. We then grouped them under the tags ‘Must’, ‘Should’, ‘Could’, and ‘Won’t Have’.


Low Fidelity Wireframes

After check that our flows worked and looking at the feedback from users we created low-fidelity wireframes in Omnigraffle, knowing that we could continue our research uploading them into Marvel App to create clickable prototypes.

We already knew that our flows worked so we could concentrate on making sure the user understood what was happening on each page.

At this point we also started to look at the design of the pages which would allow update teams and discuss about tasks without overwhelming users.

User Testing


After a few iteration rounds, we learned a few things in our first low-prototype:

  • We had an overwhelming number of access points caused by the chat button in each task.
  • No need to define each media option (video, call and chat) in separate windows.
  • Confusing visual hierarchy.

Having fixed these first issues, we created a second prototype in which we learned the following:

  • Highlighting cards was not useful, because we still needed a second chat window to edit that card.
  • The archive system was unclear, users expect conversations being saved automatically.
  • People labellling misleading, show user pics was much more intuitive and learnable.



So following our user’s journey:

  • We implemented a welcome dashboard
  • Integrated the contextual search +filter options (tool-tip)
  • We added different calendar views ( Month, Week 3 Day View)
  • Following awards quickly + access information (profile + website links)

Latest prototype version here


  • Real-time chat that is not overwhelming
  • A way of referencing specific objects within Trello
  • Including & excluding people from chats
  • Read receipts
  • A way of perceiving people’s emotions
  • Audio & video
  • Setting the tone & formality
  • Interface customisation

Future / Next Steps

  • A way of perceiving people’s emotions
  • Setting the tone & formality
  • Creating audit trails
  • Multiple platform access with push notifications
  • Team: S. Castillo, D. Kleimberg, I. Jacquot.
  • Client: Trello
  • Date: October 2015
  • Service: User Experience Design