Cover.png

Facebook Messenger Thread

Exploration of Facebook Messenger Thread

Parallel Conversation Experience

 

 

 

My Role

UI / UX Designer

User Researcher

Practices

iOS UI Design, Conversation Interface

Tools

Sketch, InVision, Adobe Suite

Project Time

Dec 2017 

 

 

 

 

 

Prelude: Why so many groups?
Comic.png

 

 

Project Overview

 

Design Initiative

We all used group chats on Facebook Messenger. Every time a new event coming up, we create a new group chat for that. When a new movie gets released, we drag people into a new group chat for discussion. More often, we ended up with so many group chats that contain almost the same group of people, and switching between group chats becomes very hard.

On the other side, if we don't create new groups and always stay in one group chat, the conversation in the timeline becomes confusing. People ended up talking to each other about completely different topics, and no one was sure of whom they are chatting to.

We are then left with the following problem scenarios:

 

 

Problem.png

 

 

 

 

 

Design Process

The project follows a double diamond structure. The overall flow of the project and a few highlights of each stage can be seen below.

 

 

Double Diamond.png
 

  

Understand the People Problem

 

Field Research - What makes user frustrated?

We conducted contextual interviews with the users, we want to know what is the context of the issue with groups, what are their feelings about the issue, more importantly, what is the pain point of having effective communication in group chat? 

A typical user problem could be described as follows:

Scenario.png

 

 

Finding the Root of Problem

While on top of the symptom, the user is not happy, we need to dig in and uncover the real cause.

By tearing down the problem from the surface into the root, the user problem that people actually have is the incapability of performing conversation with multiple topics at the same time.

 

 

Journey Map.png

 

 

 

Persona

To better describe the user we have in our case of study, we come up with a persona to give a detailed portrait of a typical user in the scenario. 

samantha.png

 

User Journey Map

To better understand the interaction flow, we mapped out users' behaviors and their mental states when trying to have parallel conversations with others in a group chat.

While we walked through the user journey, we identified where the user gets stuck at. Essentially there are three moments when the user gets a lot of frustration due to overwhelming cognitive load.

 

 

 

 

 

Define Solution Space

 

From HMW to Opportunity Areas

There are essentially multiple ways to tackle multi-topics conversation problem. However, not each solution would deliver as much experience enhancements as the other, at the same time the effort required for each solution track would also be different.

With the help of "Impact-Effort" chart, we narrow down our opportunity area to be just "in-group parallel conversation". We choose this as the space for solution exploration due to its high impact (enhancement) and moderate effort that would require to be spent into.

HMW.png

 

 

 

 

 

Ideation - the "Thread" Concept

We came up with the idea of "Thread", where the user is able to have parallel sub-groups of conversations within a group chat. 

The idea is very simple, without having the user to leave the current group chat context, it allows people to create sub-conversation with people who are interested in a group chat. This transforms the chatting environment from a linear to a multi-channel style.

Thread.png

 

 

 

 

 

 

Pattern Validation 

 

Proof of Concept - Guerrilla Testing

Before we dive into massive design assignments, we would like to do a proof-of-concept test to see if we are actually heading in the right direction. We conducted a Guerrilla testing to see if our solution makes sense to the people on a high level.

Content & Views.png

 

 

 

Design Exploration

 

Design Principles

We would like to bring a novel chatting experience to the user. However, at the same time, we want to make the new feature looks like something the user already knows to use. With that in mind, we further defined our three design principle.

principle.png

 

 

Low-Mid Fidelity Prototype

Base on the principle, we developed a set of potential design patterns. 

full resolution

 

 

Exploration.png

 

 

 

 

High Fidelity Prototype

We built a high fidelity prototype with full animated interaction implemented.

full resolution

 

 

02.png
 

 

 

Evaluation & Future Work

 

User Testing with InVision

During the design iteration, we converted our mock-ups into a fully interactive InVision prototype for usability testing. 

 

User Feedbacks

From the usability testing, the participants actually love the new feature we have for them.

user feedback 1.png
  • They think it's especially useful for temporary events. (e.g. birthday party, temporary dinner events). 

  • The overhead is acceptable.

 

What's Next?

  • Testing multiple versions of design explorations

In the design exploration phase, there are actually a few more designs that look equally promising. However, due to the limitation of time, we could not test all the designs. If given more time, we hope to conduct A/B testing to compare which one of them gives a better user experience.

  • What is the best way to sort threads?

There are many assumptions being made when it comes to making a design decision. A prominent one is on the sorting of the threads. They are currently sorted by creation time. We are not sure if we need to make it sorted by the last message received. This feature needs to be tested with actual users.