Concept | iOS App | UI Design
TurnUp is a new featured app for Tidal that connects users by letting them simultaneously play music through multiple phones. My role was to research, design and test all UIs related to this app. This project was completed as part of a Designlab capstone project.
Project time frame: 2 weeks
Tools Used: Sketch, InVision, Marvel
Tidal has built custom technology to enable music lovers to share and listen in revolutionary new ways. Tidal plans to promote and launch their updated application with the new TurnUp app.
The main challenges for this project are:
1. Streaming music in real time across multiple phones
2. Enable users to interact with each other during the music sharing experience
3. Integrate this feature with the existing application and making it work within a users' current listening habits
My Design Process
I decided to follow IDEO’s Human-Centered Design and Lean UX Design Thinking process to make sure that my design decisions were supported by user research and feedback.
The reason why I've chose to use IDEO's approach is that IDEO excels at empathizing with the end-user of their products. And as for this particular project, since we are incorporating a feature on top of an existing product, it is important for us to understand existing users' behaviours.
I conducted twelve 1:1 interviews and remote surveys on the targeted audience to gain a better understanding of users' listening habits.
Based on my research I realized that most people prefer listening to music alone over with others but are also open to share their music findings with their peers.
Key findings from research:
1. Most people are open to others’ options in terms of making playlists.
2. Most people are satisfied with music collaborations as both listener and contributor.
3. Most people choose music based on their current mood. (fitness, walking, yoga, relaxing, etc)
Based off my research findings, I realized that people gravitate towards music that resonates with their current mood states or activity and are more open to having a shared experience with others who shares similar taste.
After going through several brainstorming sessions and discussions, I've decided to give users the freedom to create individual music rooms based on music genres and mood states. Users can choose to join different rooms to stream music with others and could also contribute music to the playlist.
After completing the research and deciding on the design direction, I created a persona to better understand and empathize with the users. My persona helped to personalize the data and insights that I received during my research. It was also helpful to have to refer back to when I encountered difficult design decisions later on in the project.
By using the insights I gained during the research phase, I created an application map to map the overall user application flow, including all the potential app actions. I’ve mapped out all of the main crucial user flows from onboarding experience to joining a live music streaming chat room. This is important and helps to ensure a smooth and intuitive navigation between various tasks in the app.
Based off the application map, I created low-fi wireframes using Sketch to clarify the information hierarchy and key elements. In this case I’ve chosen to demonstrate the onboarding and music streaming user flow.
After I've created the basic wireframes, I did some usability testings using InVision with potential users and made a slight mortification on the visual design of the chatroom button to make it more obvious to the users since some people don't know what the button is for when they first saw it.
After validating the initial designs, I made several iterations based on the feedbacks.
I started to think about the visual style of the app. I then created a mood board as an inspiration for the final design.
Since our targeted audience is a younger crowd, I've decided to use a colorful and vibrant colour palette for the interface.
It's important to maintain certain level of cohesiveness across these apps. Therefore, in order to maintain visual consistency, I used similar color tones and style of the Tidal app within this mockup with a slight bit of variations.
• • •
I really enjoyed working on this project especially the idea exploration phrase . One of the most challenging issues that I encountered was how to integrate this feature with the existing application and making it work within a users' current listening habits.
A lesson I've also learned is that not every user wanted to listen to music and chat at the same time. It' important to give people options to choose from.