SPOTIFY: Info architecture & NAV RE-DESIGN
Optimal Workshop, Draw.io, Illustrator, Adobe XD.
Re-structure Spotify’s mobile app for two key tasks. Use various research methods to inform the creation of wireframes for Spotify's mobile application for "Playing music on the U.S. top charts."
1. Began with content audit. By doing a content inventory of the application, I was able to understand the current navigation structure. Additionally, this process revealed content gaps and repetitive content.
2. Card sort testing to inform sitemap navigation (see below). Card sort results from my sample revealed user’s mental models and informed the navigation structure and hierarchy. Competitive research aided in sitemap navigation as well.
3. Info architecture testing. Using Optimal Workshop, I tested the info architecture by viewing participants’ optimal path in completing two key tasks: (1) listen to music trending on U.S. top charts & (2) discover artists similar to an artist you love.
Results validated the structure and informed changes. For example, 50% of participants approached discovering similar artists one way while the other 50% approached it another way. This insight informed the design of the info architecture to include both paths.
4. High fidelity wireframes with annotations (see below). In Adobe XD, I created high fidelity wireframes with annotations for interactions to account for navigation, features, and utilities.
5. First-click usability testing. Using Optimal Workshop I tested the wireframes to see where users first clicked when approaching both key tasks. Results revealed both tasks had above a 70% success rate, reaching above the testing benchmark of 60%.
6. Future/Limitations & Design Iteration. Results from first-click testing informed changes for the next design iteration. The framing of questions and prompts for first-click testing could improve to allow for more un-biased results. A larger sample size would have increased the reliability of results.