Empty Streets of Manhattan, NY During Coronavirus Pandemic
Photo by Harry Gillen on Unsplash
Mark Singer
UX Designer
UX Challenge: Concerts on Spotify Live
A Companion App for Spotify Mobile
Roles & Responsibilities
Mark Singer, UX Designer | Research, Iteration and Prototyping
Nicole Kaiser, UX Designer | Project Mangement, Iteration, Prototyping
Jack Rosenberg, UX Designer | Iteration, Research, Prototyping
Users and Audience
Music aficionados and casual video watchers.
Scope & Constraints
We were focused on adding a live streaming feature to Spotify, within the time constraints of a two-week sprint.
The Era of Social Distancing Defines Our Research
The Covid-19 pandemic changed the world as we knew it. Cities became desolate and empty. Once bustling blocks in Manhattan were left spare. All planned events were cancelled and people couldn't see each other or socialize like we did before. People who would go out to see their favorite bands play at music festivals were left without an outlet.
The Problem: Concert-Goers Feel Socially Isolated From The Pandemic
Concert-goers are feeling socially isolated due to the pandemic and miss live music, meeting up with friends and meeting new ones. They need a way to simulate this experience within the constraints of social distancing. Spotify has the capability for live streaming services and wants to add this feature to their suite of offerings.
6
Interviews
6
Usability Tests
2
Iterations
Photo by Chris Montgomery on Unsplash (edited for color)
Our Research Shows People Want Live Streaming
People are interested in live-streaming, and need ways to connect with people in a safe way, given social distancing. Take a look at the meteoritic rise of Zoom at the start of the COVID-19 pandemic, as an example of this. People want livestreams to feel like an in person hang out.
My team conducted user research, business analysis, and competitive and comparative analysis (C&C Analysis) to understand market trends.
Twitch on Phone
Photo by Caspar Camille Rubin on Unsplash
One Company Defines a Trend
We discovered that the company Twitch has the biggest presence in the live streaming space. Currently Twitch has 140 Million unique users each month, which is up from 55 Million in 2015. Twitch has an annual revenue of 1.52 Billion. Live streaming is a rapidly growing area and Spotify would be remiss to not take part int his trend. No direct competitors offer live-streaming service.
Exploring a Task Helps Us Think Like a User
We started with a task analysis, user flow and system flow to understand the how the user would move through the app and give us a template to wireframe from. Doing this made our ideas more concrete and easier to follow in the prototyping stage, saving us time and resources. This infographic shows a high-level of tasks we looked at.
Task Analysis / User Flow
A Persona Synthesizes Our Research
Meet our user persona, Rochelle D'Antonio. Rochelle is the product of the user research, and desk research we completed. We created this persona to help guide design decisions and keep our team focused on who we were designing for.
Persona born out of user research
A sketch from an early round of Crazy-8's
Brainstorming Ideas Helps Us Ideate
Early Sketches
Our team started by doing multiple rounds of Crazy-8 sketching and debriefing, which brought up questions about going for a mobile app verses desktop app. Additional research showed that mobile was used most often by live stream watchers, with 70% of YouTube views coming from mobile. The last data from Twitch showed an increasing 30% of its users on mobile in 2014, which informed our decision to move forward with mobile.
I explored ideas around companion apps, which became the main idea in later iterations. In one of my sketches, I utilized the worst possible idea exercise, which helped me become aware of pitfalls to avoid, and it was a turning point in my thinking. I really wanted to design a viewing room of sorts, where multiple watchers could watch the same video together, and chat. While it didn't manifest as I envisioned at this point, we did end up with a chat room that served the purpose well.
Crazy-8 Sketches and an Evolution of Thought
Content Placement Plan
A Content First Strategy Prepares Us For Prototyping
Building on our experience with the user flow and sketching, we identified necessary screens using a Content Placement Plan. For each screen, we asked ourselves:
What features should this screen have?
What information should be included?
Thinking about content first helped our team transition from ideation to prototyping quickly and effectively. Team members were aligned with our goals for the product. Once our strategy was complete we were clear about the prototype we were about to build.
Mid-Fidelity Prototype: Testers Uncover Mental Models
In our mid-fidelity prototype, we first tried using profile thumbnails as a way to show friends that are online and watching a livestream, however we ran into complications. Testers noted that the profile thumbnails didn't take them to where they expected. Their expectations were that their friends were live streaming, not that they were being taken to what their friends were watching. Also, testers found the favorites tab on the navigation bar unclear. The testers were drawing from mental models they constructed from their experience with Instagram, which is something we needed to consider in the next iteration.
Usability Testing Shows Us How To Better Serve Our Users
Here are some takeaways we noted:
Profile thumbnails didn't take them where they expected
Favorite tabs on navigation bar was unclear to users
Users completely ignored reply button
Mixed results about on online status
Home page and profile page changes were successful
People were not reading the headlines/category headers consistently
Click error on user name in comment section
Final Prototype Is Engaging For The Users
We iterated on our findings from mid-fidelity prototyping by applying what we learned in our usability testing findings, which resulted in a beautiful Hi-Fidelity Prototype. Adding color, images, and copywriting (concise, and personal) created an intuitive, and engaging user experience.
What We Got Right: Understanding Our User's Mental Models
We took what we learned in the last round of testing and addressed the profile thumbnail issue by including it with each video that was being watched. This turned out to be effective, because testers quickly understood that the thumbnails they were seeing were friends that were watching a particular video.
Outcomes That Complete The Experience
My team recommends the following next steps, for further iterations of this project:
Link to existing pages, Spotify artist pages, songs, etc. or quick add to library
Search page and categories
Open chat vs friends chat, friends and friends of friends
Potential rebranding/different use of colors
Building clip/non live video pages
Video pop out layover (like Twitch and YouTube)
"Now playing," linking to actual Spotify track
Friend badges - show who's a direct friend, 2nd connection, artist, etc.