Hanna Xu

Tango

Communication was the heart of Tango. Tango was a social messaging app centered around ways people connect with others through text messaging, video/voice calls, and sharing content. Some users used Tango to contact loved ones; others used it to meet new people. The focus of Tango was enabling communication.

At Tango, we had quarterly focus areas with a product manager lead and a design lead. I was the design lead for Core Communications. Core Comms centered around tools that helped users communicate: calling, messaging, and video. Before Core Comms, I was the design lead for Chat Evolution (improving the chat experience) and design lead for Cleanup. Before we had focus areas, I worked on numerous Tango features from shopping to stickers to music.

Company

Tango

My Deliverables

Android & iOS Product Design, App Icon Design

Tools

Sketch, Zeplin, Photoshop, Omnigraffle, Illustrator, InDesign, Paper & Sharpie

Year

2014—2015

Team

Hanna: Design Lead for Core Communications, Chat Evolution, & Cleanup
Chris: Product Lead for Core Comms
Emily: Product Lead for Chat
Will: Core Comms Designer
Yufei: Core Comms Designer
Michelle: Chat Designer
Joey: Interaction Designer

And of course Tango Dev, QA,
all of the Product & Design Team

Top messaging application

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 devices. When I joined Tango, it already had 200 million registered users.

Screenshot of Apple’s “Start a Quick Conversation” list featuring Tango

Before I joined, Tango started to move into the social networking sphere: launching newsfeed, discover, and adding more features into chat. At that time, Tango was still very much engineering driven. With a continuous stream of new features, the application became a Frankenstein mishmash. On iOS much of the app was still in iOS6: skeuomorphic and inelegant. Android was still pre-Material. It became bloated and confusing.

Core designs

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.

Photo of Emily, Me, and Michelle working on messaging application competitive analysis

Messaging application competitive analysis with Emily (Product Lead), Me, and Michelle

Two other big focus areas I led was Chat Evolutions with Emily and Core Communications with Chris. As design lead, I worked with the product lead in order to research and prioritize projects. When projects were finalized, I assigned them to different designers on my team. I facilitated informal sync ups & formal critiques to support designers on my team and ensure they had what they needed to be successful. I also spent more time than I would have liked in meetings.

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 (shown below) had a lot of problems. 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.

Old chat drawer designs

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.

Photo of Michelle and Emily discussing the screenshots we've taken

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.

Design studio with Emily, Michelle, Lheyla, and Michelle W.

Design studio with Amy, Yufei, Will, Joey, and Chris

Yufei presenting her ideas to the group

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.

Tango chat drawer early wireframe explorations

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.

Tango chat drawer wireframe explorations

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.

Wireframe showing the drawer & swiping the drawer

I shortened the text box for when the keyboard was closed/when the user swiped down to read their messages. When the user had the keyboard closed, it gave the user the top three choices with a small peak at the others. There were two ways users could open the drawer. First, it opens if someone just swiped to the left

Wireframe showing the drawer & tapping a media item

Second, the user could tap a drawer item and the entire drawer would slide out

Wireframe showing pictures swiped up to display fully

Pictures, music etc. could be swiped up to a full display

If the user tapped Say something, the drawer would slide mostly off the screen enabling the user to focus on typing

Wireframe showing the sticker drawer open

Because stickers were used so frequently, tapping stickers does not slide the full drawer open allowing users to have better access to the text field

We tested the wireframes and the users responded well. They also understood how to interact with the drawer. With this success, I handed the project to Yufei to design, refine, and make the final UI.

Screenshot of final design of drawer closed

Final drawer, closed

Screenshot of final design of drawer swiped over

Final drawer, swiped

Screenshot of final design of drawer, writing a message

Final drawer, writing a message

Final drawer, opened

Tango used the chat drawer I designed for 5 or 6 years. Facebook also later launched a similar peak in/peak out drawer for a few years.

Core Comms Workshop

Later on, I became design lead for Core Communications. I had to decide what the priorties were for that quarter. I worked closely with Chris, the lead Core Comms PM, 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.

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.

Photo of Will presenting his ideas and feedback during Core Communications workshop

Core Communications workshop; Will presenting his ideas and feedback

Photo of a closeup of the workshop whiteboard

Core Communications workshop closeup

After our workshop, Chris and I met up and decided what projects we wanted to work on that quarter. We felt calling was a big feature that needed clean up and improvement especially for our private communicators. We also thought the chat list was a mess. Finally, we also decided to explore some new features for people to use within chats. Gaming was popular on our video chat and we wanted to try adding some simple games (Tic Tac Toe, Hangman etc) within that chat interface.

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.