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 VentureBeat Logo Logo for VentureBeat over transparent background TechCrunch Logo Logo for TechCrunch over transparent background The Next Web Logo Logo for The Next Web over transparent background Digital Trends Logo Logo for Digital Trends over transparent background Adweek Logo Logo for Adweek over transparent background Recode Logo Logo for Recode over transparent background

Music Pix

Building a minimum viable product. Music Pix is an experimental app that was fully integrated into Tango’s core messaging application. Music Pix pairs users’ photos with a short 30 second clip of music and automatically creates an engaging short-form video story. We developed Music Pix to help facilitate more conversations.

Music Pix by Tango

Company

Tango

My Deliverables

Android Product Design, Branding, Creative Direction, Production Design, Design QA

Tools

Photoshop, InDesign, Illustrator, Paper & Sharpie

Year

2014

Team

Hanna: Android Product Design
Elena: iOS Product Design
Jingxi: Research
Jamie: Product Manager
Quoc: Developer & Prototyper
Chi-Chao: Vision

And of course Tango Dev, QA, & Marketing

MY ROLE

I was lucky enough to have the opportunity to create Music Pix from scratch.

Since I was building the app from the ground up, I brainstormed and developed the concept, established a unique brand and style, and figured out the flow and user interactions. When I began UI design, the project was split between iOS and Android. I focused on Android product design. During production, I worked with the Android development team to finally ship the product.

BACKGROUND

In 2013, Tango had moved from a calling utility app into the social sphere. Users were sharing videos, pictures, music, and text not only through the messaging aspect of the app, but also the recently released feed. In the feed and chat, users were able to share a 30 second snippet of a song due to a partnership with Spotify.

Spotify Music Selection Flow Diagram

Before working on Music Pix, I was also the sole designer working on improving the Spotify music selection for iOS & Android

Tango already had users who were spending a lot of time messaging each other pictures and music. Looking at our data, we realized that content (images, music, videos, GIFs, etc) was a big part of engagement for our users.

Since we already had a Spotify partnership, we were curious if we could utilize it in a more interesting way. We saw third party apps like Flipagram & Magisto launch and gain traction. Since we wanted to encourage users to stay within our ecosystem, the idea of Music Pix was born.

To Tango or not to Tango

In the beginning, we had a lot of discussions about keeping Music Pix within the core application. However, when Tango expanded from calling into the social sphere, the app started to become fairly bloated as a product.

We decided to create Music Pix as an MVP separate from Tango. A simplified mini application could help us test the MVP fairly quickly. If the mini application didn’t take off or didn’t complement our core messaging/calling application, we could easily discontinue or change the product. Keeping them separate meant our more creative initiatives wouldn't be slowed down to fit within our core app.

Early Sketches

When I began the project, Jingxi had already helped research the space and gave me some rough early IA/UX wireframes. Since Elena Migunova and I were working together, we decided to kick off the project with some quick sharpie and index card sketches.

We laid out the basic screens we thought we might need: first time user experience screen that introduced the concept, a way for the user to select from their photo gallery, a way to choose music, a way to preview and edit their creation, a way to share into Tango (and elsewhere) and then a feed of the user's creations.

Paper and sharpie sketches of Music Pix screens

Overall Brainstorm picture. Note: Brainstorm sketches shown are from both Elena and me

Paper and sharpie sketches of Music Pix screens. Zoomed in picture of FTUE, gallery, music selection, and editing view

While brainstorming and discussing our MVP we had a tough decision on what exactly is the minimum amount we could build yet still be compelling enough for our users. Early on, we decided to limit videos. We were afraid that adding videos would complicate the app tenfold. We wanted to test the concept with only pictures first.

We also had to decide what edits a user could make to the video. Because we saw the app as a complement to Tango, we didn’t want the creation step to be too complicated. Music Pix wasn’t intended to replace the Photoshop suite. We decided, at least for the MVP, that users could only choose a song, add a title, and choose filters. Any other editing tools would be released later and would be decided via testing and feedback from our first users.

Paper and sharpie sketches of Music Pix screens. Zoomed-in picture of my feed & playing a slideshow

We also discussed whether we wanted to have a feed of other people’s videos as well. Again, we thought this was out of scope for our MVP (adding a social element complicated the app and might directly contradict Tango’s core application). We decided that the only thing we currently needed was a feed of a user’s own Music Pix.

Mood Boards

Since Music Pix was a stand-alone application, we had the luxury of creating a new look and branding. We could design new components! Since this was a combination of Tango and Spotify (our internal nickname was even SpoTango), a lot of my inspiration came from the two applications.

Music Pix Mood Board

Small sample of the mood boards I created

Dark or Light?

Early on, we needed to decide whether to make the app dark or light. At that time, Tango’s Android application was dark themed and Tango’s iOS app was light themed. We weren’t exactly sure which direction to go.

Music Pix dark or light mood board by Elena
Colour preference test created by Elena

Dark/light mood boards and preference test created by Elena

We decided to do a preference test with the colours and the majority liked the dark theme.

Wireframes

When we started the wireframing stage, Elena and I decided to quickly map out and explore the user flows on our own. We brought our findings together, did some brief user testing for both, and then took the best parts of each to move forward with the user. Below is a small selection of the wireframes I created.

Music Pix Wireframes
Music Pix Wireframes

Between early explorations and final designs, we decided to remove filters and themes altogether. Around that time, we thought we were adding a little too much to our MVP and we wanted to simplify and ship the product out to the users faster. Filters and editing features did go out in later versions of Music Pix.

Why Split Android & iOS?

Before the final designs, Elena and I had worked together for much of the project. I even explored some UI work on iOS. However, once we had a good direction, the two of us worked simultaneously on the two different platforms.

Usually we shipped a small sub-section of Android first because Google had a faster review time and because we had more users on Android. We studied our analytics and used what we learned there to refine iOS and polish Android for a full release.

For Music Pix, we decided we wanted to ship the two products together. Since this was a new launch, not having one platform meant a portion of our users couldn’t download it. It was fine for our main app to be asynchronous, but we felt like we needed both here since the creations are shared. Having both of us working on our own platforms allowed us to ship something faster and to keep the essence of their respective platforms.

Final Designs

An exciting thing happened between explorations and final designs: Google’s release of material design! Music Pix was one of the first projects I worked on that followed Android design patterns.

Music Pix Splash Screen
Music Pix FTUE Landing Screen

Splash Screen & FTUE

The First User Introduction Page plays a video introducing the concept for Music Pix. While testing, I decided to go for a square (the same size as the created Music Pix) in order to showcase what the user can do. I chose our copy, Tell your story in 30 seconds, because I wanted to highlight 30 seconds as a feature and not a limitation.

Music Pix Pick Photos Screen
Music Pix Pick Photos - When a user selects photos

Pick Photos

Photos were initially limited to 10 for our MVP.

Music Pix Add Music Screen
Music Pix Add Music Screen - When a user listens to a preview of the music

Add Music

Between wireframes and final designs, I removed music categories. Users were more likely to search for a specific song or browsed through the top songs, not spend time with categories.

If users wanted to preview the music they could hit play, otherwise it goes directly to creation.

Music Pix Music Search Screen
Music Pix Music Search - Typing Screen

Search Music

Search was an important part of the app since we had Spotify's entire library to choose from.

Music Pix Preview Slideshow Screen
Music Pix Sharing Screen

Preview & Share

After the user chooses photos and music, we show a looping preview of the creation. Our backend automatically times and adds transitions within the video. Users are able to edit and add titles.

Music Pix Sharing to Tango Feed Screen
Music Pix My Feed Screen

Share to Tango & My Feed

Music Pix was directly linked to the user's Tango application. Users can post to the Tango app.

Music Pix also had its own feed that showcased the user's own creation. The feed allows the user to easily find past creations. After our MVP, we expanded the Music Pix feed to include videos from other users as well.

Redlines

You don’t see it much anymore, but when Music Pix was created Tango was still designing everything entirely in Photoshop. Redlining was far more manual (Zeplin wasn’t even launched yet!) and was done with a combination of Photoshop scripts and careful use of the marquee tool. I wanted to share some of the redlines I created during this time, not because I’ll need to manually redline anymore but to showcase where I began.

Music Pix Redline Example
Music Pix Redline Example
Music Pix Redline Example

Press

Music Pix gained a great deal of media coverage when we first launched. In fact, it was accidentally leaked one month early on TechCrunch.

Here are a few selected media hits we got for Music Pix.

Conclusion & Takeaways

MVPs are tough. Making this app requires finding a balance between deciding what was out of scope and what was required to make an app successful.

Music Pix never really took off, but we learned that quickly. I learned so much working on this project and creating an MVP from scratch. We worked on Music Pix as a skeleton crew at Tango and pushed out an entire app within a couple months. The app really influenced my view of how to create a project and deciding priority while pushing out product.

Before Music Pix, I think I was a little too much a perfectionist. I learned to remember to look at a project with more of a lean ux eye, as a product manager would. Is this needed? Could we release this faster without it? I used a lot of what I learned here to later co-found my own company. This project also influenced how I manage the design team and creative direction at Gfycat.