Tango Core Messaging Redesign

Core Messaging Redesign

Brief

This project is a redesign of the Core Messaging Experience for Tango. In the previous version, there were multiple entry points to find and connect with users. For example; there were separate lists for searching non-connected Tango users, creating a new message and viewing contacts. This made it unclear, especially to new users, how they would find a Tango member they were not connected with. This previous design relied heavily on a sidebar and was constantly taking users out of the Core Messaging experience to perform basic tasks like; connect/disconnecting with a contact or searching for other Tango members. We wanted to address this issue directly in our redesign by keeping the user in Core Messaging, enabling them to freely navigate and manage their contacts and communication

I also used this as an opportunity to closer align the visuals to Tango's core brand values (Bold, Playful, Welcoming, Alive and Captivating). Below you can see what the product looked like prior to this project. As most of our users are Android users, we decided to use this as a baseline for our wireframes. All user testing was done with Android users, on a working prototype.


Role

Collaborated with a Product Manager to write the User Stories. I provided the Wireframes and Visual Design.


Previous Designs

In the previous version of the Core Messaging experience, there were multiple entry points for searching, creating a new message and viewing the users contact list. For a user to find a Tango member they are not connected with, they would have had to go into the sidebar menu to perform this search. This posed as a disconnect when trying to connect previoulsy unconnected users inside the Core Messaging experience. There was also an issue of allowing users to view their Tango Contacts, this was another action in which they would have had to go into the sidebar menu to perform, taking them out of the context of Core Messaging. For the new design, we wanted to streamline all of these processes for the user into one space, keeping them in the context of Core Messaging.


Goals
  • Provide an integrated experience, a one-stop-shop where all core communications take place
  • Unified experience across different communication types (chat, call, etc)
  • Simplify the experience, reduce users cognitive load to manage multiple contact lists
  • Preserve all essential functions while incorporating new functionality that doesn’t disrupt the experience Tango users are familiar with

Personas 

Private Communicators
This group of users tend to keep to their already established circle of friends. They are not looking to make new connections and only use Tango to communicate with family and friends.

Latosha is a 24 year old student who is away at college across the country. She likes to spend her precious few minutes between classes and homework talking to her family and friends back home. When she's busy during the day, she sends messages to her contacts, and when she is free after school, she likes to have video calls with her parents. 

Social Discoverers
This group of users like to meet new people and chat with them. While using Tango, they are trying to find new people to make connections with and seldomly use Tango to communicate to with family and friends.

Jose is 25 years old and works as a security guard. During the downtime at his job, he likes to use Tango to try and find new people to chat with. He likes to chat with the new connections he's made throughout the day and seldom makes video or audio calls.


User Stories 

1st time 

Private Communicators

As a user, I want to communicate with people I know, most likely who introduced me to Tango.

  • I want Tango to show me the person who introduced me to Tango, also a list of people I know on Tango so I can start a conversation (chat or call) with them.
  • If the above doesn't work, meaning Tango couldn't find the right person, I want to do the finding myself. 

Social Discoverers 

As a user, I want to know how to find interesting people on Tango, most likely not my real-life friends. I may want to converse with them on my 1st use.

5th time

Private Communicators

As a user I want to communicate with my friends and family right now.

  • As a newish user, I want to jump back into conversations (chat or call) that I have established with my friends and family.
  • As a newish user, I want to start new conversations (chat or call) with my friends and family.

Social Discoverers 

As a user,  I want to explore who else I can communicate with through Tango.

  • I want to explore who else I can contact and then decide if I will contact them now or later. I might not contact anyone right now, but I want to see my options. 
50th time
Private Communicators

As a user, I want to continue communicating to people who I’ve been talking to on Tango.

  • I want to jump back into conversations I have established with my friends and family.
  • I want to start new conversations (chat or call) with my friends and family.

As a user, I want to find/add/invite more friends to talk to.

  • I want to explore who else I can contact and then decide if I will contact them now or later. I might not contact anyone right now, but I want to see my options. 
Social Discoverers 

As an established user, I want to discover new people (to communicate with) who aren’t friends or family.

As an established user, I want to continue communicating to people who've I've been talking to on Tango.


Wireframes - 1st Time Use

The screen on the left, you'll see I have provided a floating action button in the bottom corner for the user to create a new conversation. As the user scrolls, this floating button disappears offscreen. The center screen shows the list further down, where I have provided the user a horizontal list of recommended contacts the user could start conversations with. Past this module, I've placed a large call to action to "Start a Chat", which mirrors the same action as the floating action button from the first screen. The screen on the right shows what happens when the user presses either, the floating action button, the search button in the action bar or the call to action at the bottom of the list. This view is a combination of all the lists Tango previously had. In this view we have, a search field, a list containing all Tango contacts and all address book contacts (non-Tango contacts), and a call to action to start a new group chat. The rationale behind this is that the user has shown intent on wanting to continue a conversation but has gotten to the end of recent conversations, seen no one they want to chat with, so they have a means of starting a new conversation, either with a new connection or someone in their contact list they have not previously started a conversation with.

For the 1st time use, the user sees a prepopulated list of contacts that have been matched from their Address Book to Tango's user database, as well as recommended users that are matched by mutual connections and location.

Wireframes - 5th Time Use

By the 5th time use, the user has taken part in a few conversations and has started a group chat.

Wireframes - 50th Time Use

By the 50th time use, the user is taking part in more than one group conversation and made connections with previously unconnected Tango users.


Visual Design 

The goal of the visual design was to apply more of Tango's brand values (Bold, Playful, Welcoming, Alive and Captivating). I chose to lighten up the typography and apply some more spacing to elements to to bring these layouts closer to the brand values.

Visual Design - 1st Time Use

Visual Design - 5th Time Use

Visual Design - 50th Time Use

User Testing Round 1

Tango conducted a round of in-house user testing. We tasked users with starting a new message with a contact not visable in their recents list. 

New message to existing contact
Here, the user is given the task of sending a new message to their friend Martha Amilton. They begin by tapping the "New Conversation" call to action, which then takes them to their contact search and list screen. From here the user scrolls to find Martha Amilton, taps on her name and is dropped into the Chat experience.

New message to a Tango user you are not connected with

Here, the user is given the task of sending a message to a Tango user named Tiffany Powers. They begin by tapping the "Search" entry point, which then takes them to their contact search and list screen. Then the user taps the search field to put it in focus. From here the user types in the name "Tiffany Powers". They see the user in the list, they tap on the name "Tiffany Powers" and are taken into the Chat experience.


User Testing Round 1 Conclusion

A majority of the users failed to see the floating action button at the bottom corner of the screen. This was surprising, as this is one of Google's new design patterns that is seen quite frequently in the mobile ecosystem. I then altered the design to bring the 'new message' action into a more visable spot for our users. A few participants mentioned wanting an easier way to start a group chat. We took this as an opportunity to test a group chat call to action on the recent chats screen. You will see this reflected in the next set of wireframes and screens.


Updated Wireframes - 1st Time Use

In this iteration, I've added two call to actions at the top of the list for starting a new single or group chat. I felt this was the first place a user looks when coming into this screen and the two actions would address their needs upon entering, if their needs were not met, they have their current chats they can go in to. I've maintained the recommended chats carousel and left the call to action to start a new conversation.

Updated Wireframes - 5th Time Use

Updated Wireframes - 50th Time Use


Updated Visual Design - 1st Time Use

The two entry points at the top of the list were visually designed to give more weight to the "New Conversation" area, since data tells us that this is primarily what users will gravitate to when creating a new message. The call to actions were changed to Tango's green color to closer align with the brand values and color pallette we currently are developing.

Updated Visual Design - 5th Time Use

Updated Visual Design - 50th Time Use


User Testing Round 2 - User Flows

New message to existing contact

The task for this was the same as the previous user testing, in which the user was tasked with sending a message to their friend "Martha Amilton".

New message to a Tango user you are not connected with

The task for this was the same as the previous user testing, in which the user was tasked with sending a message to a Tango user named "Tiffany Powers".


User Testing Round 2 - Conclusion

We then had another round of users come in to test this new design. A majority of the participants found the action on screen and completed the task successfully. We decided to move forward with this new design. 


Conclusion

It was felt that the above design fullfilled the Goals of the project. Below, you will find a working prototype of the final product.


Final Designs - 50th Time Use

Previous Visual Design - 50th Time Use (taken from current Android build)

For comparison, you can see the previous implementations.


Prototype

Both user testing flows are represented in this prototype.