Beatbox Hi Fidelity v3.png

I created this landing page for a hypothetical company, Beat.box, as the final project for a Visual Design course I took through General Assembly.

The Creative Brief

The task was to create a homepage for a music streaming website to rival Pandora, Tidal, and Spotify. Beat.box’s unique selling point is its sophisticated song recommendation engine, which is powered by AI and big data rather than humans. It aims to serve up highly customized song selections from an extensive music database. The user must answer some questions about their preferences in order to set up a profile with which song choices are matched.

The Target Audience

This company is primarily looking to attract young men aged between 18-25, both college students and young professionals. The secondary audience is women aged 18-35.

For the first group, a personalized service and the latest music would be priorities. The second group would care more about ease-of-use, and would likely tap into pre-curated playlists rather than setting up a detailed profile.

I pulled keywords from the brief that Beat.box wanted to associate with its brand—unique, unexpected, modern, accessible, young, tailored, knowledgable—and used those as a launching point.

The Process

This project made me realize how interesting I find the psychological effects of typography and color. I constructed a mood board including palettes inspired by images of live concerts, and was guided by our instructor to choose the most visually striking of these as it would resonate with the audience. I opted for flashes of bright color (pink, turquoise, blue) against an otherwise monochrome background. I chose a sans serif font, Rubik, which was crisp and modern but had enough curves to feel friendly.

The goal of the landing page is to get a visitor to the site to sign up for a free trial. I designed two “ways in”. The first is represented by the prominent calls to action in the navigation, next to the hero image, and in the first content block, which shows off the customization part of Beat.box’s service.

The second content block gives the user an example of the pre-made, themed playlists they can easily access in return for handing over their email address. This section is intended to be a lower barrier to entry. I designed an embedded music player which would stream extracts of the playlist as a taster of what the site contains.

The landing page also prompts a user to download its mobile app in two separate places as promoting listening across devices is strategically important for a tech-savvy audience.

Finally, I included another call to action in the footer, along with additional information about Beat.box’s secret sauce. This is the most casual invitation to get started, and would take the user to the free trial sign up page.

Tools

I used Sketch and InVision to create this prototype. There were 18 total iterations. User testing would be required to establish the efficacy of the calls to action and engagement with the interactive elements. Some, such as the hover effect over the three pink boxes, would need rethinking for mobile.