Music Drop
UX Competition
Pre-selection #1
In-person
Mobile App
Collaborative music player that unleashes the joy of music in a trip

My Role

Designer

Duration

5 days, Mar. 2022

Team Member

Qianru (Cara) Zhang

Tool

Adobe Xd

Summary
The Adobe & Sonos Jam is a UX design competition that encourages participants to bring back in-person social music experience using the Adobe Xd platform. The competition challenged us to identify a target market with users' demands and to design an accessible third-party mobile app. Our team crafted a collaborative music player which empowers users to conveniently discover and share their favorite music with others while physically gathering together.
‍
Our team worked collaboratively and intensively during the 7-day challenge. We conducted user research, defined problem space, produced prototypes, and performed usability tests. During the collaboration process,  I led the visual design of the hi-fidelity prototypes and the iteration process.
DESIGN GOAL
Empower Groups to Capture Every Moment of Music
The Music Drop is a collaborative music platform designed to facilitate people with different music appetite to share, control, and enjoy music together on the same device in a car.
In 7 days, we went through the design process of research, brainstorming, ideation, and rapid prototyping with contextual inquiry strategies to quickly make decisions and deliver our solution.

Our design was ranked No.1 in the pre-selection by professional judges (total score 90/100) out of 345 participants from 117 teams of 113 universities across the US, UK and Canada.

Check out the scores here.
FEEDBACK FROM JAM ORGANIZERS
The best UI Example
Great job in using the visuals and be really bold about the colors.

-- Jodi Vautrin, Sonos Senior UX Designer

Super slick UI. You really see a lot of interactions come to life.

-- Jessica Moon, Adobe Design Director

Such a good UI example here, which makes the app interesting and engaging.

-- Sein Woo, Sonos UX Manager

Challenge
After reading the challenge brief, we focused on the road trip scenario. During a road trip, people gather in the same space with sufficient time to share and enjoy music. However, the users face the challenge of various music appetites and the pain of switching devices. Consequently, people on the same car usually do not enjoy equal participation in music sharing.
PROBLEM
How Might We help users to Share Music Silkily when traveling Together in a car?
Highlighted Experiences
Create Room and Invite Friends at Ease

Direct and Slick experience for users to create a room and find friends nearby with playful visuals

  • Create a room and set up a room name
  • Salient instruction of adding friends nearby after entering an empty room
  • Colorful visual elements add to the fun of the experience
Music Import with Inclusion

Inclusive music importing process with low cognitive load

  • Import music from different platforms to accommodate users' distinct preferences
  • Existed playlists facilitate users to add to music quickly
Funky Music Control

Collaborative music control with fun interactions

  • Equal participation in music control
  • Dynamic animation and reactions
Live Memory

Multi-media music memory of quality time with friends

  • Everyday remix reminds users of the music played in a previous trip
  • Easy short-vlog making process uses the songs played in the trip as the background music
Research
RAPID RESEARCH
Frustration in finding, controlling, and collecting songs
With the scoped scenario of a road trip, here are the main goals of our research:
  • Find out the current pain points of group music sharing under a road trip scenario
  • Identify the needs of users in group music sharing
We utilized research methods of competitive analysis, contextual inquiry, empathy map, and affinity diagrams. These methods are helpful for quickly understanding users' needs and delivering solutions within a constrained time.
1
Find Songs
Users have a headache for finding songs across different platforms
Users prefer to share music based on their existing playlists, which may be rooted in different music platforms. Various platforms may differ in music library because of copyrights. Unifying a playlist across different platforms that all users like is a challenging task.
2
Control Songs
Users have limited opportunity to control music 
Users have no control or participation in the music control if their devices are not connected to the car. The only user who controls the music feels uncomfortable about playing his/her own songs all the time.
3
Collect Songs
Users cannot easily retrieve what they listened as a group
Frequently, a user wants to add his friends' songs to his playlists after the trip. It is hard for him to remember all the songs they listened. The user may feel awkward asking his friends about the songs' names. His friends may also forget the songs they played.
OPPORTUNITIES
Address users' frustration in an end-to-end journey
Based on the research insights, we framed the design goal into 3 HMWs:
Design Process
BRAINSTORM & IDEATION
Make Sense of Ideas through Impact-Effort Matrix
With these questions in mind, we brainstormed 10+ ideas and evaluated them with an Impact-Effort matrix.
NAIL DOWN ON KEY IDEASS
Facilitate End-to-End Music Sharing Experience
DESIGN ITERATION
Reduce friction and add fun to interaction experience

We first discussed about the product's user flow and designed prototypes based on the flow.
To investigate the impact of our solutions in addressing our identified problems, we conducted a usability test in a car to mimic the actual using context of Music Drop. We invited three people with various music tastes to sit in a car and try our prototypes under the Wizard of Oz method.

KEY PROBLEMS 01

No Call-to-Action after Entering the Room

>> Intuitive Room Page with Salient Information

  • More social gathering feelings by changing the tab name from "Playing" to "Room" 
  • Clear next-step guidance and less visual distraction by keeping only a prominent "Add Songs" button
  • Illustrative ushering users to the room by ading a toast
KEY PROBLEMS 02

Redundant Visuals Intervenes Song Choosing Efficiency

>> Neat Layout with More Songs Displayed

  • Fewer users' cognitive load by removing the head section
  • More songs on the same screen by reducing the height of each song component
KEY PROBLEMS 03

Inappropriate Playlist Control Actions

>> Tailored Control Actions for Group Music Listening

  • "Shuffle" and "Moving a Song to The Top" options included
  • "Collecting The Playlist" and "Deleting All Songs" options removed
KEY PROBLEMS 04

Lack of Interactions among Users

>> Fun Social Media Effect from Rich Interactions

  • Emojis added for users to react to their friends after clicking on the avatar
  • "Thumbs Up" function removed
Evaluaution
QUANTITIVE SIDE
Significantly reduce the number of steps for users to share their music
Under the same task of "Passenger A and B plays a song in a sequential order", our Music Drop requires fewer steps and fewer parties involved at each stage.
QUALITIVE SIDE
Drastically improve users' social experience via the embedded multi-media interactions
SUMMARY
CHALLENGE
HIGHLIGHTED EXPERIENCE
RESEARCH
DESIGN
KEY TAKEAWAYS
Key Takeaways
Create in-person experience through multiple channels
In this design, one of our biggest challenges is to enhance the engagement of in-person experience. After conducting contextual inquiries and gaining feedback from experts of Adobe and Sonos, we found using multi-media and promoting users to interact with physical environment could significantly improve the immersion of ad-hoc scenarios.
HomeProjectsSocial Fitness ServiceAI MicrowaveConvAI Health ChatbotSkeema Tab ManagerReading BuddyYelp Data AppMusic DropSuperControlCaptain DICK'sAboutPlayground
< Previous : Yelp Data AppNext : SuperControl  >
© 2024 by Hazel Zhang, Sunnyvale, CA. *All Wrongs Reserved*