Beat.Box

Introducing a new player to a crowded market

The Challenge

Beat.Box is a new digital music-streaming platform attempting to establish on online presence in a market dominated by the likes of Spotify, Pandora, and Apple Music. A sharp visual presence wouldn't be enough to differentiate Beat.Box from competitors. The design needed to be grounded in a deep understanding of its audience in order to be considered successful.

Research + Discovery

Unlike competitors, Beat.Box believes music suggestions should not solely be determined by previous selections. Rather, the Beat.Box algorithm includes additional variables derived from a user questionnaire, such as:

• Demographic information

• Hobbies and interests

• Musical influences

My objective was to leverage this key difference in a way that would resonate with the Beat.Box target audience.

Market Analysis - Brands:

I performed an analysis of the target audience, focusing on brands that successfully market to Beat.Box's desired demographic (e.g., Warby Parker, Trunk Club, and Allbirds). All brands embodied the following themes:

• Individuality is encouraged

• Value is placed on convenience and sustainability

• The need to discover new things is a key component of their DNA

Market Analysis - Competitors:

Director competitors were examined, with an eye towards identifying competitive advantages. The research uncovered a key insight:

No competitor provided visibility into why music selections were being chosen for its users - algorithms were based on activity, not the individual.

UX + UI

Beat.Box had an opportunity to capitalize on this competitive gap, while leveraging its key differentiator. Wireframes and functionality were created based on the following principles:

• Transparency – Provide users with the ability to create a personality profile, and highlight how inputs inform music selections

• Discoverability – Create a seamless wayfinding experience, and excite the user with unexpected (yet intuitive) functionality

• Individuality – Build opportunities for users to select and customize pre-made playlists

The principle of discoverability inspired the overarching User Interface and User Experience. Examples of how these principles were incorporated into the User Interface and User Experience include:

• Page scroll progress indicator

• Clear feedback on buttons

• Interactive sliders and exciting hover-states

Creating a System

Typography

Serif and Slab-Serif typefaces were selected with the user in mind. While the typefaces needed to be modern enough to appeal to Beat.Box's younger audience, they also needed to incorporate a bit of something unexpected in order to appeal the the audience's individuality. Raleway was selected as the primary typeface, and Roboto Slab as the body typeface.

Photography

The principles of discovery and individuality were considered heavily when selecting photography for the site. Saturated photos of younger individuals in transit were purposefully chosen to demonstrate optimism and happiness, along with an understanding that Beat.Box's audience marches to the beat of their own drum. I created a logo of a drum to symbolize this (visible above)

Color Explorations

A variety of Analogous, Split-Complimentary, and Monochromatic color schemes were explored. Orange, dark blue and green were chosen as the website’s color palette. These colors represent trustworthiness, warmth, and balance, respectively. These are emotions that Beat.Box's younger, more impressionable user base tend to gravitate towards.

The Takeaway

The emphasis on research – in conjunction with informed design decisions – increase Beat.Box's opportunity for success. I really enjoyed working on this project, and look forward to watching Beat.Box continue to grow over the months and years ahead.

Prototypes for the final design can be found here:

• Desktop

• Mobile