Tango is an app that lets you connect with close family and friends. Tango also has social features, through which you can play games, meet new people, and join chat rooms. The app has over 300 million registered users.

However, after looking at usage patterns we saw a large gap in the ways people used Tango. There were social users and private messaging users. And having all these features in one app was cumbersome and difficult. We also wanted to revamp our brand and voice, and provide a unique value to our users.

Historical Context

Tango started out as a place to make free voice and video calls. This was when FaceTime was released on the iPhone. Tango was widely used mainly because people could make free voice and video calls on all devices, iPhone and Android. Tango soon expanded its offerings to games, chat rooms, and meeting new people. It became a place to do more than just communicate.

However, bombarding features onto the app made it difficult to navigate, confusing, and often made users feel lost. It was hard to know what Tango really was, a social place or a private place? Too many choices resulted in users not understanding what to do, which led to chaos.

Our small team of four designers set out to talk to our users and understand the patterns, create a core set of principles to drive the Tango design, and finally, create a unified system that defined the way we worked and the way we wanted to solve the problems we saw our users facing.

How do we begin to redefine Tango?

We started out defining the goals of the redesign and what we hope to achieve: 1) Focus on Users 2) Establish Principles 3) Create a system.

My role: We had a team of four designers. We also had engineers and product managers involved throughout the process to help with the brainstorm and moodboarding. My role was primarily interaction design as I worked on detailed flows and information architecture. I also worked on the visual component library primarily working on the Tango Messenger components.

The Process: Step 1- Empathy Mapping

We started out our process by empathy mapping. From the research we had done before we found an interesting disconnect between our users: the discoverer vs. the communicator. We set out to understand more about these users’ goals and how they wanted to feel while using Tango.

The need for an app-split

After doing more research and exploration, we realized that we currently had one app that was trying to cater to two completely different types of people. Of course there were people who wanted to do both discovering and private communication, but this was rare. We saw that what we really needed was a social app and a private communication app to separate these two worlds, since bringing them together brought a lot of friction to our users. This is when we decided to split the app.

Brand values and moodboards

After working through a few rounds of brainstorming and thinking of our personality, we came up with a list of brand values. These brand values were very important to us, since they were the shared vocabulary we could use to understand, defend, and iterate on our designs. From here we came up with imagery that we thought best represented these values.

Our core brand values were:

Welcoming: A place where you can be yourself. We believe in being open and approachable.

Alive: We believe life is in the moments, in experiencing the here and now.

Bold: We don’t conform to the status quo. 

Captivating: We strive to create experiences that hold your attention.

Playful: The place that makes you smile. 

  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image

Creating a set of principles

From our brand values, we realized that we wanted the messenger to be more welcoming and captivating while we wanted the social app to be more alive, playful, and bold. After working on the values that defined our app and what we wanted Tango to be, we created a list of principles for the app split:

Tango Messenger

  • Be the place to easily connect with your close family and friends
  • Make it easy to share photos with the people you care about
  • Don’t distract, to allow the focus to be on the conversations at hand.

Fiesta (Social App)

  •  Be the place to connect with new people
  •  Help people find engaging conversations with new groups of people
  • Be a fun, alive experience that brings people together.

Going low fidelity

As we started doing low fidelity wireframes of what we wanted each app to function like, a lot of questions came in our head.

Sketching helped us quickly apply these principles first hand, and explore solutions to see what did work and didn’t work.

We also worked on a few concepts of both apps. Focusing on both apps in parallel helped us figure out what features belonged where depending on our findings of how our users behaved in each app. We listed out the core traits we wanted each app to have based on our design principles established.

Messenger: Private, Simple, No distractions, Focus on the conversation

Social: More going on, Excited, Active, Not too serious, Focus on multiple things at once

We explored many different ideas: more playful card styles, focusing on conversations in messenger by making it the center of the app, and bringing in all the social features front and center in the Fiesta app.

Bringing it all together

After four months of working on the app and going through countless iterations, here is a fast forward of the final product.

The following app is the Messenger App, focused on communication with close family and friends.

Tango Messenger surfaces photo sharing right away, so you can share special photos with loved ones. The chat list is at the core. We temporarily had a bridge between Messenger and Social before splitting the two apps. That is why you may see a “social” tab on the right.

Tango Fiesta puts discovery at the center, making it easy to find new people around you to connect with. Social features such as games an chat rooms are also included in this app.

Create a component system

Once we had a design, we started building out a component library. We started, defining principles. These were the main principles behind the component system

1. Have one place all designers and developers can go to find common elements.

2. Have a system that is frequently updated.

3. Have a visual style and interactions that are scalable.

We created components that came together to create key screens. We followed the framework of atomic design, building out the atoms, molecules, organisms, templates, and pages.

Atoms: Color palettes, fonts, buttons

Molecules: List cells, chat bubbles, tooltip

Organisms: Cards, lists, modals,

Templates: grids, hierarchy

Pages: Screens

Moving forward

Just launching a new design isn’t enough. Our team also worked to pressure test the design and iterate consistently. Once we split the apps, which was a large undertaking, we also worked on other product features that would enhance the experience of both apps, in line with the design principles we established.

Creating a component system ensured the company had a design system and created consistency throughout the app.

This project was fantastic with a wonderful team. There is always so much to learn when evolving an app.