Tango

BACKGROUND

Tango was one of the top ten messaging applications in the world and a tech unicorn. It was the first video calling application on mobile devices and it allowed users to text for free between Android and iOS. Tango was one of the top downloaded applications. When I joined Tango, it already had 200 million registered users.

My Role

When I joined, I helped the design team tackle the problem by improving the user experience and streamlining the application. I advocated a product focused on user's needs & wants and not focused on specific features/tech.

One big focus area I led was Cleanup. I helped identify problems, bugs, and inconsistencies in the application. Then worked with the right team or designer to help fix the problem. To fix future inconsistent designs, I led a weekly Designin’ & Alignin’ meeting that helped the entire design team stay consistent and aware of all the design projects.

Chat Drawer Evolution

When Tango moved from exclusively video calling to messaging, Tango added emojis, stickers, pictures, videos, location sharing, music, and voice calls. Tango needed a way to present these options to the user.

Old chat drawer designs are shown below. One hid everything away making it hard for users to use any of the media. The second displayed everything at once. This caused option paralysis and made the UI busy. My goal was to make the interface easier and more understandable.

To start, Emily, Michelle and I conducted a competitive analysis of all the different messaging apps available. In total, we played around with 45 different applications. We started sending each other messages, tried all the chat add ons, and took screenshots of our experiences.

Afterward, we printed the screenshots and armed with red & green stickers discussed what we liked and what we disliked.

Most of the applications, we discovered, kept their media hidden in a plus drawer similar to our old chat drawer design shown earlier. The plus drawer tended to open in place of the keyboard, above the keyboard, in bottom sheets or dialogs. The ones we were drawn to were less disruptive and presented the user with the most common action immediately after tapping the plus drawer (instead of forcing them to choose). Facebook and Frankly were the only majorly different applications. They presented their media like the second old design.

After the initial research, I decided a good way to explore new ideas was to host a design studio. We contacted other designers and product managers not associated with the Chat Evolution project and invited them to present their ideas. One studio we left up the design references and discussed them briefly, in another everyone came in with a relatively blank slate.

After the design studio, I took some of the common and more interesting ideas and mocked them up as wireframes. One of the biggest decisions here was to combine gallery, camera, and video messages into one screen.

Working through these wireframes, the designs had still felt a little too safe. For the next step, I decided to go a little crazy and explore some wilder ideas. I wasn’t as concerned if they made sense or would work. Instead, I wanted to try putting my thoughts on paper. Some of these designs focused on reachability. Others were based off of what we had liked in our research (presenting the user with the most common action with less clicks). Below, I show a few selected exploration concepts.

At Tango, we analyzed what users were frequently sending. Text was the most common thing sent. By a large margin, stickers & Tango emojis were the most frequently sent media item. This was followed by pictures. Everything else was a bit more long tailed.

With this in mind, the last four wireframes were most successful at highlighting what users may want. Text was the most important and open by default. It also took the most real estate when opened. Stickers and pictures were also displayed prominently. Everything else was slightly obscured and required a swipe or tap to reach.

I decided to explore the second set of wireframes further. The chat drawer was on the same row as the text box. This saved real estate for the most important part of everyone’s chats: their messages.

Core Comms Workshop

When I became design lead for Core Communications, Chris and I worked closely together to decide on a plan for our next projects.

The first thing we decided to do was to host a design workshop with the rest of the Core Comms team: Dana, Amy, Emily, Will, and Yufei to kickoff the focus area.

We started the workshop by having everyone write the biggest problems they noticed with Core Communications. Listing out the problems helped align the team: everyone had a chance to bring up issues they wanted tackled and cool new projects they wanted to build. After listing it out, everyone presented.

Private Communicators

Social Discoverers

At Core Communications we encountered both users. They both used messaging and the messaging features frequently. Private communicators were more likely to call/video chat. They also tended to have fewer contacts. Discovery users tended to have many contacts. They also presented themselves in different ways. Private communicators freely shared private photos and information while Discovery users were more shy.

Core communications did not encompass how discovery users located each other on Tango (Rebecca led Discover) but we did have to provide experiences that fit both the users needs. We ended our worksop with user stories focused on both the Chloes and the Ninas on Tango.

Here’s a select set of the user stories:

Calling

One of Core Communication focuses was improving the calling experience. I started the project by writing user stories and creating flows. Here’s a selection of them.

One problem Tango had was users could not start a call as an audio call. It started as a video call and then users had to turn off the camera. This was a problem for many users who did not want to share their screen yet. They could have just woken up, their surroundings might be a mess, or they might be in a location where a video call (with speaker phone) was bad form.

There were also a lot of entry points Tango already had to initiate a call. We had to make sure every flow worked. We also wanted to make video calling an interesting entry point. We discussed having a “live preview” within the chat history.

Another thing we noticed our users had trouble with were asynchronous calls. A lot of our private communicators would send “are you there?” and a lot of back and forth scheduling the call. We already knew (from the chat drawer project) that users frequently sent each other voice messages. We wanted an easy way to have async communication. Instead of just ending a failed call, we wanted the user to have the option to leave a voice or video message similar to real phone calls. This “voice/video message” helped me think up a new idea video cast.

Chat List

Chat list was another interesting challenge. When we started to tackle the project we knew that there were multiple semi related lists scattered around Tango. There was your recents list which showed your previous chats. There was your friends list which can be found by clicking search or “my friends” tab. There was the invite list who were your contacts in your address book who did not use Tango. Finally, there was a “people you may know” list that lived in “find friends.” The lists lived in different places and were disconnected. On Android, for example, you had the chat tab and then a friends tab.

Our Goal was to provide one list that covered all the needs: Tango to Tango (voice or video), tango out (wifi voice calls), send a message (chat or SMS), invite, and add new friend. Further, we wanted to help our users be able to sort and parse the list: who's a recent contact, who's a tango contact etc. We wanted to make everything happen in one place yet still simplify it and make it easy to understand.

Since the chat list had multiple lists and entry points I felt that there was a profound difference between first time users and 50th time users. I split my user stories between 1st, 5th, and 50th time users.

Some examples include:

1st time user story
I want to chat with the person who invited me/told me to try Tango (note: this could be 1-1 or a group session, it depends on why I was invited).

5th time user story
I want to continue talking to the people I already know.
I want to start conversations with other people on Tango.
I want to talk to a group of my friends.

50th time user story
I want to quickly talk to people on my contacts, some I talked to recently, some not so much.
I want to find an old conversation.
I want to invite people to talk with me on Tango.
I want to delete message threads that are not relevant to me.

Using my user stories I sketched the optimal screen of exactly what a user may want to see in each of the user stories. They may not relate to each other, but it helped me visualize the perfect screen for each scenario.

Then, I wireframed some of the most interesting screens in the context of Tango. These screens may not look exactly like each other, instead they presented a more optimal solution for each of the user stories.

Then I refined it even further and tried to condense the screens. I also gave users names and tried to really understand what a user may be going through.

Designin’ & Alignin’

Finally, as design lead for Cleanup, I worked with Martin and Jamie in order to figure out small bugs and features that have been requested by users and engineers. When we began the project, we looked through everything and ranked them on a priority matrix. We ranked them based on impact and effort. Then we started tackling some of the quick wins. Major projects were either done by me or was submitted to the correct team to prioritize within their own projects. And we fixed some small effortless projects just to clean up the app. We didn’t want the app to fail from a thousand papercuts.

While working on cleanup I discovered a need for the designers to align with each other more. We had large critique sessions with PMs, stakeholders, and all the designers however these sessions were more high level. We had intimate design sessions with a small portion of the designers but this meant many people were unaware of some of the design decisions that were happening. At its peak, Tango employed around 16 designers all working on different projects. We needed a meeting to help us align with each other and to stay consistent.

I started leading a weekly Designin’ & Alignin’ meeting. Designers were asked to submit new designs or features they were working on and present it to the group. Designers were encouraged to present screens they were struggling with. New colours, assets, and components were introduced in the session and designers were then given access to work into their own designs.

Conclusion & Takeaways

Biggest thing I learned was sometimes you don’t get to work on exactly what you may want. This is especially true as team lead.

While discussing Core Comms projects with the team, Will had asked to be put on the chat list project. Will was a talented designer and more experienced than I was. I was also busy with Core Comms administrative tasks, making sure everything was going the right direction, and boatloads of meetings. It was the right call to give the project to him and I did. However, I was disappointed since I had spent weeks refining user stories and wireframes.

Another project that I really wanted to see to the end was the chat drawer project. However, this project was a perfect fit for Yufei. She was still a newer product designer and needed a few projects under her belt. I had already finished most of the UX and needed someone to figure out what each media drawer needed to look like. She did an amazing job and I was delighted in the results.

As team lead, I wasn’t as free to work on fun, big, impactful projects from the beginning to the end like I was use to. Instead, I had to learn to delegate. This later helped me at Gfycat. At Gfycat, I managed two other designers and had to figure which projects everyone needed to work on.