WEB AND MOBILE LANDING PAGE DESIGN
BEAT.BOX
OVERVIEW
VISUAL DESIGN PROJECT
ROLE
VISUAL DESIGNER
TEAM
SOLO
TOOLS
SKETCH, INVISION
DURATION
8 WEEKS
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.
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.
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.
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.
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.
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.
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.
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.
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.
