Vizify
Designing a Web Application and Visual Language that uses Spotify’s API to generate personalized data visualizations.
Visual Language
Web app
Timeline
Nov 2020 -
March 2021
Type
Independent
Capstone
My Role
UX Design
UI Design
Research
Tools
Adobe CC
Figma
HTML/CSS
The Problem
Avid music-lovers have deep-rooted personal ties to their music taste.
They want to feel a sense of connection to their favourite 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?
The Solution
Vizify is 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.
Research
I broke up the research 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.
Research
Phase One
Putting in the work to find what users wanted and needed.
Research Phase One addresses users wants, needs and pain points. 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.
PHase one
Turning Assumptions into Research Questions
PHase one
Research Methods
Interviews
Focus: Understanding the user’s Spotify listening habits
The interviews conducted were unstructured. This type of interview style was used because it allowed the participant to feel at ease and relay better ideas and explanations, which was the outcome goal for this research method. Participants were collected based on their diverse answers to the online survey to ensure that a larger number of different types of user groups would be represented in the research conducted.
Online Survey
Focus: Understanding target user demographics
To better understand the general demographic of people who stream music, an online survey was created and sent out to a wide variety of people. Survey participants either found this survey through Facebook, the IxD community on Microsoft Teams, Twitter and Instagram.
The online survey wielded a whopping 141 participants.
Literature Review
Focus: Understanding the limitations of the Spotify API for the solution
The main area of focus is streaming data, specifically for Spotify users, so the Spotify API integral to understand in order to possibly implement it into the solution. 3 different sources of information were analyzed to help understand the full scope of the API’s capabilities.
PHase one
Key User Insights
Users want something digestible and nice to look at.
Keeping the findings from Research Phase 1 in mind I further explored what would be included in the solution such as content, visuals and what type of data would be included. Breaking down from research questions to areas of research with designated research methods helped organize my findings.
Some users don’t care about sharing their music streaming data.
Although some participants main goal was sharing. This brought to light that there were more than one type of user, with more than one type of goal. This inspired the creation of 3 different personas that will be all mapped against each other.
Supporting Evidence
“I think sharing music publicly on social media is cringey and pretentious” - Interview Participant 3
“I don’t share with some people because they have nothing to add to the conversation” - Interview Participant 4
“I don’t share my taste in music on Social Media” 51.8% of Survey Participants
*NOTE: This finding was not included in the final design due to strong limitations of the Spotify API.
Users want a personal experience that is connected to specific time ranges.
Supporting Evidence
“I think sharing music publicly on social media is “I would love to see how what I listen to mapped out according to seasons. Winter I listened to more moody music” - Interview Participant 3
“The way that Spotify Wrapped does it is so exciting because of the way you move through it, the way it makes it so personal. You are this persons #1 fan and stuff like that, it’s very specific to you” - Interview Participant 5
The Spotify API will not provide all the information our users are looking for.
Due to the restrictions found in the Lit Review that addressed Spotify’s API, this solution may have to exist more in the prototype space.
Supporting Evidence
“Over what time frame the affinities are computed. Valid values: long_term (calculated from several years of data and including all new data as it becomes available), medium_term (approximately last 6 months), short_term (approximately last 4 weeks). Default: medium_term.” This means that gathering data according to the seasons would not be possible.
“For each time range, the top 50 tracks and artists are available for each user.“ This means that the data collected is extremely limited, and one of the pain points found in the Spotify Wrapped Analysis was that the users wanted more data and information about their streaming habits than what is currently offered.
Research
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.
PHase Two
Areas of Research → Research Questions → Research Methods
PHase Two
Research Area Insights
The core of the visual design is integral to what type of data is going to be displayed because through the intersection code and visual design will come a visual language that relays the user’s Spotify data to them.
Research Conducted
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.
The main area of focus is streaming data, specifically for Spotify users, so the Spotify API integral to understand in order to possibly implement it into the solution.
Research Conducted
Alongside a thorough analysis of the Spotify API’s capabilities, a competitive analysis of projects in a similar space and coding explorations were completed.
NOTE: This area was added after the Personality Types research area did not get implemented.
Colour and emotion was a popular and very prominent theme that came up during this research phase. Music is often linked to emotion as well, which made this new area of research a great substitute for Personality Types and music.
Research Conducted
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 removed after research phase had been conducted.
Personality type indicators relating to music taste is not the path this project will be taking because it was not scientifically sound enough to relate them to data in a way that felt meaningful and true to the original objective of creating the project which was to make something fun and positive.
Research Conducted
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.
Research Synthesis
Condensing 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.
Research Synthesis
Competitive Analysis
Gaps in the current market
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.
Research Synthesis
Persona Spectrum
Grouping insights to a 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.
Research Synthesis
Personas
Expanding on the persona spectrum
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.
Research Synthesis
User Journeys
Plotting where the solution comes in
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.
Research Synthesis
Design Considerations
How do the 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.
Prototype
Solution
Delivering 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.
Prototype
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.
Prototype
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
Prototype
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.
Prototype
Supporting
Assets
Supporting additional assets were created to elevate the brand and promote the final solution in a marketing space.
assets
Posters
Print posters were created that follow Vizify’s brand guide and promote the use of the website
The posters use catchy slogans and graphics that represent the end result info graphic that is given to the user in the experience, while having the website link as a call to action.
assets
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
Assets
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.
learnings
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 an extremely 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.