Ann Li

Hand-written name, "Ann Li"

Ann Li

is a multidisciplinary designer
driven by storytelling, sense-making, and curiosity, exploring experiential narratives and creative tech

Best viewed on desktop

Ann Li

Neurobiologist-turned designer. Currently pursuing a Masters in Interaction Design at Carnegie Mellon University.

Work spans the digital and physical, including multisensory exhibits, creative direction and strategy, interactive installations, and user interfaces.

Spotify Timeline

A product concept for the nostalgic listener

Roles

Product Design
UX Research

Context

Spring 2020 (Feb - May 2020)

Tools

Figma
Notion
Pen + Paper

Overview
Outcomes
ResearchApproachDesignReflections

Project Brief

A 10-week project investigating solutions to unaddressed user needs in a popular mobile app. I chose Spotify for three main reasons:

  1. The impact of digital streaming platforms on the music industry
  2. Spotify's popularity amongst listeners, and emphasis on personalized/user-centered features
  3. As a personal challenge- I had minimal initial frustrations with the app, and did not enter the process with a particular problem/solution in mind
    ‍

Goal

Identify major user obstacles to social music sharing and discovery through user research, collaborative brainstorming, and prototyping. Using research insights, expand functionality and user delight.

‍

‍

User Research

A general survey of users revealed existing behaviors and key features–

‍

Features from most to least used. 1) recently saved/liked 2) self-made playlists and Spotify-curated playlists (Discovery Weekly) 3) Spotify-made, category playlists (Pop Rising) 4) recently listened

Identifying Pain Points

I conducted contextual inquiries and a series of user observation sessions. Spotify does a great job with discovery options, and users were ambivalent towards social sharing features. In contrast to my original hypothesis, user feedback directed the focus towards personal taste development and improving music curation.

‍

Digitized version of brainstorming session results, mimicking the original "sticky note" form.
Affinity diagram of initial findings, cleaned up

‍

Initial Findings

  1. People utilize the “Liked Songs” feature frequently, but for alternative purposes- as a working playlist of current favorites or a historic archive.
  2. People want a simple, quick way to group new discoveries.
  3. People like to organize the music they love into further sub-categories; to catch up on old favorites and for different moods and occasions.
  4. Due to human error or frustration, users are losing track of new discoveries and music they like. Users want to enjoy using Liked Songs, but are deterred due to a lack of organization.

With insights derived from contextual inquiry, I redefined the people problem. A diverse group of Spotify users were recruited to outline solutions and provide feedback on feature impact.

‍

Collaborative Brainstorming

‍

Photos of rounds 1-4 of our brainstorming session. How Might We's were written on sticky notes, aggregated, and refined into solution spaces.
Left: Ideation and aggregation. Rounds 1-2. Right: Ideation for 3 main opportunity areas, aggregation into solution spaces, and voting. Rounds 3-4.

I enlisted seven participants with diverse listening tastes and habits. We identified three promising solution spaces that needed some TLC —

  • Personal Customization: organizing and suggesting playlists by “mood”, tailored to the user and their habits through A/B testing
  • Chronology: organization of liked songs for quick access and comprehensive documentation
  • External User Rules: opening the queue for collaborative access

‍

Low-fidelity sketches of 3 features on left, Timeline feature brainstorming on the right
Low fidelity sketches of addressing the three solution spaces, and sketches for the timeline feature

‍

Solution

My approach was to allow existing user behaviors and attitudes guide potential areas of intervention.

  • Listeners want to be able to look back at their musical journey, while readily exploring new finds and accessing nostalgic favorites.
  • Currently, it’s tedious to keep track of liked music and organize finds in a meaningful way.

After feasibility/impact evaluation, I decided on Feature 1 to develop further– a chronological organization feature to clean up Liked Songs and provide new functionality. This solution services the broadest user scenarios while building upon a solid existing infrastructure. Timeline allows users to efficiently access recent discoveries, while providing the built-in framework to make revisiting old favorites delightful and intuitive.

‍

Design

Medium Fidelity Explorations

I wanted to introduce an option that was intuitive and efficient. I presented a series of preliminary iterations to users, exploring:

  1. The assigned prominence of the feature
  2. Interaction with the timeline mechanism
  3. End point organization of archived favorites

‍

‍

Entry Point

Users prefer a merger with Liked Songs, with new entry points to access the feature.

Home/entry point explorations
  • Users desired high-level, static entry points for convenience
  • Designation as a “fixed” playlist corresponds to users’ existing mental models
  • Rebranding of Liked Songs satisfies users’ desire for smooth integration and heightened prominence

    ‍

‍

Timeline Navigation

The ability to access additional years of listening history was unclear, as users had difficulty recognizing the Lifetime node.

Timeline organization and scroll interaction explorations

Existing interfaces are important to users, who demand a level of consistency.

  • Access to older listening history should be more noticeable– Lifetime signifier needs to be more prominent and distinct from the other nodes

Horizontal swipes hinder the established vertical navigation pattern, and conflict with quick-action gestures such as queuing.

  • Maintain vertical continuity across the feature– follow users’ expectations
  • Increase the size of monthly labels or change text styles to boost prominence across months

Touch-state node labels were included in all future versions to improve feedback for monthly quick-scrolling.


‍

Lifetime View

Though other interactions were novel and fun to use, users preferred a simple interface inline with existing UI.

"Lifetime" view options and interface explorations

Users were confused about the function of the play icon (“I thought it was an arrow pointing later in the year”). It was not immediately clear that each year within the feature can be shuffled.

  • Relocate the play icon, or make it more prominent and visually consistent with other icons throughout the app

It was important to users that they have varying levels of granularity.

  • The flexibility to use Timeline as a monthly, annual, or cumulative recap playlist resulted in various shuffle and play options.


‍

UI Kit

UI Kit following existing Spotify branding

‍

‍

High-Fidelity Explorations

‍

Entry Point
High fidelity entry point/home page explorations and final iteration

‍

‍

Timeline Navigation
High-fidelity Timeline organization/scroll interaction explorations and final iteration

‍

‍

Lifetime View
High-fidelity Lifetime view explorations and final iteration

‍

Final Prototype

The final concept reflects natural behaviors and addresses frustrations with Liked Songs that may be affecting feature usage.

‍

“Liked songs doesn’t have any utility currently- I never use it because it’s a mess and I’d rather just make a playlist of all the music I listen to each month.”
“Right now I’m super selective with what songs I like because there’s no organization within Liked Songs. I wish I could just shuffle play a portion of it instead of the whole thing…I don’t want a song I liked from 3 years ago to pop up randomly, but I also don’t want to unlike it and lose it forever.”

‍

“It would be really easy to create seasonal playlists now, which I tend to do a lot.”
“I’d use the hell out of this. That way I can stop making playlists each month and just go to the timeline.”

‍

Based on user feedback, listeners will “like” and interact with more songs as they use Timeline. It has potential as a behavioral intervention, leading to increased usage of the app.

Final interaction flow

‍

Conclusion

Listeners want a contextualized history of their musical journey. By providing users with a meaningful record of past discoveries, the Timeline feature also shapes and informs future exploration. This feature seeks to provide a simple solution in alignment with existing user practices, and aims to address latent needs.

Mockup on the iPhone 11 Pro

My first experience conducting generative user research and iterating solutions has reinforced the importance of unbiased, open-ended inquiry. The discrepancies between my original hypotheses and actual users' desires revealed the need to validate assumptions and examine driving behaviors early in the design process, and how qualitative and qualtitative measures support each other.

What seems like such a simple design, when aligned with latent user needs, has potential to create lasting engagement and memorable impact. This project solidified the notion that design isn't about flashy aesthetics or fancy features, but is first and foremost a means of problem-solving.

With streaming, music has become increasingly accessible, allowing for continued exploration, connection, and community. This project was born out of a desire to help listeners and contribute to a beloved product that is used by millions daily.

__

This was a case study for the Spring 2020 Digital Product Design course at Cornell University.

‍

Click to navigate to the top
A Changing Arctic
Augmenting Embodied Learning in Mixed Reality In-Situ Welding
Cara
Wishwell
Artwork
Music Programming
Hand-written name, "Ann Li"
InstagramTwitterLinkedinBehanceDribbble

Ann Li 2020

© 2023 Ann Li
LinkedIn link