Timeline:
August 2020 - January 2021


Type of Project:
Student Project

THE PROBLEM
Online music live streams don’t provide the same value as seeing an artist perform live in person.
Despite it being easier to tune into performances from artists at any given time, rarely do music lovers find it engaging enough to stick around for the full performance and to engage with other users and the artist.
THE SOLUTION
I could not find a live streaming app solely focused on music that also has a “watch-party” feature.
Platune offers the ability to watch an artist perform during a live stream while simultaneously video chatting with friends. Key features were designed to increase engagement during music live streams and to build a stronger community.
MY ROLE​​​​​​​
I was the sole UX/UI designer.
The process started with brainstorming, market research and user research, which lead to wireframing (lofi to hifi), to a final working prototype that was tested multiple times throughout various stages of the project.
KEY FEATURES
1) Watch a live stream solo, or better yet, watch with friends.
Experience the reactions of your friends and their emotions in sync.
2) Chat publicly with everyone else in the live stream.

• "Top Fans" recognized in the chat. They earn this by tuning into streams.

• Options for different badges and colors for user profiles​​​​​​​
3) A live Q&A happens at the end of every stream.
• "Top Tuners" are paid subscribers


•  Their questions are pinned to the top & those questions are answered first


•  Fans can upvote/downvote on questions with a 👍, or 👎
•  The artist can easily hop on the app on their phone following the performance to go "live" 

•  Once live, they can answer questions from fans found in the Q&A tab


Yes, that's me ↑. As a live performer, I loved this app idea for an artist 😂

View the video walkthrough if you'd like!
Great, now that you've got the gist of the app...
DESIGN PROCESS
Check out what went into this in-depth case study!
RESEARCH + QUESTIONS
I took a close look at the landscape and created an overview.
• (1) Facebook, Instagram, Youtube, Twitch

• (2) Teleparty Watch Party (Netlfix, Hulu, Disney+, HBO) and Prime Video

• (3) Zoom, Facetime, Skype, Google Hangouts
REDIRECTION
There were some setbacks as I figured out the direction to take this in.
With this being my first case study, I wanted to explore many options. I spent the first 2-3 weeks going back and forth between potential solutions. Some ideas were too ambitious, I later realized. The idea of live music in virtual reality was exciting, but the technology isn't there yet on a mainstream level and it would make for quite a difficult case study to write ;).
Another question was "what form factor do I design for?" 
I initially started designing for smart TV's thinking that most people watch livestreams from the comfort of their living room.
This set me back. Research actually revealed that most people view live streams on their desktop.
PRIMARY RESEARCH
Primary research & testing on 6 highly targeted participants over the course of months.
INITIAL USER INTERVIEWS​​​​​​​
50% of the participants stopped watching between 1-5 minutes in... yet all of them expressed the desire to be more engaged.
These results were pretty shocking. I asked them these research questions during the user interviews.
Research Questions:
1) Tell me about the last live stream you watched?

2) What are some of the ways you’ve found recent live streams you’ve watched?

3) Which platforms do you tend to watch live streams on and why? Desktop, phone, or Smart TV?

4) Does it make a difference to you if the live stream is actually live, versus a recording?

5) What are some of the reasons you found yourself stopping a live stream you started to watch?
MAIN INSIGHT​​​​​​​
How might we make virtual live streams more engaging and feel more like the in-person experience?
After a remote zoom call with each of them, there was lots of valuable information to sort through. There were notable quotes during these user interviews that helped shape what problems to focus on solving. I organized all the data through Affinity Mapping and User Stories.
STYLE GUIDE
Before wireframing, I created a style guide in Figma to get the brand personality down.
TESTING + IMPROVEMENTS
3 major improvements made to the design.
Based on various feedback from the 6 participants, other friends, and my mentor, I continuously iterated the design over the span of a month.
 Modified the Sidebar to be a Tabbed Menu

• V1 is ambiguous. Without labels, the sidebar was hard to understand

• V2 had poor hover states. Iconography wasn't great

• V3 has clear hover states and colors match the rest of the app. "Top Fan" badge added
 Designed a "Top Tuner" section to account for premium users

• Started with an accordion menu. Position stayed fixed when scrolling down. This was clunky

• Scrapped the accordion menu, comments from Top Tuners are stickied at the top with a line of separation 

• Top Tuners pay. They are guaranteed to have their questions answered. Past streams never expire.
 Adding 👍 and 👎 emojis to make the chat more interactive

• V1 had no emojis at all

• V2 introduced the thumbs up emoji to upvote and highlight good questions

• V3 here I realized some people are inappropriate 🙃. Users have the power to downvote those questions​​​​​​​
FINAL SCREENS
More screens of the final product. Change views.
Horizontal View
Full Screen + Chat
View the prototype!
CONCLUSION + LESSONS LEARNED
What I learned!
This was my first case study! 🎉 It felt great to work my way through the entire design process start to finish, frustrations, iterations, and all. The end result made all the effort worth it and I'm so glad I had an amazing mentor to provide feedback each week! 
My biggest takeaway is that research, user testing, and constant iterations are extremely key to designing a product that actually solves a problem in the best way possible.

Creating a fun and intuitive app is necessary for a great user experience. Aesthetically pleasing design can be an eye-catcher, but it doesn’t matter how beautiful the UI is if there isn’t thorough research and testing to back up each design decision.

Thanks for reading.
Please take a look at my other projects below!

More Projects ⤵

Back to Top