Seamless Connection with friends | Tango

UI/UX project

The Problem
Many social networking apps have the ability to chat with contacts in your phone without adding them again in the app. Tango as one of the earliest messenger app to provide free video and audio calls for it’s users is able to to that too. It’s the new people that you met and want to keep in touch with which make it a bit more tricky. The current Tango version successfully utilized IOS and Android’s default bottom sheet to perform invitation and find exact people to add, and we see potential to improve this process to enhance user experience, making it easier for users.

My Role
As a member of Product and Design team, I work closely with a bunch of creative talents, product managers, user researcher, and developers through highly matured UX design process to make sure everything is well thought-through, and pixel perfect.

Strategy
The core page in “Add Friends” work flow is the page for invitation/add functions. We want to make sure that the page will be organized with a structure of hierarchy providing users all the options without overwhelming them. 
1. Search bar: add people with already known information such as email, phone number, and name.
2. Invite to join Tango: send invitation to known friends on other social media applications.
3. Add Tango member near me: using location service to quickly add multiple users next to me who are already on Tango.
4. Scan contact list: Quick add one or more Tango user next to me with camera scanner. 
5. Suggestions: list of people you might know by mutual friends.

Mind Map
This is what I always do at the beginning of any design process. Mind map helps me to understand the whole flow from a bigger perspective, just like an outline for writing an essay. During this step, I built a structure to list all the possible content in each page, and connect each page by their relationships.

To be defined in the design wireframe:
- Exact CTAs and UX for suggested carousel style.
- List view for “see all” Suggested (people you may know)
- Invite to join tango icon- Radar icon- QR code icon 
- Is there other invite methods than sms and email?

Wire-frames:
Since Suggestions is the only feature to add new people that users do not know before, we came up with the idea of using carousel style to include avatar picture, name, and number of mutual friends.

Icons
A mature design system acts the core foundation for smooth and organized design flow. We built a Components library where both design team and developers can easily grab and integrate it’s unified contents to the ongoing Tango application.
Icons as one of the key category has its own guideline depends on their relationship with other elements within the same page. In this case, I started with brainstorming ideas to get a feel of the best way to show users those three options they can take advantage of.

Invite to join Tango
Use SMS, Email, Facebook, WhatsApp…

Tango Radar
Pair with others inside Tango Radar 
Add multiple friends around you

Scan Tango code
One quick scan to connect with friend
Add friend with a quick scan

The name and it’s function line explain and train users to utilize each feature depends on the situation. Eventually, users will no longer to read through those words while adding new friends once they used those features a couple times. Icons will be the fastest and easiest way for users to locate each feature and tap on them.

High Fidelity Mock-ups
I built and expanded a bunch variations samples to compare and test with on top of the wire-frame. A slight change of any detail will create an new combination which will send out different information and lead users to trigger a different interaction.

Color and size acts the big roles in this situation. Since we already established design guideline for primary and secondary buttons, the hard part is to determine with section we want users go focus on, the Suggestions section or the Make Connections section? 
A/B test and design evaluation kick in at this time to help us identify the hierarchy and the reasons behind it. Since we know that most of the time users will come to Add Friends page with a purpose: they have someone in mind to add. So the Search bar, Invitation, Radar, and Tango code will be used regardless, therefore we gave Suggestions a primary color to bring it in front of users to keep all the features in this page balanced.

Results
We are constantly pushing updates to both Android and IOS platforms. In this case, after we are set with new UI for Android, we applied the same look and feel to IOS platform following it’s guidelines. With minor differences between those two platforms, we successfully maintained the same design and user flow for our users on both sides.

Android platform:

IOS platform:

Seamless connection with friends | Tango

Many social networking apps have the ability to chat with contacts in your phone without adding them again in the app. Tango as one of the earliest messenger app to provide free video and audio calls for it’s users is able to to that too. It’s the new people that you met and want to keep in touch with which make it a bit more tricky.
The current Tango version successfully utilized IOS and Android’s default bottom sheet to perform invitation and find exact people to add, and we see potential to improve this process to enhance user experience, making it easier for users.
As a member of Product and Design team, I work closely with a bunch of creative talents, product managers, user researcher, and developers through highly matured UX design process to make sure everything is well thought-through, and pixel perfect.

Project details

Work:   Tango Me
Category: Product Design
Date:     February 2016
Web:     www.tango.me