Trello Chat

Trello Chat

CASE STUDY


Overview

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

Brief

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

The client

Opportunity

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

Research

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

The client

Tools

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

DISCOVERY & RESEARCH

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

Survey


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

Personas


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

Hypotheses


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.

Definition

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.

Sketches

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

Development

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

Iterations


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.

Delivery

Prototype

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

Recommendations


  • 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