My Role
Product Designer
UX Researcher
UX Writer
Duration
Jul 2021-Dec 2022
(17 months)
Tools
Figma
Adobe CC
Xtensio
Contributions
Visual Design
Interaction Design
PROBLEM
Despite attempts to recreate live music online during the pandemic, setbacks for live streams make them less popular than in-person, and can't make up losses suffered by a $20 billion industry in 2019.
MISSION
Study how users interact with live streams and use insights to create a white-label platform for virtual interactive concerts.
Users can:
-
Visual representations of themselves
-
Aesthetics based on the artist's theme and user interaction
-
Chat with other attendees and artists through the app
PROJECT ROADMAP
RESEARCH
METHODS
-
Create competitive analysis of key live stream platforms like YouTube & Twitch
-
Survey and interview attendees & performers to find pain points
-
Explore diff. technological environments for artist and attendees to connect
INITIAL QUESTIONS
-
What is the target demographic?
-
What are the pain points?
-
What are must-have features according to users?
-
What can we add that would enrich user experience and allow more connection?
COMPETITIVE ANALYSIS
In place of in-person performances, only a handful of platforms created audience representation which we prioritized. We also researched popular streaming sites including Twitch, YouTube, and Vimeo.
Some key features identified from this analysis included:
Custom Visual Themes
Chat Function
Interactive Reactions
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.
