Spectrum Music is the second project completed as a part of my courses for the Google UX Design certificate program. With my second project of the course I approached the designing of the website by making components and creating a small scale design system. The sticker sheet with all the design elements is included in the case study. I took design inspiration from YouTube Music and other music streaming platforms.
The main focus was designing a website, but to showcase responsive web design and for viewing on different devices, I made a tablet sized version and a mobile sized version, the tablet and mobile versions are not touched on much in this case study but can be viewed upon request.
Product: Spectrum Music is a music streaming website that gives listeners creative ways to discover new music, such as a "Musical Heat Map", "Artist Blend", and a "Feed".
Project Duration: March 2022 - May 2022
The Problem: Users of current music streaming options are given stale and common ways to discover new music, while also having difficulty deciding on the best music for the moment with the endless genres and options available to choose from.
The Goal: Spectrum brings users fun, personalized, and unique ways to discover new music, while also providing listeners with curated playlist and mood options.
My Role: Lead UX/UI Designer, UX Researcher
Responsibilities: Conducted interviews, created paper and digital wireframes, designed low and high fidelity prototypes, conducted usability studies and iterated on designs.
Tools Used: Adobe XD, Figma, and pen and paper.
Research
Interviews
I conducted interviews over the phone with intentions of learning when people generally listen to music, where they listen to their music, why they listen to music and with what platforms use to listen and discover music. I interviewed people in my network with diverse backgrounds and age ranges to help me answer these questions.
The interviewees taught me a lot about their music listening habits and gave me insight into what users are looking for from a music streaming service, such as most users listen to music while in their cars or while doing housework.
From these new insights I identified a primary user group as those who use music to set a mood and listen to music while doing activities throughout their days.
User Pain Points
After completion of the interviews, I created four pain points that I wanted to focus on and felt addressed users main issues while listening to music and using music streaming platforms.
"They recommend a bunch of stuff, they throw a lot against the wall to see what sticks, give me same stuff."
"I don't like when you do pick an artist radio that the music is not very diverse often hear the same songs a lot, algorithm not great for finding new music."
Personas and Empahty Maps
Once all the information from the interviews were analyzed and synthesized, I created two personas that I feel represent the general users of music streaming services and their goals and frustrations. Using the personas, I created empathy maps to better understand the user and where best to address the paint points.
Persona 1 Empahty Map
Persona 2 Empahty Map
Competitive Audit
The next step in the design process was to conduct a competitive audit. I looked at four companies: three of the companies are direct competitors, YouTube Music, Spotify, and Soundcloud, the third company, Pandora, is an indirect competitor. I gained valuable insight into, not only these companies business models and strategies, but I took notes of their website and app layouts, navigation, features, and user offerings. Please click on the link to see the analysis of each.
Low-Fidelity Design
Pen and Paper Sketches
I drafted sketches for all pages of Spectrum with all three platform sizes that I would be designing for the second project of my courses. Sketching out the designs is really helpful for me to come up multiple iterations and to easily scratch and create new options.
Low-Fidelity Wireframes
The initial designs incorporated a side navigation bar which gave users a glimpse of what categories the page included as well as a way to easily navigate to those sections of the pages. The side navigation bar was a feature I thought would solve the endless scrolling of categories that many of the competitors music platforms implement.
One main point derived from user research was that users enjoyed discovering new music and liked finding similar artists to those they currently listen to. To help alleviate this pain point I added many features to the site such as, "Artist Blend", a "similar sounds" category, and playlists that include users favorite artists.
Another way for users to discover new music on Spectrum is the "Feed", which gives users the opportunity to post their daily music journey, as well as offers users the chance to see what others are listening to throughout their days.
High-Fidelity Design
High-Fidelity Mockups
From the usability studies emerged themes and helpful insights I used to improve the design of Spectrum. One of those themes was the side navigation wasn't something users were used to and added confusion, "I didn't realize the side navigation was apart of the website."
I still wanted to incorporate a way for users to easily navigate to different sections of the page without having to scroll, to accomplish this I added drop-down menus to the top navigation bar, which can be seen in the design system below. The drop-down menu navigation bar was received much better by users of the second usability study.
For this project I created a small scale design system to maintain consistency throughout the website. I also created components for the navigation bar, music bar, and all the icon templates used throughout the site. Using components and component instances allowed for easy adjustments to be made to all aspects of the site at once.
High-Fidelity Prototype
Spectrum's high fidelity prototype offers users an enjoyable music streaming platform experience, with many different ways to navigate through the site, listen to and discover new music.
The High-Fidelity prototype can be enjoyed here.
All High Fidelity Spectrum pages.
Takeaways
Impact
What I learned
Spectrum reviewers were enthusiastic about all of the creative ways to discover music and how seamlessly the website flowed. The drop-down menu navigation bar felt useful and helpful to some but to others it seemed incomplete. Overall I feel I created a website that is enjoyable to use, and solves user pain points with creative music discovery features and offers plenty of personalized music listening options.
"I like that you can go about listening to your music in variety of ways, listen to this artist or specific album or artist in a playlist, discover what's new, discover new playlists, seems like a lot of ways to get what you want musically, don't have to put much effort into it."
With this second project I continued to learn more about the design process and also learned a new design program in Adobe XD, which has some really useful time saving features. For Spectrum, I felt by incorporating hover states to some of the main components of the site, it added a welcomed design subtlety that enhanced the flow of the site.
Next Steps
The next steps for this project I would take to better refine the website include; adjusting the navigation bar to allow users to select a drop-down tab from the menu that is away from their current page and be navigated to that section of the selected page, add
If this project peaked your interest and you want to learn more, or just chat, feel free to contact me.
alexconiloguedesign@gmail.com, 208-283-3079