Elisabeth Pefanis
UX/UI Designer

Beat.box

Responsive Website Concept

Company Overview

Beat.box is a new and exciting startup that offers curated music playlists to their users. Customers create a profile that highlights their interests, tastes, likes, and cultural touch-points and a customized set of playlists will be created for the customer based on this profile. Beat.box's focus is music exploration and discovery as an extension of lifestyle and personality. The core goal is to give users the opportunity to discover new music from emerging and established musicians in an unexpected way.

Design Challenge

Prompt: Position Beat.box as the number one music streaming platform choice among music lovers and trend setters.

Solution

Design a responsive website that showcases the unique attributes Beat.box has to offer through discoverability, personalization, and convenience.

Beat.box

Design Process

  • Role: UX Designer (Generalist)
  • Skill Applied: Research, wireframing, responsive design, visual design, competitive analysis
  • Scope: 1 week design prompt 
    • Phase 1 - Research
    • Phase 2 - Wireframing
    • Phase 3 - Visual Design
Research
Beat.box

Competition

Competitors include:

  • Apple
  • Spotify
  • Pandora
  • Tidal
  • Amazon

Beat.box

Observations

  • The competition focuses on the quantity of songs available and personalization
  • Color choices are typically bold and bright

Audience
Beat.box

Primary

  • Men
  • 18-25
  • Single
  • Key Traits: 
    • Young/socially active
    • Loves to discover new music and share with friends
    • Want to be "in the know"
    • Prioritizes convenience and customization

Beat.box

Secondary

  • Women and men
  • Ages 18-35
  • College age to young professionals
  • Single/Married
  • Key Traits:
    • Want a novel and quick way to create a new playlist
    • Limited music knowledge/time
    • Open to new music with moderate effort

Wireframing

Design Process

I started with mobile first to lock in the key features of the website.  While looking at the competitors I noticed their websites are relatively short and have limited options, this guides the user to the desired action and minimizes confusion.  I kept this in mind when designing and broke it down into 4 sections (later I added a 5th).

  • Hero image/sign up
  • How it works/step by step
  • Sample playlists
  • Who we are


Goals

The goal of the website is to attract users to sign up by showing what Beat.box has to offer through discoverability, personalization, and convenience.  This is achieved by the design of the website.

  • Hero image and sign up button - draws the potential user in through visuals and provides an immediate way to sign up
  • How it works - easily and quickly explains how the process works and what the user will receive
  • Sample Playlist - demonstrates the unique music selection/curation Beat.box offers and gives the user a taste of what they could have if they sign up
  • Who we are - establishes familiarity and gives the user the chance to learn more about the company

Visual Design
Beat.box

Color and Typography

Yellow is warm and energizing, it conveys themes of confidence, creativity, and positivity. The color scheme is a variation of yellow/orange and ties into Beat.box's priorities of being a place where people can explore and discover new music with a completely customized experience.

There are two typefaces, Bungee Shade for the logo/some titles and then Montserrat for everything else.  The logo is the fun and exciting text and is meant to stand out.  Montserrat is used everywhere else in semibold for important descriptions, buttons, or titles (bigger font), italics, or regular. 


Beat.box

Hero Image

The image is a drawing of the musician Bob Dylan.  Beat.box differentiates itself by being a unique alternative to its competitors, so to promote its "uniqueness" I chose a hand drawn image as opposed to images of artists, album covers, or people listening to music.

Beat.box

How It Works

Beat.box curates music based on a quiz the user takes when they sign up.  Convenience and curation are very important to the primary and secondary target audience so the icons and short descriptions communicate how the process works without over burdening the potential user.  It also gives the opportunity to take the music quiz with a link in the first description of the process.

Beat.box

Sample Playlists

This section utilizes discoverability as a way to engage the user.  They can explore sample playlists to discover new songs/artists and experience what it would be like if they signed up.

Beat.box

Music Quiz

The target audience wants personalization in their recommended playlists and do not mind a moderate amount of effort to provide the information needed.  The audience also enjoys taking BuzzFeed quizzes so the music quiz is designed to mimic the fun questions BuzzFeed would ask while also gathering the necessary information to create customized playlists.

The background continues the theme of unique music illustrations to visually represent how Beat.box provides a more tailored experience than its competitors and promotes the exploration of discovering new artists. 

Beat.box

Who We Are

To make the experience a little more familiar it has a short description of what the company does and a picture of the team hard at work to create a great experience for the users.

Please scroll to see the full mockup
Please scroll to see the full mockup

Desktop

Transferring from mobile to desktop expanded the grid from a 4 column grid to 11. Modifications included expanding elements in the hero image, playlists section, music quiz, and the staff picture at the end.