is a multidisciplinary designer and researcher exploring experiential narratives and connective systems
Best viewed on desktop
Ann Li
Neurobiologist-turned designer driven by sense-making, systems thinking, and storytelling. Seeking full-time interaction, experience, or product design roles.
Work spans the digital and physical, including functional user interfaces, immersive experiences, research, and creative strategy.
Discover Together
Creating connective opportunities through music discovery
Role
Digital Product Design UX Design User Research Visual Identity
Context
Sep 2020 - Mar 2021
Collaborators
Arjun Reddy Trustin Yoon Niyant Narang Lam Pham Lucas Abroms
Discover Together was acquired in early 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.
I was brought onboard to conduct user research, translate product goals into feature requirements and UX workflows, prototype web and mobile designs, and develop the visual identity.
Playlists I created and screens from the mobile app
Outcomes
Though the Discover Together app is no longer supported, a responsive web prototype is available here–
Background
During a time of physical distancing and social isolation, digitally-mediated interactions have shown great potential to simulate and enhance traditional experiences.
Discover Together was born during the height of the COVID-19 pandemic. The rush of discovering new music– especially when experiencing that love with others– is one of life's most enjoyable and universal experiences. Inspired by the transportive power of music, we hoped to help others create deeper connections through collaborative music exploration.
Process
Extending a backend algorithm to create a user-facing experience
We sat down as a team to review basic content requirements and brainstorm initial concepts. The only defined interaction at the time was the ability to pull users' Spotify data to create combined playlists. I refined and filled in additional features, and explored potential user flows to define a more developed product considering users' experiences.
Rough mapping sketch of the UX workflow
Information Architecture
We needed to determine the most intuitive framework for users to create, share, and access their Discover Together playlists.
I took the lead in mapping user flows and streamlining the information architecture. 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.
User Testing
Testing of this initial user flow was conducted remotely with 12 participants. 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 navigation and information framework directed "receiving" users immediately off-site to playlists localized in their Spotify libraries. User feedback revealed 3 main insights:
Why is there this random playlist? Users were confused by the sudden redirect to the Spotify playlist.
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 disliked having their libraries loaded up with Discover Together playlists, but wanted an option to "archive" and review them later.
I didn't realize there was a whole website...I thought it basically just made a playlist and put it in Spotify for you. 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 once directed out of it.
Testing was done with minimal explanation or background provided to User 2. User 1 should not have to explain or walk User 2 through the process. That's our job! If the interaction was not clear enough, we reevaluated.
Initial Insights
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 wanted to enable quick and painless access to playlists, while reinforcing a comprehensive in-app experience for users.
Wireframing and Prototyping
After defining information architecture and user flows, I produced low-fidelity sketches to visualize possible directions.
Medium-fidelity wireframes were then created to expand and validate early stage decisions as we discussed and expanded our product strategy.
Sketches + notes
Sample wireframes
Usability Testing & Design Decisions
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.
Insights were gathered from assorted research activities with 26 participants
Design Language and Branding
Establishing visual guidelines and an evocative, minimal design language
We decided on a soft, minimalist aesthetic reminiscent of ambient light and inspired by music visualizers.
I created design guidelines and components for expedited workflows and developer reference
Brand Identity
Ultimately, I wanted to emphasize the connective, human-centered focus of Discover Together.
Taking charge of branding for Discover Together, I brainstormed and sketched initial logo concepts. 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, user testing, and a review of alternate visual directions, the team decided on this concept to represent Discover Together.
Sample of my initial sketches: music notes, sonar, sound waves, and headphones
Iterating on the logo and notes from user testing
Final logo and implementation
Illustrations
I created custom illustrations and animated graphics for loading states and promotional materials.
I sketched three character concepts around the prompt "cooking up some fire beats". After feedback from the team, 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"
Reflections and Challenges
My first time working with developers as part of a startup, this was a valuable learning experience which gave me the chance to work towards things I care greatly for.
Working in a remote-only environment with limited resources was daunting, and oftentimes our ability to solicit user feedback was quite limited, which I often relied on to advocate for design decisions that would push developer workloads. We sometimes had to quickly align and converge on a design to move forward- other times, design and user testing were delayed by developer timelines. This taught me greater adaptability and a new resourcefulness- the importance of articulating design decisions to influence the product direction from a user's perspective.
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.
