Onstage music live-streaming

Discovery

Getting started

A look at the industry

To better understand what concertgoers were dealing with, I started researching the live-streaming space. How did music live-streaming fit in specifically? The numbers were astounding. According to a report by Forbes, live-streaming increased by 99 percent between 2019 and 2020 — nearly doubling in one year! COVID-19 played a big part in this, accelerating the shift of real world content to digital which had already been happening.

But the numbers didn’t look so good for musical content. Live music performances ranked toward the bottom of the most popular live-streaming platforms. For instance, "Music and Performances" ranked #20 on Twitch at the time of research, with just 25,944 total viewers per channel.

And while studies proved that millennials — Twitch's largest demographic — were also the largest group of concertgoers, there was still an entire range of people over 40 to account for. Only 20 percent of people over 40 even had a live-streaming subscription of some kind. Statistics like these suggested that there was a problem with engaging concertgoers through current live-streaming offerings.

After going through the survey responses, I set up seven interviews with a wide age range and a variety of musical interests in mind. The interview topics went from the physical to the digital — from live concert habits, to regular, pre-recorded music streaming, to contextual inquiry with a current, dedicated music live-streaming app called Sessions. This would help get participants to think more about which aspects of the real concert experience they wanted to have in the digital.

Early insights

Participants were passionate and outspoken. The responses to my interview questions were powerful. When asked what being at a live concert felt like, one person responded, "just being in the actual room with that sound surrounding your whole body is an other-worldly feeling."

With music live-streaming, people had a lot in common

When asked specifically — what would you look for in a music live-streaming service — people pointed out similar things: something that would have good categories mapped out, a variety of music, and being able to customize music preferences.

I took these findings and began to distill them, first with an affinity map:

Revisiting the problem

So far, I knew that there was an entire range of people over 40 that wasn’t engaging with live-streaming offerings. On top of that, I learned that:

• People expected to see concert info when buying a ticket online
• They prefered to watch live-streams on a large device
• They were more likely to select concerts that were in a visually appealing presentation format, like a card with an image and text or hero image with accompanying copy
• They prefered to organize their music by favorite artist and genre

This helped shape the problem space: how might we engage concertgoers with more immersive live-streaming offerings?

Ideation

Exploring solutions

Turning interview insights into design features

At this point, I had a lot of ideas so I pulled out a pen and paper and sketched out possible ideas, including:

• Concert programs
• Visually engaging virtual tickets
• Artist profiles with featured images
• 3D audio and video settings

These were some of the many ways that concert live-streaming could resemble its real-life counterpart.

A map showing the way back to the users

Exploring a bunch of ideas was inspiring but staying true to the interview insights and personas was still the primary goal. So, I set out to map only the features that users needed with a set of user stories.

This added focus but also helped break down the major needs into the individual features that they were made of. Now I had a rough design blueprint for a minimum viable product. The critical features were:

• Create a profile
• Set music preferences
• Search for concerts
• Get concert info
• Buy tickets
• Watch a concert

Staying organized

Before moving on to visual design, I had to ensure that all of these features flowed in a logical way. I grouped the critical features into 3 red routes: personalize account, buy a concert ticket, and watch a concert. I would later change the wording of these routes as I went back over the designs. For now, this was enough to create user flows for the upcoming design.

Visual design

Creating the music live-streaming experience

Refining critical features into red routes

I started by sketching out the three red routes based on the user flows: to sign up, find and purchase a concert, and watch a concert.

A usability test is worth 1000 Figma auto-saves

Before going any further, I wanted to test the usability of these initial routes. Marvel offered a great paper prototyping tool called POP, which I used to create an initial prototype.

I got five unsuspecting participants to take the prototype for a test-drive. I’m glad I was able to test this early in the visual design stage — the results revealed some serious flaws. First, the app seemed like it was for buying tickets to actual live concerts instead of live-streams. Second, it wasn’t clear how the search functionality would work. Finally, participants weren’t sure when the concerts were “going live.” This was a good time for improvement and there were still several opportunities ahead to hone the design.

Wireframing the three red routes

Using the findings from guerrilla testing, I moved on to wireframing the design.

Some of the main features I added were:

• A search input to find favorite artists during onboarding instead of a massive list of artists which would overwhelm users
• Date filter modals to address the edge case of scrolling through endless concert listings
• A cart functionality to support people’s desire for a more realistic concert experience, like buying concert tickets in real life
• Helper modals explaining video player functionality to first-time users
• Audio and video settings for recreating a virtual concert environment, like room sound, 3D audio, and 3D video

Breathing life into the design through branding and a style guide

Like previous parts of the project, having a foundation before making a big design decision was crucial. Even though I fixed the major usability issues for each red route and the logic checked out, the design still didn’t have an identity; it was still a concept and not a product.

I approached this by creating a branding and style guide. This was a large endeavor that included 8 unique parts: a brand platform, logo and logotype, color palette, typography, grid system, icons, components, and images. The idea was to bring the design to life and give it a vision that concertgoers could align with. The result was Onstage, an app which brought the live concert experience to users in their home. This connected full circle with the initial discovery of the problem space by extending live concert streaming offerings to a wider range of concertgoers, based on their preferences and needs.

The entire style guide was a hefty 33-page affair, but here are some of the critical parts:

Leveling up to high fidelity

Using the style guide, I created high fidelity screens for the red routes:

Some of the main features I added here were:

• 1, 2, 3a, 3b: the logo for login
• the color scheme throughout the design
• 15, 28, 30b: Empty state to engage users and encourage exploration of the interface
• 13, 24: A swipe to delete functionality
• 27: Success state to empower actions such as purchasing concerts
• 19a, 20a: An interactive, scrollable calendar to filter by date on a separate page instead of a modal

Staying true to the fans with more usability testing

I was getting close to the end of the project and all that was left was to test and iterate on the high fidelity design. I built another prototype, this time with animations and more complex interactions to add delight to all of the functionality. There were two usability tests with a total of 13 participants. The critical prioritized recommendations were: to make artist and genre preferences easier to find, redesign the search flow to make it clearer, and to make audio and video settings easier to access from the video player. I made these adjustments before delivering the final prototype.

Outcome and lessons

The end of the story, for now

The project ended with a final prototype of the app, Onstage. You can give it a test-drive here. Its mission was to provide an immersive live concert experience to music fans, in the comfort of their home. The project was well-received and people hoped it would go into development so that they could view actual concerts.

There were also some important lessons to address:

• Modeling the concert venue: It’s challenging to model the concert venue, an essential part of the vibe of live concerts, in the digital space. “Watch” worked as a spot to house the purchased tickets and video player but not everybody imagined that to be the structure in the app for finally “attending” the concert virtually.
• Handling the infinite scrolling edge case: It’s particularly hard to address this edge case in a design. While it’s possible to set an Instagram-as-of-2018 limit to the endless scroll, there still needs to be sufficient content to make the prototype convey that it offers extensive personalized musical content.

Next steps

I would certainly like to develop a working product in the future and hope that the virtual concerts of tomorrow will support live music fans and artists alike. Let’s see what happens.