Tidal TurnUp Feature Design

 

Feature Design

I was asked to create a feature called the “Turn Up” feature that could be integrated into the Tidal app. In a nutshell, the feature allows a user to sync their phone to let other Tidal users to listen to the same music they are listening to in real time. The new feature would align with the current Tidal brand. 

 

 

 

The challenge

Tidal is a web and mobile application used to listen music. But what if a user wants to share music privately as well as publicly? Can other users participating in the sync queue up tracks (i.e. Can the DJ rotate)? Would users be able to comment, share, and save music during a sync? Tidal saw an opportunity to empower users to sync their phone and to let other Tidal users to listen to the same music they are listening in real time from their mobile phones. I’ll take you through the design process we used to create the TurnUp feature below.

 

Ideation

Based on customer feedback and analytics, it was clear that keeping the design simple would be the way to go about solving this challenge. After some research, we decided to base the design on the features that users valued the most and in what situations users would use this feature. We wanted an engaging and addictive way for users to share music without disturbing the actual design of the app.

After numerous sketches and brainstorming sessions, we concluded that the “must have” for the app was essentially an easy way for users to share music with the people they feel connected to (friends, family..) wherever they are in the world. We wanted to keep things very simple and focused on account activity as seen in the relatively simple sitemap above.

 

Wireframes and prototypes

I created a quick prototype using a clever little app called Pop, that allows you to take photos of your interface sketches and link them together to create an interactive prototype on your mobile phone. I tested out the prototype on a few users to ensure that there were no major usability issues and then moved on to creating more detailed wireframes in Balsamiq, some of which can be seen above. I’m a big believer in “less is more”, so we focused on making sure that every element in this app earned its place.

 

Branding

The project called for a style tile to be included in the set of deliverables. I kept the fonts, color scheme, button styles consistent with the current app and I created an icon for the new TurnUp feature. I drew my inspiration from the existing iconography in the Tidal app ( i.e. shuffle, repeat). I used the “T” in “TurnUp” to create an arrow pointing up. I designed the icon this way because I thought it would make it easier for users to identify and remember the feature while keeping the new feature icon cohesive with the current icon styles. 

 

Putting it all together

After endless hours of experimenting with visuals in Illustrator, we were finally happy with the visual design aesthetic.