Visual Design–Resonate music app

Creating a brand through visual design

Image for post
Image for post

The App

Resonate was an app idea created during my time on the immersive UX course by General Assembly. The research stages can be found here.

In brief, the app would scan your music collections and create a list of bands to follow (and recommend others, based on your taste). From this data, it would check what relevant gigs were coming up and alert you when tickets went on sale.

I then worked on the visual design and created hi-fidelity mockups of several key screens.

Brand Personality

First, I interviewed my original user about the app and established brand affinities with cars and companies. If it was a car, Resonate would be

  • K.I.T.T. from Knight Rider
  • The DeLorean from Back to the Future
  • A Ford Mustang

Brands we related it to were Harley-Davidson, Mini and Jack Daniels.

This exercise revealed several core qualities that I wanted Resonate to embody:

Cool, authentic, classic, fun, exciting, loud.

It needed to bold and fun, with bags of personality.

The next stage was drawing inspiration from the live music world and creating a mood board.

Mood Board

Image for post
Image for post

I knew from picture research that orange would be the major colour in my palette, primarily because of the huge prevalence of orange/yellow tones in concert lighting. I also wanted to reference the classic Orange guitar amps because they are such an iconic brand. I originally wanted to use blue as a secondary colour (it often appears at live shows), but in the end, I relied on bold use of a single orange instead. Ticket stubs, 1970s recording gear and cassette tapes would make distinctive touchstones and I thought this imagery could be used to create something the user would find fun, nostalgic and memorable.

Style Guide

The final style guide is shown below, which gathers all the major elements used in the app. Two typefaces were settled on: Marvin Visions — an unapologetically retro font associated with 1970s pulp sci-fi — and Aleo — a contemporary slab serif that has some similarities to the fonts used on vintage recording gear.

Early user-testing showed users loved the chunky Marvin font, so I decided to push the ironic 1970s feel even further and added a retro gradient to the logo on the loading page. The result is a distinctive variation.

Aleo split users. Some loved it, others felt that a sans serif would be better suited to the app. A few alternatives were tried, but the original choice won out. This is one aspect of the style that could be revisited at a later date. Further variations could be tested.

Orange is the predominant colour and is used throughout. Instead of relying on shades, gradients are used to add some variety and aid readability.

Buttons and Tabs

Clearly defining the following/recommended options proved difficult. Several approaches were taken during the design process.

Initially I used the blue as a solid shadow with no blurring, in order to add a three-dimensional effect. Users liked the style but it was not obvious which button was selected. I then used floating buttons to amplify the depth and reference cassette tape or radio buttons. A couple of variations still left some users confused about which button was activated.

I then tried a new approach that referenced the dividing folder tabs used in music stores to separate records. A heavy shadow created the feeling of depth. This approach was much clearer and made it to the final design. The search bars’ internal text refers to songs by Iggy Pop and The Who. The design of the ‘recommended’ page could go through further iterations to make it more distinct from ‘following’.

Loading Page

In keeping with the slightly tongue-in-cheek vibe of the app, I created a loading page that uses a spinning record to indicate progress. This page also displays classic lyrics while the user waits. The gradient on the logo brings to mind vintage arcade games, dealing with the loading process in a fun, nostalgic way.

Image for post
Image for post

The Final Designs

Four example screens, including the spinning record animation, are shown immediately below. Below that, a high-definition image with no animation shows additional screens in the user’s flow.

Image for post
Image for post

The Audience Reaction

–Hell Yeah!

–Brilliant. It’s just bang on.

–Rock ‘n’ Roll!!

–I feel like everything works really well together. Despite the fact that the colours are darker, the screens don’t feel heavy or too dark.

–Very strong with lots of personality!

Written by

UX Designer | Writer | joncrabb.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store