Trello chat case study

Najux
6 min readOct 6, 2015

--

Trello is a collaboration tool that organizes your projects into boards. In one glance, Trello tells you what’s being worked on, who’s working on what, and where something is in a process.

Problem/Opportunity

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

Aspects to consider:

· What sort of features do users expect with a chat application

· How to ensure quality conversation and engagement surrounding resources and boards

· Keep different users in mind: more active users, more observant users, etc.

· Should direct messages play a role?

Features:

· Users should be able to engage in conversation on Trello in the form of chat

· Ideally, users should be able to easily start new chats on specific topics/resources, without overwhelming users.

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

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.

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.

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.

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

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.

Hipotheses

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.

DEFINE

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.

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.

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

DEVELOP

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.

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.

High fidelity mockups

After a few iterations and testings we created high fidelity mock ups in Illustrator. We also incorporated our findings from the low-fidelity wireframes testing, bringing our design closer to a final solution.

Our last solution consists to use the existing referencing system of Trello to share tasks/cards in the chat only having to type the name of that task preceded by a hashtag (#), so another member of the project would simply click on the link generated to go directly to the task/card in question, being able to visualize and edit it.

DELIVER

Latest prototype version: http://marvelapp.com/30di236

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

--

--