Email gateway | Tango

UI/UX project

Talking with anyone at any time on any platform is one of Tango’s goals, and we do our best to make that happen. Most of our users have no problem reaching their friends or family relatives for conversations, yet occasionally they experience difficulty to communicate with people who hasn’t installed Tango, or just not ready to use the smart phone. While web chat client is in the plan, we decided to utilize email clients as an alternative way to bring people together.

The Goal
When a user creates new group chat and starting to select other users into that group. He can also include none Tango users by typing in their email address. All the conversation will be emailed to that person, and the recipient can join the group conversation simply by replying the email he received. 

The ProblemThe value of email is it’s served as a lengthy back and forth conversation with tolerance for delays, contrary to messenger app where users are performing ongoing conversation rapidly. It is tough for users on email client to share the same experience as users on messenger app, especially when the first message been emailed and read, a bunch more messages from other users were already added and passed on messenger app, creating a unsynchronized conversation across two platforms.

Onboarding experience:
The first email to recipient triggers when the new user was added to the group chat by existing user. This email contains welcome information presented as an invitation. Other crucial information including sender’s name, group name, members in the same group, and the most important section: CTA (call to action button) which explains to the recipient they can talk to all members in the same group chat just by replying the email.

2nd to X: 
Following up emails should contain the same structure, but focused on message content itself. Message types including text, image, video, and audio. I will talk about how we handle the UI design based on how different email clients handle HTML support.

Last email: 
Once a user installed Tango, server side will send the last email to that user as opt-out notification, letting the user know that they can continue the conversation by using Tango app for a richer experience. Of course, the user will have all the chat history available in the app.

User Interfaces
Different email clients have varying levels of functionality to present it’s content too. For example, while Gmail and Yahoo mail supports full HTML, which means embedded images and customizable text styles, Outlook only supports a certain level of HTML functionality, and there are some email clients only supports plain text which means all the codes and links will show up. We decided to design three versions of user interfaces to solve this problem for each level of HTML support by different clients for users to maintain the experience they are familiar with.

Rich HTML:
we try to make the overall UI as close to the app UI as possible following our design guideline, so users will have full access to all the information in a visual appealing way, as well as making user conformable when they switch to using Tango app to see the same interface they’ve been seeing since beginning.

Light HTML:
For email clients which only support embedded image and text customization, the primary objective is to format the UI in clean and simple way, where everything is organized and understandable for first time user. Video and images will be opened in a web browser once the user clicks on the image attached to the email.

Plain Text: 
Formatting is critical in the plain text view, where a lot of information would just be links. We utilized line spaces to separate each content sections to make everything clear to users.

Settings page: 
Since this page will be open in a web browser, we can just go ahead and design it as we wanted. We want to optimize the experience here, so users understand the results of each action they take. Everything is in a list view with checkboxes and big buttons, which also following our design guidelines throughout our app.

Solution

The core problem I brought up earlier was how do we make email recipients to have a similar experience as app users.
1. One email to recipient per message sent in chat:
    a. Resulting email inbox spammed with messages.
    b. Difficult for the recipient to read through and reply.
2. Group messages to one email:
    a. How many messages per email?
    b. How often do we send it out?
    c. It’s not an ongoing conversation between email users and app users.

After brainstorm and some research, I came up with a dynamic system to shift among different status based on how active the group is at the time to determine how we send the messages to email user.

Highly active group:
imaging a group is highly active at the moment, it has over 30 messages per minute, we can just group all those messages as one email and send it to email user every 30 seconds or 1 minute. Email user can reply and join the conversation in real time.
Active group: if the conversation is starting to slow down to around five messages per minute, we can group messages from the same user, and only send out an email when next user starts to send out a message, or trigger after 30 seconds of inactivity.
Moderate group: if the conversation slows down to 1 message every couple minutes or hours, we will just send that message to email user after 1 minute of inactivity.
For the In-active group, we can send out reminder email weekly to notify users in the group.
All those triggers will shift depends on how active the group based on the messages in the group per minute calculated by server’s record. Therefore, we can deliver messages accordingly, and users won’t feel left out.

Next step
Email Gateway has its limits compare to the level of user experience we want to deliver to our users. Currently, this project is acting as a transitioning platform before we finish building the web client for Tango app. We are glad that we provided an alternative way for users to interact with each other.

Email Gateway | Concept

Talking with anyone at any time on any platform is one of Tango’s goals, and we do our best to make that happen. Most of our users have no problem reaching their friends or family relatives for conversations, yet occasionally they experience difficulty to communicate with people who hasn’t installed Tango, or just not ready to use the smart phone. While web chat client is in the plan, we decided to utilize email clients as an alternative way to bring people together.

Project details

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