Beatdrop

Connect through Music

Roles

Ideation, User Research, User Interface Design

Timeline

2 days

Description

Design Hackathon

Banner

Overview

In 2017, I participated in a design hackathon with my friends where we received the prompt to design an application that helps connect people through music. After 16 hours of ideation, surveys, designing the UI as well as a high fidelity prototype, and a teaser video, the result was Beatdrop.

The Logo & Color Scheme

Initially, we thought of calling of the app "Sync" but it felt too cliche. From the pile of mostly overused name ideas for music apps, "Beatdrop" felt different. I designed the logo as a headphone emerging from the letters 'b' and 'd' from the name - BeatDrop and added a dashed pattern on the top to separate the two letters and symbolise a connection between the halves.

I kept the primary color as crimson to grab attention and depict the warmth of music and social connections. Warm colors are also easier on the eye compared to cool colors (for prolonged usage). I used it with sufficient white space in the app so the shade doesn't overpower.

Banner 2

Survey

We had an hour to conduct a survey, that would help us validate our ideas and know more about our audience. We shared a google form and managed to receive 150 responses from students in the age group of 15 to 21.

1. Sign In

97% of the people surveyed prefer to use Facebook or Google over creating accounts to sign into mobile apps. Therefore, easier access to signing in through Facebook or Google would provide a better experience.

2. Profile

71% of the people surveyed like to analyze their own and other people's musical interests. 75% said "No" to listening to any one fixed genre of music. Clearly, a person's musical interests comprise of different levels of affinity for multiple genres. The challenge was to represent these interests in a way that would be like a fingerprint, helping users to compare their interests with others. The solution — Pulse graphs, a radar chart like visualization of a user's music taste.

3. Search

The search section must be capable of searching for both music and people. The listen button listens to a song in the background and adds it to your playlist. The scan button scans for waveform IDs of people and allows you to follow them. Further, the pulse graph nodes can be dragged and tuned to find people with matching music interests.

4. Share mood through music

63% people said that they would like to share their mood with their friends with a song. In the music player section, we added a button to share a clip of the song they're listening to as Mood. The user can scroll through the song's audio waveform as it plays in the background and clip 10 seconds of the song to share.

5. Waveform ID

Waveform ID's are simple QR code like scannable graphics that allow easy sharing of user profiles. A person can simply scan this code using their mobile's camera.

Designs that people come back use

The Hooked Model of behavior design by Nir Eyal consists of 4 key points:

Trigger: Internal (boredom) and external (notification, email)

As per the results of our survey, there is no need to stimulate internal triggers for listening to music. However, external triggers like witty personalized Push Notifications and regular event emails would act as compelling, habit forming triggers.

Action: Accomplishing something with the app is a limited number of taps away
Variable Reward
Investment: an environment where users can take specific actions to invest in a better and more personalized experience