overview
Soundpruf is a service that collects a user’s music listening data from Spotify and displays it in the form of charts and graphs.
The team was contracted to redesign the web application’s UI as well as design key features such as a search function, profile page, and an authentication page.
Timeline: 20 days
the team
Jeremy Coleman • Christine Idrovo • Matt Zlotnick • Sam Colonna
the tools
Figma • Trello • Miro • Zeplin • Keynote
the methods
Agile Framework • Screener Survey • User Interviews • Heuristic Evaluation • Competitive Analysis • Affinity Mapping • Persona Development • Feature Prioritization • Design Studio • Rapid Prototyping • Usability Testing
my role
Scrum Master • UX Researcher • UX/UI Designer
The existing Soundpruf interface
the problem
At the time our team was contracted, Soundpruf’s web application had severe limitations that negatively affected the user’s experience:
Users could only compare their data with the whole of the Soundpruf community, making their data irrelevant
Soundpruf did not allow for the creation of a profile independent of the user’s Spotify account
There was no existing search function, making the application difficult to navigate
the process
1 discover
Screener Survey • User Interviews • Competitive Analysis • Heuristic Analysis
2 define
Affinity Mapping • Identification of Trends & Insights • Persona Development • Problem Statement Formulation
design 3
MoSCoW Map/Feature Prioritization • Design Studio • Mid Fi Wireframing • Mid Fi Prototyping • Usability Testing
deliver 4
Hi Fi Mockup • Hi Fi Prototyping • Usability Testing • Stakeholder Presentation • Handoff
1 discover
In order to shed light on how best to optimize Soundpruf’s offerings, the team conducted 13 user interviews with both current Soundpruf users as well as users of Spotify Wrapped, a Soundpruf competitor.
Using Affinity Mapping to reveal trends, we learned that:
Users want their listening data visually represented in a concise, yet meaningful way
Users seek to connect with others through their shared music tastes
Users need help discovering new music
Analysis
Competitive/Comparative
The team also researched direct and indirect competitors in order to understand how other companies approached the problem space, and where the opportunities lay for Soundpruf to distinguish itself.
Heuristics
Finally, the team looked at the existing Soundpruf web application in order to uncover where the current product had room for improvement in providing the optimal user experience. We used the Nielsen Norman Group’s 10 Usability Heuristics for User Interface Design as the standard against which we evaluated the application.
2 define
The team used the insights gleaned from our interviews to craft two personas representing both the seasoned and casual users. These personas would later be used to guide our design process
Joaquin’s pain points include:
The site’s utility is unclear
The data visualizations are hard to interpret
He has very limited control over how the data is displayed
Jocelyn’s pain points include:
It’s difficult to find new music
She wishes Spotify Wrapped came out more than once per year
She feels vulnerable sharing her music tastes with others
Problem Statement
Joaquin and Jocelyn are frustrated by how their listening data feels difficult to interpret.
How might we help them monitor their listening habits in a way that is comprehensive enough for Joaquin, yet accessible enough for Jocelyn?
3 design
Once our research was complete, we set about prioritizing those features we felt were essential to include in our final product.
Using the MoSCoW Method, the team categorized features in terms of the impact they would have on the user’s experience as well as the effort required for their implementation.
In addition to specified deliverables, we looked to include:
Onboarding that would explain the application’s utility
The ability to add friends, making the experience of comparing tastes more social
A filter function and graph toggle allowing the user to choose what type of data was being displayed and with whom they were comparing
A badge showcase allowing the user to view and display their achievements
A hover function displaying specific listening statistics and details when the user hovers over certain portions of the graph
These features, we concluded, were necessary in order to make Soundpruf’s key offering, data visualizations, truly meaningful to the user.
explore page
The Explore Page uses a mind map-style graphic to suggest similar artists based on the most popular search result
profile page
The Profile Page allows visitors to view a user’s history and badges, view and compare listening statistics and request them as a friend.
insights page
The Insights/Home Page went through multiple iterations. The biggest challenge came in designing the filter function.
We sought to provide the user control over:
the user(s) with whom they were comparing their data
the time frame over which the data was measured
the music element being measured (song, artist, genre)
the form of graph through which their data was visualized
All of this needed to be represented in a way that was both concise and intuitive.
The final iteration of the exhaustive (and exhausting) filter function
4 deliver
Prototype
usability test results
Our usability tests revealed that, though the function of the graphs was intuitive enough, navigating the application was still somewhat difficult.
Users expected there to be multiple pathways leading to artist and friend profiles.
Next Steps
Iterate
As our usability tests revealed, users expected multiple pathways to their destination. In order to make the application as easy to navigate as possible, all expected pathways would need to be accounted for and built out.
Build
Giving users even more control over how they interact with Soundpruf would only increase its appeal. By building out a Settings page, the user has the opportunity to choose what information is made public or private.
Connect
By establishing a social media presence, Soundpruf can reach a wider audience. Social media provides the opportunity for free publicity whether through a Soundpruf account, or by allowing users to share statistics and graphics directly to their chosen platform.