Beatboxheader2.png

WEB AND MOBILE LANDING PAGE DESIGN

BEAT.BOX

OVERVIEW

VISUAL DESIGN PROJECT

ROLE

 VISUAL DESIGNER

TEAM

SOLO

TOOLS

SKETCH, INVISION

DURATION

8 WEEKS

WAVES.png

objective

001

DESIGN GOAL

Beat.box is a unique music streaming platform that uses AI to create the perfect playlists for its users. The design goal is to establish Beat.box as a trustworthy company against it's competitors, while creating a simple and easy to use interface.

research + discovery

002

COMPETITORS

Research shows that user’s enjoy less than 50% of music found on playlists created by other platforms.

Screen Shot 2020-05-03 at 10.16.36 PM.pn

SPOTIFY

ITUNES

PANDORA

THE USERS

The audience for this company is young individuals, both men and women, ranging from late teens to early thirties in age. They’re independent, free spirited, and enjoy attending live shows. Overall, the one thing all users will all have in common is that they are music lovers. They want to be portrayed as modern and trendy, but not fad-focused. They want an interface that is simple and easy to use.

Screen Shot 2020-05-03 at 9.59.11 PM.png

MOOD BOARD

The idea behind the images is to create a timeless feel that is modern, yet classic. These images helped me create the tone for the design, one inspired by record players, playing instruments, collecting records, to attending live music shows. The mood board is a mix of modern and vintage, and celebrating the music culture through all decades, to show the company's knowledge and appreciation for the industry.

Screen Shot 2020-05-03 at 9.59.38 PM.png

003

ideation + design

COLOR PALETTE

The color palette chosen is very minimal. The background color is a very dark grey, almost black interface paired with white font. The accent colors are used sparingly throughout the design as decorative elements and for the main CTA points, to make the them stand out to the user.

Screen Shot 2020-05-03 at 10.00.05 PM.pn

TYPOGRAPHY

Acumin Pro, a simple and clean sans serif, is the main type face used throughout the design. It has a wide range of styles which allows it to be used in various ways to show different types of information while still providing a simple and cohesive look throughout the design.

 

The larger headline fonts are Bodoni 72. This is a serif font which was modern in its time. It was used by a few musicians on posters and album covers. The bold strokes and thin lines creates a great contrast within each letter, making it compliment Acumin Pro, a simple font with no contrast, well. 

BEATBOX TYPOGRAPHY.png
Screen Shot 2020-05-05 at 12.52.00 PM.pn

WEB DESIGN

Below is a prototype of the web landing page. You’ll notice the wave pattern is carried throughout the design. The repetition of this illustration ties the design together to create a cohesive feel.

The main image on the page you see next to the company name and headline is a photo of people lined up front row  at a  concert. This allows users to immediately relate to the brand because they can imagine themselves in this situation watching their favorite band.  The image color compliments the dark purple circles that anchor the screen on the opposing side. The text is partially over over the circle, creating an asymmetrical balance.

WEB1.png

As the user continues reading they will see a few questions which prompts them to understand more what the website has to offer. The curvilinear layout of this text is a play on the sound waves used to brand the company. It also creates more visual interest than providing all of this information as one big block of text.

WEB2.png

The repetitive sound wave pattern creates a break between the introduction information and the instruction section for signing up.

 

Within this section there are three steps the user needs to read before they sign up. The large numbers with a simple circle make the information easy to understand. The bold text gives a brief overview about the text below.

The CTA button is the first bold use of color on the webpage. This makes it clear that and simple for users to sign up for the service. 

WEB3.png

The final feature on the webpage is a carousel of customer reviews. The delicate arrows are designed similarly to the numbers above. Users also have the option to click the "Read More", which will take them to more customer reviews.

 

The design behind the reviews reflects a vinyl record. This also ties into the other circular elements throughout the webpage.

WEB4.png

004

mobile prototype