Beat.Box

Exploring visual design through music

I completed an online visual design course run through General Assembly in the first part of 2020. The online format worked really well, especially as the Covid19 lockdown started part-way through. Having the sessions with a bunch of lovely classmates and instructors who gave great feedback and design inspiration was a welcome relief from the effects of the lockdown.

We went through the landing page design process as though we'd received a concept that was in the discovery phase. GA provided us with three conceptual briefs to design a mobile landing page for either a juice bar, insurance company or a music streaming service. I picked the Beat.Box music streaming brief to work on since it was a completely different idea to the projects I’d been working on at the bank, plus I love music. There’s a lot of creative fun to be had with music as your subject matter on a design project, and I thought it’d stretch my skills the most.

I did a competitor analysis looking at other streaming services and music media; some user interviews using the app Otter to record and transcribe them; and mood boards (below) to collate all the insights.

Typography samples for an appTypography samples for an app
Colour samples for an appColour samples for an app

Typography & colour

When choosing a typeface for Beat.Box I checked out a lot of typographic pairings online, watched the film Helvetica, and was also reading the book The Elements of Typographic Style by Robert Bringhurst. The book was recommended to me by a type-obsessed workmate and is hugely enjoyable and educational. I also found a way of zipping through types on Figma by highlighting some text and then scrolling up and down through the text selector, which pleased me probably more than it ought.

I chose Rounded Mplus 1c for the body copy - its rounded edges gave a feminine touch to the more masculine Brutalist aspects. I used the typeface Dreamland as the basis for the logo, and eventually dropped the drop shadow that I’d been playing around with, because good designers don’t rely on drop shadow (I had to restrain myself from drop-shadowing everything like I was a seven-year-old playing with Microsoft Paint).

I looked to my mood boards for colour inspiration, and wanted to convey the idea of the Beat.Box service as guiding by the light for users. The palette that I picked had a dark midnight blue primary, with three bright highlights and a deep teal as a secondary. Despite starting out with a set of five of brights to choose from for the UI, I ended up only using three colours and varying tints and shades of each.

Design

The brief was full of copy and I took out nearly all of it, on the grounds that users can read more about a product if their interested is piqued on the landing page. I took the idea from the research phase of having contour lines on a dark background, with the copy and logo in bright ‘guiding’ colours. Although, with advice from the instructor, I toned the brightness down.

I also wanted to use the swiping action to add more or less of the same style, so I incorporated that into the UI. Whilst the brief was for a landing page, I ended up designing a lot of the UI elements since that's going to be an integral part of a music streaming app, and a new user probably wants an idea of what they'll be using.

You can take a closer look at the entire Figma file here to see all my working. I've made the switch to mostly working in Figma, except where I have older design projects that are predominantly in Sketch. I love Sketch but the power of Figma sharing is so great.

Design workingsDesign workings
UI workingsUI workings
Design workings for a music appDesign workings for a music app
Typography guideTypography guide
UI design guideUI design guide
Mobile landing page design for a music appMobile landing page design for a music app