Objective:
Create the user experience for a Spotify feature that allows users to play audio visualizers with their music.
Tools:
Figma & Javascript
Role:
UX Designer
Duration:
October 2024-December 2024
Mission Statement:
Spotify Scopes is a new Spotify feature that allows users to play audio visualizers with their music, and project them to larger screens. The goal of Spotify Scopes is to help users create their own unforgettable auditory and visual experience whether it be with a party of friends or just setting the ambience for a night in.
Who is it for?
Spotify Scopes is meant to connect people who are interested in the intersection of music and visuals. The extension provides users with the ability to play audio visualizers along with their music in the Spotify app. Users are also able to screencast their visualizers to a larger screen. Spotify Scopes gives users a more immersive way to listen to music, whether it be for creating an exciting atmosphere at a party or a chill vibe for studying.
A little more background...
All of the "scopes" are powered by Javascript, meaning that anyone with some programming knowledge can easily create their own. Spotify Scopes allows users to chose from visualizers already uploaded to the community as well upload their own to either share or keep private.
Sketches and wireframes
The Spotify Scopes extensions can be accessed through either Spotify Jams or a personal playlist/album. I created low fidelity sketches and high fidelity wireframes using the Spotify UI as well as AI generated images as examples of what these audio visualizers might look like.
Final Screens
The final screens emulate the user's journey through Spotify Scopes. The user starts at their Spotify Jam and is able to apply a private visualizer to their jam or chose from one uploaded for the public. The user also has the option to upload their own. Once the visualizer is launched, the user can cast it to a larger screen and minimize it on their phone.
Proof of Concept
I didn't want to stop at building the UI. I wanted to create my own Javascript audio visualizer as a proof of concept. Below, you can interact with the visualizer that I built.