is a multidisciplinary interaction designer exploring experiential narratives and creative tech
Best viewed on desktop
Ann Li
Neurobiologist-turned designer driven by storytelling, sense-making, and curiosity. Seeking full-time interaction, experience, or product design roles in the US.
Work spans the digital and physical, including interactive exhibits, creative direction and strategy, and functional 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
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.
Initiator (User 1): invites User 2 to the app, and initiates playlist creation.
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:
*Users were confused by the sudden redirect to Spotify. "Why is there this random playlist?"
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?"
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 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.
