Digital Product Design
UX + Visual Design
Sep 2020 - Mar 2021
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.
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.
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.
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.
We decided on an soft, minimalist aesthetic reminiscent of ambient light and inspired by music visualizers.
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.
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.
Visual Design and Branding
Tasked with designing branding for Discover Together, I brainstormed and sketched initial logo concepts.
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.
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.