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.

Discover Together

Creating connective opportunities through music discovery

Role

Digital Product Design
UX + Visual Design
User Research

Context

Sep 2020 - Mar 2021

Collaborators

Arjun Reddy
Trustin Yoon
Niyant Narang
Lam Pham
Lucas Abroms

Tools

Figma
Procreate
Hotjar
Google Analytics
Coda

Update: Discover Together was recently acquired in the Spring of 2022 and is no longer active :')

Overview

Discover Together is a browser-based app that creates social opportunities in music discovery. Using a custom algorithm, we extract and analyze data from two Spotify profiles to curate a playlist catered to both user's tastes. Users can access and organize their playlists, and can delight in "Hey, I didn't know you listened to (favorite artist here)! I'm obsessed with them!" revelations.

Outcomes

Though the Discover Together website is no longer supported, a responsive prototype is available here–

Background

The rush of discovering new music– especially when experiencing that love with others– is one of life's most enjoyable and universal experiences. Discover Together was born during the height of the COVID-19 pandemic. During a time of physical distancing and social isolation, digitally-mediated interactions have shown great potential to simulate and enhance traditional experiences. Inspired by the transportive power of music, we hope to help others create deeper connections through collaborative music exploration.

Process

We sat down as a team to review basic content requirements and brainstorm initial concepts. Design then refined and filled in additional features, and explored potential user flows.

Rough mapping sketch


Information Architecture

I took the lead in mapping user flows and streamlining the information architecture. We needed to determine the most intuitive framework for users to create, share, and access their Discover Together playlists. Because of the dual-ended nature of our app, I found it helpful to frame users through distinct use cases.

  1. Initiator (User 1): invites User 2 to the app, and initiates playlist creation.
  2. Recipient (User 2): must receive and accept User 1's invitation to generate a playlist.

Overall, users expressed a desire for quick access to their playlists, and were interested in viewing additional listening metrics and playlist information. Our goal was to create a comprehensive experience with minimal friction.

The initial navigational and informational framework directed "receiving" users immediately off-site to playlists localized in their Spotify libraries. User feedback revealed 3 main insights:

  1. *Users were confused by the sudden redirect to Spotify. "Why is there this random playlist?"
  2. Users disliked having their libraries loaded up with Discover Together playlists, but wanted an option to "archive" and review them later. "This is sick...(but) it's kinda annoying to be scrolling through them all the time. Is there a way to save for later?"
  3. Users did not realize there was more to the app– they saw the new playlist as an end-goal, and didn't explore the app further. "I didn't realize there was a whole website you guys made...I thought it basically just made a playlist and put it in Spotify for you."

*Testing was done with minimal explanation or background provided to User 2. User 1 should never have the burden of explaining or walking User 2 through the process. That's our job! If the interaction was not clear enough, we reevaluated.

Overall, users were bypassing functional features and missing out on a large part of Discover Together. These user insights informed our decision to provide more onboarding content and additional in-app navigation. We want to enable quick and painless access to playlists, while reinforcing a comprehensive in-app experience for users.



Wireframing and Prototyping

After defining navigation pathways and establishing visual guidelines and branding, we produced low-fidelity sketches to visualize possible directions. Medium-fidelity wireframes were created to expand and validate early stage decisions as we discussed and expanded our product strategy.

Sketches + notes
Low-fidelity wireframes


Usability Testing & Iterations

Moving into prototyping, I tested a series of interactive iterations based on insights we gathered from user interviews, heat maps, remote field observations, and A/B testing.


Design System

We decided on an soft, minimalist aesthetic reminiscent of ambient light and inspired by music visualizers.

I created a design system for expedited workflows and developer reference

Visual Design and Branding

Logo

Tasked with designing branding for Discover Together, I brainstormed and sketched initial logo concepts.

Sample of sketches: music notes, sonar, sound waves, and headphones

Ultimately, we wanted to emphasize the connective, human-centered focus of Discover Together. I was inspired by the "old-school" notion of splitting headphones with a friend, and wanted to harness the familiarity and nostalgia of sharing music through a tangible mechanism. After several iterations and a review of alternate visual directions, the team decided on this concept to represent Discover Together.

Final logo and text pairing: positive and negative applications on the top left and right, and alternate color ways and formatting on the right.
Final logo and implementation

Illustrations

I was also tasked with creating animated graphics for loading states. I created three character concepts around the prompt "cooking up some fire beats". I eventually settled on a simplified, humanistic art style that aligned with the soft and welcoming, yet graphic, nature of the logo.

Concept sketches and line art
"Whipping up your new playlist", "Cooking up some fire beats", "Mixing up your music tastes"

Challenges

Managing variable entry points

Our app needed to consider the experience of both users as they interface through different entry points. User feedback revealed a preference for personalized experiences that provide additional context.

Accessing playlists and insights

We wanted users to be able to access and manage their Discover Together playlists from one centralized location. Users also expressed interest in having access to their entire Discover Together history, so that they could see "everyone (they were) close with and what (they) would've listened to then versus now." Working with developers, we were able to create a localized database for each user. We also added a simple feature that lets users add or remove playlists in their Spotify library, straight from Discover Together.

Exposition and tutorials

User feedback varied between two groups: those who clicked unquestioningly through each call-to-action link, and those who were confused and hesitant about the purpose of each step. We conducted a series of A/B testing and interviews to settle on user copy that was simple but sufficiently explanatory. The result strikes a balance between providing context and support, and minimizing barriers to playlist creation and access.

Click to navigate to the top
© 2023 Ann Li
LinkedIn link