Feature redesign and addition
Folder Proposal
A proposal of a new feature based on extensive user research. Now anyone can enjoy making and editing folders on mobile!
Process
Project by Shona O’Bryant
Created in Jan-April 2023 part time
Software used: Figma, fig jam, zoom, google suite
Skills used: System design, UI/UX Design and UX Research
-
Large scale survey to determine target areas
In depth interviewsIn depth interviews
Persona creation to ground design decisions
Usability testing with current Spotify system
Competitor research
-
Task and user flows
Low, mid, high fidelity wireframes
Develop functioning prototype
-
Perform usability testing
Compile findings
-
Determine changes to make and importance
Iterate on challenges
Package deliverables
Key aspects
Multiple entry points to create a folder
Addressing one of the main concerns about folders, that there was only one entry point to create folders (and it was only on desktop!).
In this redesign, there is at least 5 entry points (on mobile) to create a folder that are scattered through the app, mimicking other Spotify flows.
Key aspects
Updated folder UI
The existing folder UI on mobile makes it difficult to quickly identify folders and determine their contents. In addition, the folders don’t offer any additional utility or ✨fun✨.
This redesign includes an accordion folder in the library as well as an easily identifiable image and card.
Key aspects
Easily customizable folder images
In response to research findings that users wanted a better graphic for folders that are easily identifiable and unique but also wanted the ability to customize their experience more, I designed a system where the folder image would be generated by the contents of the folder and easily customizable by users.
Research
Persona based on research
Persona based on quantitative and qualitative feedback on public survey with 31 respondents and in depth interviews with 5 participants.
Main general needs are
less visual clutter
More options to customize their experience
More organization
Specific pain points include
Frustration around the library screen
Frustration about the lack of ability to create or interact with folders
There is a large discrepancy between those who want to user folders and those that currently use folders
Upon further investigation, I found that many people want folders and have been looking for this solution but just weren’t aware of that folders existed
Investigating Spotify’s current solution
I conducted usability tests with the current system to identify pain points. The main ones included:
Only one way to create/edit a folder and only exists on desktop
There is no option to customize folder images and the visuals/flow is burdensome on mobile
No clear indications that making a folder is even possible on Spotify
Design
A key factor was to make multiple entry points to create a folder
This project centrally revolves around improving the folder creation/editing system and bringing it to mobile. Here was the initial user flow for creating a folder
With that system in place, it was time to start wire framing
Here is the transition of the low -> medium -> high -> iteration wireframes of the folder image customization page
Bringing generative images to Spotify folders
Using pre made Spotify tags (all examples in wireframes came for Spotify’s 2022 wrapped), Spotify design language and a generative image technology, unique patterns for each folder is a reality not far from us.
These images not only serve as a way to quickly visually distinguish folders from playlists but also a source of intrigue, customizability and fun!
Test
Conducted usability testing
With 4 total participants. Main pain points that came up from testing were:
Creating a folder in was easy but expressed that a user would have to be familiar with other Spotify's flows to find this easy.
Enjoyed the ability to customize the folders, how the folders looked distinctly different from playlists and the ease of creating fun graphics but had varying feedback on the graphics themselves.
Changing the folder image was easy and fun but said that they wouldn't have known they could change the image.
Some feedback from the testing!
That the folders would help with organization in the library
“I lose a lot of sh*t in my library and if I don’t see it, it disappears to me. Theres a lot of things I would like to listen to again, I just dont want to scroll down 10 scrolls down to find it!”
About the folder graphics
“That so cool! I like that its generative. I like that there are themes but also that I get to customize it- but it doesn’t look like a playlist. Oh this is awesome!“
Iterate
Creating more entry points
After carefully observing how users navigated to create folders, I added a couple new entry points that were originally dead ends for users to create a folder
Original
Iteration
Making some key changes to the image customization
Based on feedback that the color options felt overwhelming, I decreased the number of colors offered. Also in addition to some feedback that some users wanted more simple graphics, I created an option for a default folder icon that is more similar to original solution
Original
Iteration
Directing the user through intrigue
Most users enjoyed the graphic but thought that it was set in stone. This solution includes a badge that is designed to pique interest in the user so that they interact with the badge and are immediately brought to a page where they can edit their folder cover image.
Original
Iteration
Updates
〰️
Updates 〰️
Updates
Since this project, Spotify has updated their folder system!
Spotify desktop application of May 2023 (ability to create/edit folders on mobile does not exist yet
Some of their updates mirror solutions I designed for mobile. Some of these updates include:
Accordion style folder UI
Option to create a playlist through the + icon
Option to play an entire folder
Updates
Mobile updates that could lead to the ability to drag and drop to create folders
The introduction of an “edit” mode in the library and the shaking icons indicate to the user that some elements are customizable. In my research, I found that many people wanted to have the option to drag and drop and this could be the next intuitive step for this update
Still have questions? Contact me or see my full process below
