SPOTIFY Info architecture & NAVIGATION RE-STRUCTURE

TOOLS

Optimal Workshop, Draw.io, Illustrator, Adobe XD.

objective

Re-structure Spotify’s mobile app for 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."

PROCESS

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 my info architecture by viewing participants’ optimal path in completing two key tasks: listen to music trending on U.S. top charts & 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 informed the design of the info architecture to include both paths.

4. Wireframing & interaction design (see below). In Adobe XD, I created high fidelity wireframes with annotations for interactions to account for navigation, features, and utilities.

Task1_Wireframes.jpg
 
 

5. First-click usability testing. Using Optimal Workshop I tested the wireframes to see where users first clicked when approaching both key tasks.

6. Future & limitations. 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.