Process

Objective & Strategy

Competitive Analysis

Moodboards

Wireframe Sketches

Digital Wireframe

Typography, Colors, Photography

High Fidelity Mockup

Read My Process

Beat.box Landing Page

Beat.box is a landing page visual design project that I worked on during my time at General Assembly’s Visual Design Class August 2016. Beat.box is an up and coming startup that curates personalized music playlist based on a questionnaire that users fill out at registration.

The overall objective of this project is to focus on the visual design aspect and not as much on user experience (from a product sense). The goal is to design an implementation-ready mockup that is based off of visual design principles, brand, and intentionality.

 

1 - Objective & Strategy

The objective for the landing page is to convince users that Beat.box is the best place to easily discover music playlist based on their personal taste and to organize music that they truly love.

To do so, I want to emphasize Beat.box’s personal care for individual DNA in music taste, streamlined & easy-to-use interface, and stories of users with different personalities who found their love for music through Beat.box.

2 - Competitive Landscape

For competitive analysis, I mainly looked at popular music apps in the market, including Spotify, Pandora, Apple Music, and Soundcloud. Spotify and Pandora both have relatively simple look without too much emphasis on photography. Overall, more emphasis is put on the digital product.

As for Apple Music and SoundCloud, both emits a sense of bold and coolness. Apple Music uses slanted photography to create movement, while the girl in SoundCloud’s hero image is literally on a car dancing, creating a dramatic atmosphere and strong indication of rhythm and movement.

After analyzing competitors, I want Beat.box to emphasize particularly on the users’ idiosyncrasy and metaphorically portray people as patterns with unique shape and form that is pop art inspired. The hope is to address the demographic that is not often portrayed in popular music apps.

3 - Moodboards

4 - Wireframe Sketches

I did two separate moodboards exploring two different inspiration for the landing page design.

You can view them here.

I started out my design with rough wireframes sketches. I have two directions I wanted to explore. V1 is my attempt at creating a more interesting layout by using a slanted line that breaks up the grid, and V2 is a more conventional approach that emphasize more on the content and readability.

After testing V1 in rough digital wireframe, I realized that the diagonal line disrupts the F or Z patterns for readability unless a lot of white space is included. Wanting to emphasize users attention on the content, I eventually went with V2.

5 - Digital Wireframes

I set up a 12-column grid for standard bootstrap layout. Using only 3 colors, I outlined sections with simple shapes and long strips representing text. For interactive elements, I chose a darker color as an indication.

6 - Typography

To finalize my digital wireframe, I began to work on my typography pairing. The intention behind this pairing of Futura Extra Bold and Nunito regular is to have a strong and bold title to contrast with a smoother and rounder body text, capturing the attitude this brand has without being too overwhelming and hostile.

In retrospect, the title font could have been a little more distinctive from the body text. I would probably also look more into other bold typography instead of Futura, since the “c” seems to be inconsistent with the rest of the letters.

7 - Color Scheme

I want to include element of blue and red in my brand color as it create a nice contrast between trust, peace, friendliness, (blue) and passion, energy (red). Using a sample signup form, I created two experiments with two different sets of colors. I ended up really liking the right combination as it includes the yellow

as a secondary color, formulates a color triad and includes all primary colors to reflect the elemental nature of music taste.

8 - Photography

We were given website resources where we can fine commercial free photography to use. However, not being satisfied with any photos I found, I decided to take my own photography.

You can read about my process here.

9 - High Fidelity Mockup & Iterations

I started to apply the visual system into the digital wireframes I created. Throughout the process, I made several design decision along the way for photography usage, photo vs text composition, and order of website information in alignment with my original objective and strategy.

One thing that I could have explore a little more on is emphasizing the testimonial section, where it’s often a powerful tool to convert reader into consumer. Finally, with the grid system set up in the beginning, I was able to simultaneously create a responsive design for mobile and tablet as well.

10 - Post Mortem

Overall, I am satisfied with the outcome of this project with the timeline we were given, and was glad to be able to present my design process holistically with fellow designers and receive feedbacks.

Things to think about more—

1. There can be a wider variety of ethnicity or musical personality in the photography used as it would bring the idea of “diversity” closer to home

2. Possibility to push the “freak flag” further in photography.

3. Icons were more of an afterthought. They could be design more in alignment with the eccentricity the brand portrays.

4. User testing may be helpful to figure out better the user flow.