The Problem
At the start of this pandemic, the music industry took great steps to move all performances online. However, despite the attempt to recreate a magical evening spent with your favorite artist, the cons for live streams vs. in-person events makes the former not as popular, and cannot make up for the loss suffered by an industry worth $20 billion in 2019.
Our Mission
To study how users interact with live streams and use insights to create a white-label platform for virtual interactive concerts. Users can:
-
Have visual representations of themselves
-
Enjoy aesthetics based on the artist's theme and user interaction
-
Chat with other attendees and the artist through the web application
Project Roadmap
My Role
UX/UI Designer
UX Writer
Research
METHODS
-
Create a competitive analysis of key live streaming platforms such as YouTube and Twitch
-
Survey and interview live-stream attendees as well as performers to find out pain points about these platforms
-
Explore different ways of using technology to provide an environment that allows both the artist and attendees to feel connected with each other
INITIAL QUESTIONS
-
What is the target demographic of people who attend live-stream concerts?
-
What are the user pain points with using live-stream concerts?
-
What are must-have features for live-stream concerts, according to users?
-
What could we add to our live-stream platform that would enrich the experience for users and allow them to feel more connected to the artist and each other?
COMPETITIVE ANALYSIS
In the absence of in-person performances, only a handful of livestream platforms created an audience representation and we prioritized researching those. We also researched popular streaming websites that already exist, including Twitch, YouTube, and Vimeo.
Some key features identified from this analysis included:
Interactive Reactions
Chat Function
Custom Visual Themes
SURVEY RESULTS
As part of the research, we handed out a survey to volunteers who might be able to give us insight into what users prioritize in a live stream performance, including the following metrics:
-
Importance of Visual/audio quality
-
Identify most popular platform to use for live streams
-
Why users hesitate at live stream concerts vs. in-person concerts
93.8%
use YouTube or similar as their go-to for live stream events
37.5%
voted 10/10 on the importance of audio in a live stream event
12.5%
voted 10/10 on the importance of visuals in a live stream event
50.1%
don't like live streams due to technical difficulties and disconnect from the performer
Who Are the Users?
STORYBOARD: BAYLOR RYAN'S JOURNEY W/ DIVE
Start the Design
SKETCHES
Making a platform where the artist and the audience can feel more connected through an online space was the priority of DIVE. The following sketches I created demonstrate some of the first ideas we came up with to achieve that goal, including:
-
Audience visual representation
-
Chat with audience and artist
-
Emoji reactions
-
Minimizing the video to enjoy the visual representations of attendees
Prototype
PROTOTYPE WALKTHROUGH
A. Users will be initially brought to the Welcome Page, but this will only happen if the "rooms" aren't available yet for users to enter.
B-C. Different options will appear on main menus. Users can select between each of the three rooms available to enter and test out or they can click on the button in the bottom right to view the "How to Use" room for a quick tutorial. To leave the demo room, users can click the Home button to return to the menu.
D. All rooms in the D section are the testing rooms users will enter upon clicking on the corresponding buttons in the B menu. Each room has the same chat box, menu buttons, and minimize buttons, but each room will have different music, video, and interactive components.
E. The rooms in the E section show what the rooms in D look like when the user minimizes the video screen for more interaction with the visual effects.
Usability Testing
To discover important insights from the users, we performed a series of virtual usability tests via Zoom and recorded videos of each participant interacting with the prototype made in GameMaker (no longer available). We then evaluated the data, and noticed common issues and adjustments to be made based on the user perspective.
RECOMMENDATIONS
1. Add the concert and artist name to the home page
2. Add audio volume control for all rooms.
3. The user will be able to change reaction type and color during the concert.
4. Users will be able to click on a message to react to it.
6. Add hover feedback to clickable buttons.
7. Need to implement a better way of explaining the instructional guidelines
8. Users can choose a color for themselves, and user-specific messages will be bold
5. Added ability to be able to scroll back through chat history (messages currently disappear)
FINDINGS
1. The name of the artist was missing.
2. Users could not control the volume.
3. Users wanted to know if others would have the same reactions and how would theirs from others.
4. Participants expressed the desire to react to individual messages.
5. Participants wanted to see messages sent before (didn't see it, or scrolled by too fast)
6. Unsure if some buttons were clickable or not.
7. Users were confused about how to read the instructions on "how to use" platform
8. Users can't tell the difference b/w their messages and messages sent by other participants in the chat.
Takeaways
Working on this case study not only gave me insights into new design skills but also allowed me to enhance my understanding of UX design and research and the importance of implementing those skills into product design. One setback that held us back from completely developing a prototype that could be used in the public space was only involving users in the very beginning with surveys and near the end of the project during the usability test.
In future work, I plan to take it to the next level by involving more users throughout the design process, allowing me to truly understand the issues users face when using this type of technology. That way, it will be easier to identify such issues much earlier.