![Image by Eyestetix Studio](https://static.wixstatic.com/media/nsplsh_1719e20c77aa48db87b71f9607e95d06~mv2.jpg/v1/fill/w_636,h_424,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/nsplsh_1719e20c77aa48db87b71f9607e95d06~mv2.jpg)
Spotify Case Study
UI / UX - LoFi Wireframes - HiFi Wireframes - Conceptual
Summary:
A self-assigned concept: I wanted to create a product that would allow Spotify to compete with streaming services and ultimately grow their audience. Titled StudioPass, users would be able to consume live performances, interviews, documentaries, behind-the-scenes content, and more from their favorite artists.
Goals:
-
Create a conceptual expansion to the Spotify app.
-
Use lofi wireframes to experiment with layout and help visualize the StudioPass concept.
-
Allow hifi wireframes to paint a more complete picture of what StudioPass would offer users.
![spotify-studiopass-sessions_01.png](https://static.wixstatic.com/media/16ae17_3e99062fb88f4464bc9788d96a1745ba~mv2.png/v1/fill/w_323,h_557,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/spotify-studiopass-sessions_01.png)
StudioPass
New Feature
My vision of StudioPass is one the brings users closer to the artists and content they love. A hybrid feed of "social media meets streaming content" populates the main screen of StudioPass. Upon arrival, users can navigate through curated videos ranging from live performances to interviews, or explore candid stories posted by content creators.
LoFi Wireframe
![spotify-studiopass-lofi_01.png](https://static.wixstatic.com/media/16ae17_9d442466744d43729db0fa5ab380e2f0~mv2.png/v1/fill/w_306,h_558,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/spotify-studiopass-lofi_01.png)
A Social Feed allows for users to see behind-the-scenes into the lives of their favorite artists, be it in the studio, on tour, or at home.
Featured Cards provide engaging imagery and a brief synopsis of the content.
An Updated Navigation Bar includes a StudioPass icon allowing for quick access to streaming content.
HiFi Wireframe
![spotify-studiopass-hifi_01.png](https://static.wixstatic.com/media/16ae17_ad52da24e26648999f6512e0029e44b9~mv2.png/v1/fill/w_306,h_558,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/spotify-studiopass-hifi_01.png)
Spotify Sessions
Conceptual Streaming Series
To explore how users might engage with video content, I created a fictional show titled Spotify Sessions, a series of intimate live performances ranging all genres. Highlighted here is an Episode Details screen where users can engage with the episode, view other episodes within the series, or browse related content.
LoFi Wireframe
![spotify-studiopass-lofi_02.png](https://static.wixstatic.com/media/16ae17_11fad464a9fc4427a3621193ffb999e8~mv2.png/v1/fill/w_306,h_558,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/spotify-studiopass-lofi_02.png)
A Full Bleed Hero Image creates a visual hierarchy clearly indicating which video the user is about to stream.
Clearly Defined episodes and seasons help categorize content, opposed to their current approach of long lists.
HiFi Wireframe
![spotify-studiopass-hifi_03.png](https://static.wixstatic.com/media/16ae17_1e075ec25dd549b4bac649badc026619~mv2.png/v1/fill/w_306,h_558,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/spotify-studiopass-hifi_03.png)
LoFi Wireframe
![studio-pass_lofi-02.png](https://static.wixstatic.com/media/16ae17_e570aae79a9b4361922811018c88b0f2~mv2.png/v1/fill/w_306,h_558,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/studio-pass_lofi-02.png)
Carousel Sliders highlight suggested streaming content based on user engagement as well as trending content.
Descriptive Meta Data helps users to distinguish the type of content that they are browsing.
HiFi Wireframe
![spotify-studiopass-hifi_04.png](https://static.wixstatic.com/media/16ae17_73c159297b834581b26e72b662bfa1ca~mv2.png/v1/fill/w_306,h_558,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/spotify-studiopass-hifi_04.png)
Home Screen Updates
Curated Content Personalized for Users
Spotify's current home screen focuses on Recently Played content. While there is clear value in this approach, I find a greater opportunity in featuring personalized content. Users have grown aware of a brand's ability to curate content, thus they expect their user experience to reflect their interests and activities. My proposed updates explore suggested content based on time of day, recent listening, and user activity outside of the app.
![spotify-morning_01.png](https://static.wixstatic.com/media/16ae17_1bd6a92cb518401c8c3dfcf46865e6a0~mv2.png/v1/fill/w_306,h_558,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/spotify-morning_01.png)
A Time-Appropriate Grid replaces Recently Played content, suggesting relevant music and podcasts to help the user start their day.
Personalized Carousels include relevant recommendations. In this example, the user finds playlists built for morning commutes.
![spotify-morning_02.png](https://static.wixstatic.com/media/16ae17_49e71585b265480fa3010e39ac98c771~mv2.png/v1/fill/w_306,h_558,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/spotify-morning_02.png)