X – Hanna Xu logo Large x logo Twitter account – @hannaxu Twitter logo linked to the twitter account @hannaxu LinkedIn account – hannaxu LinkedIn logo linked to the LinkedIn account for Hanna Xu hello@hannaxu.com Email icon linked to hello@hannaxu.com


Communication is the heart of Tango. Tango is a social messaging app centered around ways people connect with others through text messaging, video/voice calls, and sharing content. Some users use Tango to contact loved ones; others use 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.

Music Pix by Tango



My Deliverables

Android & iOS Product Design, App Icon Design


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




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


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.

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

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.

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.

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.

Because I tended to hand off projects after the initial UX and exploration, much of the work shown in this case study is a lot more high level than my other case studies. Please check out Buzz, Locket, and Music Pix for pixel-perfect final designs.

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.

Screenshot of the old chat drawer designs on iOS and Android

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.

Photo of design studio with Emily, Michelle, Lheyla, and Michelle W.

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

Photo of design studio with Amy, Yufei, Will, Joey, and Chris

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

Photo of Yufei pointing at her ideas

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
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
Tango chat drawer wireframe explorations
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, was just swiping 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

Wireframe the drawer and typing in chat

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.

Four years later, Tango still uses the chat drawer. Facebook also later launched a similar peak in/peak out drawer.

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.

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

Much of the problems listed were problems PMs and Designers wanted tackled. However, it did help us all understand our frustrations and projects we wanted to work on.

After discussing our issues, we tackled a few key user stories. There are two major personas at Tango and interestedly, they almost never overlap.

Private Communicators

Photo of an adult couple smiling into the camera

This is Nina. She immigrated to the United States with her husband and her children. She uses Tango to keep in touch with her mom, dad, siblings, extended relatives, and friends. She sends private photos of her children, shares stories about her day, and religiously hops on a weekly video call with her mom and dad. She chats but she also consistently voice calls and video calls her family and friends. Tango brings her closer to people who are physically located far away.

Social Discoverers

Photo of a young woman alone near the water

This is Chloe. She’s lonely and uses Tango in order to connect and chat with strangers. She likes to make new friends, wasn’t too picky about exactly who she wanted to talk to… she mainly cared they would respond right away. Her chats are more ephemeral and she never calls or video chats. She’s never met any of the people in person. She likes to use new features in order to keep her conversations alive. She likes to send GIFs, stickers, and cute pictures of dogs. She does not talk to her family on Tango.

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:

  • As a Private Communicator, I want my video calls with my family and friends to be high quality and easy to access.
  • As a Private Communicator, since my family/friends might be overseas I want be aware when they may be available for a call and if they’re not, a way to talk with them asynchronously.
  • As a Discovery user I want to have fun ways to make small talk; I want Tango to help me get the conversation going.
  • As a Discovery user, I want it to be easy to find who is available to talk.
  • As a Private and Discovery user I want my conversations to be fun and captivating.
  • As a Private and Discovery user, I want my main focus to be the person I’m talking to and not Tango.

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.


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.

Calling Flow

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.

Live Video Flow

Not only did we want to leave a voice/video message, we wanted to make our current video messages better. If no one was there, the video message would be left. However, if the other user was there, it would initiate as a “live video” and the receiver can interact and message with the initiator. The receiver can turn on their own video and the call can transform into a video call.

I was sadly not around to implement Live into reality. However, Tango today has the entire flow I envisioned implemented. Live video became a phenomena in social media: facebook live, youtube live, musical.ly, tiktok. It eventually became a huge part of Tango’s identity as well. In early 2019, Tango rebranded to Tango - Live Video Broadcasts.

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.

Screenshots of chat list old designs

Chat list old designs

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.

Photo of me presenting user stories

Refining user stories; presenting my story to the Core Communication team for feedback

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.

Photo of user story screen sketches
Photo of user story screen sketches close up

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.

User stories and wireframes
User story example

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.

Photo of me refining user stories and pairing them with mockups

Refining user stories and pairing them with mockups

Discussing user story and designs with the Core Comms team

Discussing user story and designs with the Core Comms team

Refined user stories
Refined user stories
Refined user stories
Refined user stories

When I finished the visual wireframes and user stories, I handed off the project to Will. He refined the work further and made a cohesive final design.

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.

Photo of me prioritizing

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.

Photo of designers

At the tail end of the meeting, designers who needed to leave could and an open forum of new ideas, articles, and design related things could be brought up to the group. The meeting helped bring us closer and our designs more consistent.

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.