My Role: UX Research, UX Design, UI Design, Usability Testing
Tools Used: Adobe XD, Adobe Photoshop, Google Forms, Zoom
My Role: UX Research, UX Design, UI Design, Usability Testing
Tools Used: Adobe XD, Adobe Photoshop, Google Forms, Zoom
"Using an application or a website should feel as natural as the sand between your toes."
"Using an application or a website should feel as natural as the sand between your toes."
"Using an application or a website should feel as natural as the sand between your toes."
VINO'DOWD
Spotify
Add Feature to App
The Challenge
My Role: UX Design, UI Design, UX Research, Testing, Prototype
Timeframe: Team of four completed the challenge in two weeks
Tools Used: Adobe XD, Adobe Photoshop, Miro, Google Suite
Spotify is the most popular music streaming service with almost 300 million subscribers.
Artists on Spotify are paid using a pay-per-stream model, this does not help lesser-known artists on the platform which have a significantly smaller number of streams resulting in very little revenue. In addition, the Covid-19 pandemic has reduced or eliminated artists' ability to make money from live performances.
As a team, we all acknowledged that this was a worthy cause and presented an opportunity to find a solution that would benefit musicians and shows that Spotify cares about artists.
We defined our challenge as a way for musicians on Spotify to gain financial support from fans in order to increase revenue from the platform. In the end, we believe we create an easy-to-use feature that encouraged users to support the artists they loved. Spotify’s mission statement already states that they are giving artists an opportunity to live off their art, we believe our new feature added a new dimension to this statement and increases the benefit for more musicians.
Research
Competitive / Comparative Analysis
The competitive and comparative analysis performed by the team revealed that none of the music streaming services currently offered a way to donate to artists. This confirmed to us that the feature we wanted to add to Spotify was not only needed for artists but needed for Spotify to complete their mission statement.
We also learned that other social networking donation features received the most donations when the process could be completed with the fewest amount of clicks.
Since Spotify has significantly more users than the nearest competitor we realized that if successfully implemented, this feature could have a real impact on artists' income and ability to do what they love.
Surveys
The team conducted surveys with forty-nine different users of streaming music services to evaluate the way they used the service, how much they valued the service and how much they donated to artists, if at all. The questions were presented as multiple choice and the results are as follows.
Live Interviews
Interviews were conducted with eight Spotify users so that we could find out what motivates them to support their favorite artists and how they are doing that currently, if at all.
Synthesizing Findings
Interviews were conducted with eight Spotify users so that we could find out what motivates them to support their favorite artists and how they are doing that currently, if at all.
Key Findings
-
Convenience: one-click access, existing payment platform, multiple ways to donate
-
Reasons to donate: Understanding that the more needy the artist, the more motivated the user would be to donate
-
Proceeds handling: Concern with how and what percentage of the donations would be being forwarded to artists
-
Donation size: small and frequent were widely preferred
Personas and Problem/Solution Statement
Meet Joseph
After synthesizing the data, we developed a persona that represents Spotify users interested in supporting artists. The team kept this persona in mind while developing the giveback feature to ensure that it would fill all of their needs.
Problem
Spotify users need a convenient and direct way to donate funds to their favorite artist so that musicians in need are supported and can continue to create content.
Solution
We will design a microdonation feature within Spotify directly connecting users to their favorite artists so that users can easily support them.
-
Site popularity could be increased by letting people know that store carries a wide variety of items that are hard to get
-
Store known for excellent customer service
Information Architecture
Product Feature Roadmap
After a lengthy discussion, the team created a product feature roadmap to identify elements that would make up the functional components of GiveBack.
-
Store staff high product knowledge level is important
-
Owner ‘Toy picks of the month’ suggestion
Proposed User Flow for New Feature
The team created a product feature roadmap to identify elements that would make up the functional components of the new GiveBack feature.
Takeaway
Once the initial donation setup is completed, users will not be bothered by repetitive questions or clicks while enjoying the Spotify application.
Design
Sketchs
At this point, the team had enough information to begin to sketch designs and begin to visualize how the feature would work. After reviewing everyone's sketches, the team agreed that we were ready to start creating black and white wireframes.
Wireframes
Using the sketches and product feature map as a starting point, the team created a series of wireframes to represent the flow of sscreens.
UI Kit & Style Guide
The team created a UI kit that mirrored the same the look and feel of Spotify. We used Spotify's Covid-19 initiative to help artists in need as a guide and Spotify's 2020 Design Principles as a guide while making color and typography choices.
Protoytpe 1: Usability Testing
The team recruited eight Spotify users to test the prototype and provide feedback on navigation and design.
Testing Tasks:
-
Locate the GiveBack icon and navigate to the About page
-
Setup GiveBack payment options
-
Complete a donation to an artist from the music play screen
Additional Surveys and Testing Results
In addition to the Google Form with testing instructions and a SUS test, we sent several additional surveys to get feedback from users on icon preference, GiveBack button placement and the About page UX text.
Key Findings
-
It works! 100% of users were able to complete the suggested task with our prototype
-
Inefficient icon! The GiveBack icon survey produced negative results, which lead us to continue designing icons
-
Keep it positive! Positive copy empowering users and artists was much more effective than serious copy that described what a difficult time it is for musicians during the pandemic
SUS Test Results
Our System Usability Scale testing produced excellent results, reinforcing that our design was headed in the right direction.
The test results indicated that both the ease of use and emotional draw of giving to artists were showing that the feature was working as planned.
Protoytpe 2: Usability Testing
Again, we sent the test users a script with a specific set of tasks and collected their feedback. The tasks revolved around familiarizing themselves with the reward system, purchasing products and writing a review.
Response to Test Feedback:
As functionality was not an issue for our test users, my team began to focus on honing the copy and addressing feedback we received.
-
About page copy revised to be more positive and informative
-
Introduction of pop-up informing users of GiveBack rollout
-
Payment flow designed in higher fidelity to be similar to Spotify's UI
User Testing:
We sent this second prototype to nine more Spotify users with accompanying surveys. This test requested users to complete the same tasks as the first round of testing, and we collected general feedback.
The surveys evaluated:
-
UI element placement options for the icon
-
Icon alternatives
-
Understandability of About GiveBack page copy
-
The usefulness of added tutorial flow
Test and Survey Response:
The second round of testing resulted in additional insights.
-
About page copy was difficult to read and seemed too lengthy
-
Several UI elements were too small to decipher
-
Need for further clarity regarding the frequency of GiveBack donations
SUS Test Results:
The second SUS test earned even higher marks than the first one. Our team had created a new feature that tested as effective and usable.
After collecting user feedback about the second prototype, my team and I implemented these changes to improve the final prototype.
-
About page segmented into colored cards to increase and encourage readability
-
Clarified giving frequency issues
-
UI element placements confirmed and corrected
-
GiveBack icon design and placement finalized
Next Steps
My team and I were happy with the usability testing results of the final version and feel that we completed our goal of creating a way for fans to support their favorite artists. Future additions to this feature could include monthly donations, integration with social networking apps and local band discovery and support.