Spotify (UX/UI) — The Brief


For this project we were asked to pick an exisiting app and rework a single task. A major objective of the project was to work within the exisiting design system and rethink the task by adding or refining functionality.




Pain Point

As a recent Spotify convert, a point of frustration for me has been how access to content I’ve interacted with feels opaque and in many cases takes a backseat to content currated by Spotify. My solution was two-fold; (01) improve access to content users have interacted with directly by rethinking the user’s library, and (02) foreground that content over content curated by Spotify. I began by roughly wireframing the exisiting application and user flow to develop a better understanding of the current design system.




Concepts

Once I had a better grasp of the current design system outlined my frustrations with the current application, I began putting together rough wireframes of concepts that I felt solved the issues I was hoping to address.



Concept 01
Concept 01 (left) reorganizes the primary navigation in a way I felt improved button placement, gives the users more options in the main library screen, and prioritizes user’s content on artist pages. Users are able to toggle between identically organized Music and Podcast libraries usings a drop down in the main library screens.





Concept 02 (right) rethinks the primary navigation bar—allowing the user to toggle between music and podcast home screens—and shifts the library to the top of the home screen as a permenant side-scrolling fixture. Search is moved to the main library screens and allows users to search within each catagory.





Conclusion

While Concept 02 was interesting, and more of a radical shift, Concept 01 felt like a better fit with Spotify’s design system. In the final design, the drop-down menu that allowed users to toggle between music and podcast libraries in the main library screen was dropped and in favor of a solution similar to the current application. Type spacing was also opened up in the text below the icons in the main navigation bar to improve readability.