Kevin He — Work

Kevin He —


A communication designer focused on building empathetic products using visuals, data, and interactions.

Spotify Concerts




An UI/product exploration of what a livestreamed music concert feature for Spotify could look in their user interface.




Summer 2020
UI/UX  + Product Design

Prototype made in Figma
Process deck deliverable crafted in Keynote

Created as part of the Design Collective Alpha Cohort. Many thanks to Brian Lin, David Lie-Tjauw, and Jessica Ko.



INTRO


With the rise of COVID-19 in early 2020, concerts were quickly cancelled to prevent the spread of the disease. However, I — like many others — felt that so much bonding and unity was lost without concerts.

Inspired by what Twitch and Youtube had been doing with livestreamed music for charity, I felt that livestream concerts would be an amazing product exploration for Spotify.

GOALS


  • To create a safe, virtual space for people to come together and listen to live music from their favorite artists.

  • Create a platform for people to support and donate to charitable causes that benefit the wider world.

  • Help Spotify maintain its competitive advantage in the music market while making a splash in the livestreaming market to diversify its product offerings while increasing revenue.

  • Makes Spotify Premium even more tantalizing with Concerts as an additional product feature to their subscription service.



SOLUTION


To create a virtual live concert venue exclusively on Spotify that serves as a platform for both artists and their communities to bond and benefit the wider world.




FINAL PROTOTYPE







I wanted to showcase all the available concerts as cards each with their own individual and electric flair. 

These cards are all interactive based off of Spotify’s own hover states. You can choose to enter the concert, follow the artist for updates, or see more options.



For the interior concert venue, there’s a major focus on the video livestream with a live-chat feature that adds levels of hype and excitement to the stream. Additionally, below is a short about section detailing the contents of the stream and the headlining artist. Finally, there’s a CTA calling for viewers to donate and contribute to the charitable cause the concert is supporting.



RESEARCH



Spotify

First, I looked towards Spotify’s current interface to see how I could use existing elements and reframe them to fit in Concerts. I wanted to see if and how the branding could be conducive to livestreams, and I settled on using the modular Radio tab as a design I could work with.



Twitch and Youtube
Next, I looked at Spotify’s main competition in the livestreamed music market: Twitch and Youtube. They both focus on primarily showing a large video stream while an ephemeral chat component has comments from other viewers of the stream sliding by in real-time. This combination creates a cohesive, organic community that invites users to participate in the stream.



INITIAL ITERATIONS


From here, I knew I wanted to use a lot of Spotify’s current look because of their strong design language as well as their flexible yet cohesive interface.

I used bits and pieces of elements found in other places of Spotify to make it on brand and cohesive as possible. I also tried merging concepts from both Twitch, Youtube, and other streaming/social platforms into the interface to experiment with the look and feel of this channel.


I built wireframes off of screenshots of Spotify’s current interface and repurposed them to house Concerts. I took inspiration from other livestreaming platforms and tried applying their feel to Spotify’s grid.

I also decided to slide Concerts under Radio as a separate product offering. I ended up recreating a ticket stub icon found in the Artist section and gave it a new purpose with Concerts.



CONCERT CARDS


For the Concert Cards, I wanted to use the visual elements and style of Spotify’s “A Decade Wrapped” series. I knew I wanted these cards to be electric, eye-catching, and popping to draw in users. 

I ended up using a large, repeating header image similar to stacked albums to represent a hint at a sense of movement. I also decided on using a bold, contrasting typography to emphasize these headliners and give them energy and vibrance.





Selected Works
    > Level—Up    
    > Spotify Concerts
    > AR Campus Circulator
    > The Unkillable Demon King
    > HTML Display Ads
    > Emotions as Data

Scrapbook
    > Archive
    > Illustrations

Info
    > About Me
    > Contact Form