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.

Visualizing music taste with Vizify

Designing a Web Application and Visual Language that uses Spotify’s API to generate personalized data visualizations.