Designer language

By: Heather Hayes & Taylor Joyner – Holberton Tulsa Cohort 19

Brief Overview of User Experience Design

Embracing the role of UX (User Experience) designers, we embarked on a project to enhance the user experience of the Spotify desktop application. Amidst a host of intriguing user profiles, we found ourselves drawn to the challenges faced by one particular user – Alex. A student with a passion for music, Alex found himself battling several frustrations when trying to use the desktop application Spotify to aid his study sessions. Our task was to devise a solution to Alex's issues, using the wealth of information provided on his persona card. This detailed file offered us a window into Alex’s life, giving us an understanding of his background, habits, goals, wants, needs, and fears. Join us as we delve into the journey of transforming Alex’s user experience.

Meet Alex

a college student with a passion for music and a critical need to maintain focus during his study sessions. While he loves immersing himself in music, his usual song choices are proving to be more of a distraction than an aid, causing him to lose focus. His attempts to switch to non-lyric music are also not helping as the slower tempo is affecting his mood. Alex's goals are clear - he wants to use his noise-canceling headphones to drown out external distractions, particularly his roommates. He's on the hunt for high-tempo music that could help him maintain his focus and give him the motivation to study. To meet these goals, Alex needs existing playlists with no lyrics and a good tempo, and he wants an efficient way to exclude slow-paced music from his search. He desires a refined search function that could help him quickly find playlists matching his requirements - ideally in less than 2 minutes. However, Alex's journey is not without fear. He is unsure of the optimal keywords for his searches and often feels overwhelmed by the number of search results, many of which don't align with his requirements. The challenge is to alleviate these fears and create a seamless, efficient, and satisfying music discovery experience for Alex.

User Journey

Embarking on Alex's Spotify journey, we walk through his footsteps, navigating the application as he would. His journey begins at the homepage where he hesitates before clicking on the 'Browse' tab. Despite his initial confidence, his enthusiasm wanes as he grapples with the search bar. Typing in 'electro focus', he hopes for a straightforward solution. His optimism soon turns to disappointment as he is confronted with a sparse playlist section featuring only three results. After scrolling down and clicking the 'SEE ALL' button, he is relieved to see more options, yet the process of combing through playlist titles is an overwhelming and frustrating endeavor. Deciding on a playlist becomes a guessing game. He clicks on a playlist, reads its description, plays the first few songs, and then backtracks when it's not what he's looking for. He repeats this process until he finally settles on a playlist that 'will do', but it's clear from his exhaustion that the journey has taken its toll. Alex's journey through Spotify is marked by periods of confidence, relief, disappointment, frustration, and exhaustion. It paints a picture of a journey that is far from the seamless and efficient experience that Alex needs. It's our task to turn this around, and we aim to do just that by addressing these issues head-on in our proposed design solutions.

The Process

To empathize with Alex's experience, my partner and I engaged in a hands-on collaborative process. We walked through Alex's journey map, stopping at each pain point to deeply understand his struggles. Our initial discussion was marked by a flurry of questions - Why is Alex facing this issue? What is the underlying problem? How can we address it effectively?

Our brainstorming sessions took place around a whiteboard, a space that nurtured our creative thought process. This visual platform allowed us to express our ideas in a clear, interactive, and engaging manner. It became our idea incubator, holding a dynamic mix of sketches, keywords, mind maps, and concept diagrams that represented our evolving thought process.

In these sessions, we debated, challenged assumptions, and pushed each other's thinking to reach innovative solutions. As we built upon each other's ideas, our collective understanding of the problem deepened, and our solution began to take shape.

Our approach was iterative, always circling back to Alex's persona, his needs, and his journey. The whole process was a lesson in empathy, creativity, and meticulous problem-solving.

In the next sections, we will unveil the result of this process - the solutions we've crafted to enhance Alex's Spotify experience.

Our Solutions

The brainstorming sessions yielded a handful of promising solutions. Each of these aimed to mitigate Alex's pain points and enhance his overall experience with Spotify.

1. Customizable Homepage: We proposed making Spotify's homepage customizable to cater to Alex's preferences. By allowing him to personalize his homepage, we aimed to streamline his search process. This would not only save him time but also make his interaction with Spotify more enjoyable and efficient.

2. Contextual Tutorials: Recognizing Alex's struggles in navigating Spotify, we proposed contextual tutorials. These would pop up as needed, offering insight and guidance on the platform's features. The goal was to empower Alex to use the application more effectively, without forcing him to go through an overwhelming mass of information upfront.

3. Categorized Music: We thought of a feature where music would be categorized into clear, visual stacks, e.g., by song, genre, or playlists. By clicking a category, it would expand to reveal its content. This visual organization would make Spotify's extensive library easier to navigate and more intuitive for Alex.

4. Music Snippets: In order to help Alex find the right music faster, we proposed a feature that allows users to listen to a short 5-10-second preview of songs or playlists. This would enable him to quickly gauge whether the music matches his preferences, saving him the time and frustration of exploring unsuitable options.

After a thorough discussion and analysis, we decided the most effective solution would be to combine two of our ideas: Taylor’s “Stacking Categorized Music” idea and Heather’s “Music Snippet Preview” idea. Categorized music with music snippets aims to address the challenges Alex faces in navigating Spotify’s vast music library and determining which songs or playlists suit his needs without having to fully engage with each one. In this enhanced design, Spotify’s music library would be visually categorized into clear stacks, like songs, genres, or playlists. This approach would make navigation much more intuitive and efficient for Alex. Upon clicking a category, it would expand to reveal its content, providing an easily digestible view of the available options within each category. To further streamline his selection process, we would incorporate “Music Snippets”, enabling Alex to listen to a 5-10 second preview of songs or playlists within the expanded category. This would help him quickly gauge the suitability of music, saving time and reducing frustration. We believe that combining these two solutions could significantly enhance Alex’s Spotify experience, making it easier for him to find the right music for the right occasion. It would also potentially benefit many other users who are struggling with similar issues.

The second part of this three-part project will be to build a prototype with Figma to give a more tangible representation of our idea.?

Designer language - prototype

By Heather Hayes & Nikki Alderman – Holberton Tulsa Cohort 19

Prototype development

After identifying our chosen solutions, we knew we needed to bring them to life in a form that was tangible and realistic. We began this process by storyboarding our solution. This helped us create a user flow and visualize how Alex would interact with our proposed changes.

Having a physical representation of our user flow, we dove into the detailed work of designing high-fidelity mockups in Figma. We chose Figma for this task not only because it was required but due to its robust features that allowed us to create professional, realistic representations of our solution.

Interactive Prototype

Finally, we brought our static designs to life by adding interactivity in Figma. We created a clickable prototype that mimics the experience of using our new features in real time. This allowed us to get a feel for how the user would navigate through the interface and test the effectiveness of our solution before any actual development began.

Design-Figma

By prototyping our solution, we were able to see it in action and make iterative refinements. This process has been invaluable in ensuring our solution not only looks good on paper but also functions seamlessly when brought to life.

Designer language - validate

By Heather Hayes & Nikki Alderman – Holberton Tulsa Cohort 19

Doug: Doug expressed his delight with the prototype, stating, "It makes me want to pay for Spotify." It was evident that Doug had a deeper understanding of the Spotify app compared to Alex, finding it more intuitive to navigate and accomplish tasks.

Taylor: During our collaboration on the research phase, Taylor and I devised the solutions implemented in the prototype. He was particularly impressed with how I executed the stacking of albums, an idea he contributed. Additionally, he appreciated the preview button, which was my suggestion.

Manuel: Manuel quickly grasped the prototype's functionality, although, like other peers, he encountered difficulty clicking on the album. Nevertheless, he expressed enjoyment of the preview snippet and believed it would be a valuable addition to the actual Spotify app.

Kat: Like the others, Kat expressed satisfaction with the stacked albums and preview snippets, deeming their desirable features. She also proposed a suggestion for improvement, recommending that the album with the preview be positioned on the left when expanding, instead of the right.

Dustin: Dustin showed great interest in the prototype and the chosen features we incorporated. He specifically highlighted his appreciation for the space-saving expansion of albums and commended the implementation of the preview feature. He, too, expressed a desire to see these features integrated into the official Spotify app.

In conclusion

Based on the feedback received, it can be concluded that the prototype was a partial success. The positive reactions from Doug, Taylor, Manuel, Kat, and Dustin indicate that the implemented solutions, such as the stacked albums and preview snippets, were well-received and deemed desirable features for the Spotify app. However, there were also challenges encountered, such as difficulties in clicking on the album, which need to be addressed in further iterations.

Through this feedback, several valuable insights were gained about the solution. Firstly, it was observed that the prototype successfully captured the attention and interest of users, evoking a desire to invest in the Spotify app, as expressed by Doug. Secondly, the collaborative efforts with Taylor in the research phase proved fruitful, resulting in innovative ideas and features that were positively acknowledged. Furthermore, the feedback from Manuel, Kat, and Dustin highlighted the potential impact of the preview snippets and the need for refining the layout and positioning of expanded albums.

Moving forward, these findings will serve as a foundation for future improvements. Addressing the challenges identified, such as enhancing the clickability of albums, and considering user suggestions, such as adjusting the position of expanded albums, will be essential in refining the prototype. Overall, the feedback received has provided valuable insights to guide further development and iteration, ensuring that the final solution meets the needs and expectations of users.