Vizify:
Visualizing music taste
Designing a Web Application and Visual Language that uses Spotify’s API to generate personalized data visualizations.
Thesis
UI design
UX design
Research
Overview
Timeline
6 months
Type
Independent
Capstone
My Role
UX Design
UI Design
Research
Tools
Adobe CC
Figma
HTML/CSS
Problem
Avid music-lovers want to feel a sense of connection to one another through sharing their taste in music, but they cannot because of how digital music-streaming platforms can be isolating from other users. An online survey concluded that 50% of all music streamers from all platforms were not satisfied with their current provider's streaming data insights.
How might we
How might we allow Spotify users to get personalized visualizations based on their music taste at any time that recognize users unique tastes?
Solution: a web application and visual language that specifically caters to those music-loving individuals.
Vizify highlights their habits and connects them to their streaming data in a way that they can better understand their relationship with their favourite music and share it with others in the community
Design principles
Hierarchy of needs
Meeting a base-level of needs before addressing needs that are higher up on the pyramid. Users base level needs were met in the personas, persona spectrum and applied design considerations to the solution.
User research based designing
A design process based on consensus building, group decision making, and extensive iteration. Conducting various rounds of user interviews and silent, digital remote critique sessions helped inform pain points and visual choices for the final design.
Aesthetic usability affect
Creating well organized and aesthetically pleasing designs to ease user’s experience. In phase two of my research, I focused on making designs that are clean, fun aesthetically pleasing to look at based on user feedback and secondary research.
The research was broken up into two phases
Phase one addresses users pain points and further diving into the problem space, I realized they needed a way to see their Spotify listening results in a way that made them feel unique.
Phase two focuses on what the solution would form as, and how it would look and feel, while following user feedback.
Phase one: finding out what users wanted and needed
I started by creating a list of assumptions regarding the proposed problem that I later turned into research questions. To find answers for the research questions, different primary and secondary research methods were assigned to each question.
Turning Assumptions into Research Questions
Research Methods
Interviews
Focus: Understanding the user’s Spotify listening habits
Online Survey
Focus: Understanding target user demographics
Literature Review
Focus: Understanding the limitations of the Spotify API for the solution
Key Insights
Users want something digestible and nice to look at.
Some users don’t care about sharing their music streaming data.
The Spotify API will not provide all the information our users are looking for.
Users want a personal experience that is connected to specific time ranges.
Phase two: solution form, look and feel
Keeping the findings from Research Phase 1 in mind I further explored what would be included in the solution such as content, visual direction, data visualization and what type of data would be included. Breaking down from areas of research to research questions with designated research methods helped organize my findings to turn into design considerations and requirements.
Areas of Research → Research Questions → Research Methods
Research area insights
Visual design
The visual design research consisted of looking at current design trends and figuring out which trends would work best with the proposed solution, alongside figuring out how to visualize the data itself.
Code
Alongside a thorough analysis of the Spotify API’s capabilities, a competitive analysis of projects in a similar space and coding explorations were completed.
Color theory
The research conducted included a literary review of how colour, emotion and music are perceived and interpreted to the human mind, and how they can be linked to one another.
NOTE: This area was added after the Personality Types research area did not get implemented.
Personality types
The research conducted included a deep dive into the inner-workings of the Myers-Briggs Personality Type Indicator, The Big 5, and how both of these personality type indicators have related to music in different studies conducted.
NOTE: This area was removed after research phase had been conducted.
Condensing research and synthesizing insights
After completing two phases of research and synthesizing that information, I further broke it down into a competitive analysis, persona spectrum, personas and user journeys. I then took the insights and turned them into design considerations for the final solution.
Competitive analysis
I conducted a competitive analysis to help figure out gaps in the current market. last.fm was a clear front-runner for best competitor, but it did not use the Spotify API as it used it’s own. These insights lead me to the solution of creating a shorter experience that doubled as a saveable jpeg for easier sharing.
Persona spectrum
Taking insights from the surveys and interviews, I grouped different insights into 3 distinct persona types, as a trend of three different types of users emerged after affinity mapping the interview content. I then mapped out how each persona would feel for the following parameters based on interview questions asked.
Personas
Further expanding on the personality types that emerged in the persona spectrum, personas were created that had distinct wants, needs and goals that were backed by evidence found in user interviews.
User journeys
When combining all of the persona's user journeys together, a clear trend emerges that the user's lowest point is the end of their journey, when they realize there is no available solution to their current issue with Spotify. The proposed solution comes in when their mood starts to drop.
Design considerations: how insights affect the solution
From every insight, out came a Design Consideration for the solution with a “why”. This helped turn insights into actions for the final solution.
Solution: aesthetically driven results that suit the users needs
Taking insights from the first and second research phases as well as the research synthesis, I created a final solution that was fun, spunky, and suited the users needs.
Web application
The final site follows the design consideration of being simplistic yet fun to deliver the results.
The original layout followed more of a brutalist/anti-design style. User feedback from conducting two rounds of additional async-design review sessions found that the more simplistic and less brutalist design web application layouts sparked more joy and were easier to use.
Visual language
The visual language is an integral part of the final solution. It takes data extracted from the parameters of Spotify’s API and turns them into a sharable JPEG image. The data shown relates to the colour theory research area as well as shows fun facts such as how popular your taste and how energetic your favourite songs are.
Username data extracted from connecting to Spotify API
Takes users total streamed minutes
Takes users streaming data time and finds the mode. (This is a hypothetical feature, as far as the research uncovered this data cannot be extracted with just the Spotify API alone)
Takes users top 6 streamed albums and makes album art black and white to match the Vizify brand colours as the original colours of the album art would be too off brand
Takes users top 5 streamed songs and takes the song's data and turns it into an HSB colour (more about this on the next page)
Takes users top 50 songs and finds the average level for each of these parameters from all 50 songs to translate to one number
Takes top 50 songs and plots them on a map of Danceability to Valence levels. Songs in a minor key are Vizify Blue, and songs in a major key are Vizify Red
- Username data extracted from connecting to Spotify API
- Takes users total streamed minutes
- Takes users streaming data time and finds the mode. (This is a hypothetical feature, as far as the research uncovered this data cannot be extracted with just the Spotify API alone)
- Takes users top 6 streamed albums and makes album art black and white to match the Vizify brand colours as the original colours of the album art would be too off brand
- Takes users top 5 streamed songs and takes the song's data and turns it into an HSB colour (more about this on the next page)
- Takes users top 50 songs and finds the average level for each of these parameters from all 50 songs to translate to one number
- Takes top 50 songs and plots them on a map of Danceability to Valence levels. Songs in a minor key are Vizify Blue, and songs in a major key are Vizify Red
Brand guide
A Brand Guide was created to ensure usage of the branding and logo were completed correctly and all material under the brand of Vizify felt cohesive and true to itself.
Posters
Print posters were created that follow Vizify’s brand guide and promote the use of the website.
AR Filter
The filter was made with Spark AR Studio and consists of a png of the two Vizify smiley face icons placed on the user’s cheeks.
Stickers
The stickers follow the Vizify branding guide, and include different variations of the smiley face logo as well as different variants of the type logo.
Reflection + final thoughts
Unstructured interviews can lead to new avenues for the proposed solution. Participants felt more comfortable and open to answering questions because the interviews didn’t feel rehearsed, and we could talk about insights that did not come up in the pre-written questions.
Having a well-organized notion document was absolutely crucial to the timeline of this project as all the moving parts worked together and affected each other.
Picking avenues that feel true and authentic to you are important. When I discovered the MBTI-personality types was a dead end, I considered sticking with it because I had already done so much research, but in the end it just didn’t make sense and had to be scrapped, and the solution was better for it.