Introduction

I’m a UX designer with no visual design background. In my day-to-day work, I focus on understanding user needs, sketch customer journeys and work through wireframe interactions to create better designed experiences for users. At the end of my process I pass on my work to a visual designer.

Although visual design is often the last step to shipping a product, it’s critical in creating a great user experience. Visual design dictates the feel of the product, communicates the brand and ties together the overall experience.

As a designer that usually stops after wireframes are complete, I wanted to challenge myself and try my hand at visual design. Using a prompt supplied by General Assembly’s Visual Design course, I created the visual design for a fictional music startup called Beat.Box. This was my process —

Research

Competitive Review

I started by doing a quick competitive review, taking a look at Rdio, Spotify, and Soundcloud, to get a better sense of the players in the space. When reviewing the sites I focused on how the visuals spoke to the goals and overall experience of the site.

What feeling do the sites elicit? What message are they trying to communicate?

Rdio positioned itself as approachable, inclusive and trust worthy with it’s choice of vibrant colors, pop album art, and upbeat models. The aesthetic reminded me a bit of that from a Target ad and felt like it was designed for a more mainstream audience.

Spotify presented a grittier feel with sharper, more extreme visual elements. reflecting a hip and more rebellious crowd. The photography focused on the individual within context of a fun, spontaneous group, and drew a tie between the user as an individual and the social component of Spotify.

Soundcloud contrasted a slick UI aesthetic with edgy hipster-filtered photos. It felt modern, urban, and cool and it’s large hero image depicting an underground artists jamming out with friends eluded to the site’s duel sided platform for both artists and music lovers.

Each site clearly communicated a brand message through it’s visuals.

Design Brief

After understanding the landscape, I created a short design brief to cover the goals for my project. For Beat.Box to be successful, it had to fit a niche. I wanted something that felt hip, knowledgable, and approachable, like the music apps I researched, but offered a novel perspective that would captivate users.

Rdio, Spotify, and SoundCloud were energetic, group oriented and music-centric. I wanted to focus Beat.Box on the individual and explore a more intimate listening experience. I came up with ‘design adjectives’ that I felt the distilled Beat.Box’s perspective:

I imagined someone in their 20s coming home to their apartment in the evening after working a long day. They lay down on their bed and put on their headphones. They want decompress from a long day and avoid the clutter of other music apps. Beat.Box would be the music solution that was personal, curated, authentic and allowed the user to explore new music in a unique way without pressure or social influence.

With my adjectives and scenario in mind, I moved on to the visual process.

Visual Process

Similar to UX process, visual design is also built on iteration and concept development. I started my visual process with a mood board.

Mood Board

Mood boarding was a simple way to quickly translate my ideas into a visual language. I created a Pinterest account and began collecting images inspired from the adjectives I pulled from my project brief.

Move quickly to translate your ideas into a visual language.

I found around 60 images and started mixing and matching to develop three distinct aesthetic directions. As I began placing images, I considered how the visuals interacted with one another, the developing color scheme, and the emotional tone of the boards.

I put together my first board based on gut feeling and then iterated, making a more conservative version and then a more extreme version. The different directions allowed for experimentation and exploration of the look and feel I ultimately wanted to portray.

The final version was dark, calm, and mysteriously inviting, speaking to the project’s design adjectives and the developing art direction.

The mood board reflected the overall design concept but also informed it.

In addition to the overall look and feel of the board, individual elements played a key role in dictating the design direction. The image of the package located on the bottom left of the mood board became a major metaphor in the final design concept — eluding to an experience that was personal, packaged, and delivered — and helped to define the brand. The idea of the package also fit well with the company name, Beat.[box] — as a box could easily be thought of as a package.

The mood board became a foundation to direct the next steps of the visual process.

Color Palette

My color palette was adopted from my mood board and finalized using an this an interesting color tool by made Adobe. You can check it out here.

The muted grey and green hues helped to reflect a calm minimalism that relaxed the eye and set the tone for an intimate music experience while the light blue tone could draw a users’ attention without disturbing the harmony of the palette.

Typography

Next, I did a quick type-study of 12 typefaces to choose the right typography for Beat.Box.

It was difficult to pick the right typeface by simply displaying a single word or sentence of text (as shown above). Instead, I found it more helpful to create a text hierarchy (as shown below), which could display the type at different sizes and weights and provide context for how the typeface would actually be implemented.

Decide on a typeface that is versatile and will complement the design.

I initially looked for a typeface that elicited a more personal touch, like courier (vintage typewriter aesthetic) or a script font, but found that these more stylized typefaces didn’t translate well in the overall design.

In the end, I went with Montserrat. A bold, clean typeface that felt modern and inviting. Monserrat offered a good degree of versatility and could be implemented effectively in different contexts.

Photography

When selecting photography I started by scouring the web for high quality images using sites like little visuals, unsplash, and picography. Despite finding some great images, in the end, I couldn’t find the right combination that fit the aesthetic I needed for the project. So I took my own photos.

Again I went back to my design adjectives and the scenario I created for myself: A young, urban, 20-something returning home after a long, chaotic day looking to decompress from the day and lose himself in a new and intimate music experience. The images I took attempted to directly reflect that experience.

User Interface Patterns

Finally, I designed some basic UI patterns and iconography, including Beat.Box’s logo.

I wanted Beat.Box’s logo (bottom right) to reflect the box metaphor I determined from my mood board — a box that could hold content, be sent and delivered for the user to open and explore the content inside. I kept the design minimal and invited the user to project his or her own impressions onto the logo.

Outcome

This is the final Beat.Box landing page.

Conclusion

It’s all about practice. Practice and process over final product.