Resonate was an app idea created during my time on the immersive UX course at General Assembly.
The user enjoys going to live music but sometimes doesn’t find out about gigs until it’s too late to buy tickets.
I designed an app to scan your music collections and create a list of bands to follow, based on your taste. From this data, Resonate checks what relevant gigs are coming up and alerts you when tickets go on sale.
The visual design drew on 70s rock LPs, vintage recording equipment and classic arcade games.
The research and the UI stages are separate case studies on Medium.
Resonate is an app that combines several technologies to ensure you never miss a concert ever again. A simple user interface allows you to take control of powerful functionality and make finding and buying tickets an easy and enjoyable experience.
Too busy to spend hours searching for gig tickets? Resonate brings the music to you.
Is your favourite band in town? Resonate will let you know.
Worried you’ll miss out when tickets go on sale? Resonate has got your back.
Find ticket-booking tedious? Resonate has you covered.
Live music exists within a larger ecosystem. Interviewing my user revealed how many concepts are part of the live music experience. These included:
Sharing with friends
Creating memories and sharing those memories
The first step in defining the problem — and defining the solution — was to map these concepts.
Clearly visualising the experience allowed me to start making connections and reach a succinct problem statement.
The user enjoys going to live music but sometimes finds out about gigs too late to buy tickets.
This problem has been tackled before. My task was not to reinvent the wheel, but to improve existing solutions and simplify the process.
I therefore identified two clear pain points that I could focus on:
Generating a list of relevant concerts.
Alerting users through push notifications and other methods to upcoming gigs.
One comment stuck out from my user interview:
"I don’t want to go into the app and search for concerts. It would be great if I could be somehow alerted when gigs are coming up or are going on sale. If I have to open the app and search for things myself, I’ll miss them."
I wanted to bring the music to the user, instead of forcing the user to enter the app and navigate the search functions. By ruthlessly focusing on clear actions, a simple user flow appeared.
On first launch, the app would offer to scan existing music libraries (Spotify, iTunes and Google Music) and use current listening habits to generate a list of bands the user might want to keep track of. This list could also be manually generated and refined. The app would use this date to create a list of concerts the user might be interested in going to. Extensive notification options could then be customised to alert the user to new live music events. These options would include push notifications, email, SMS and Facebook. If an alert was acted upon, the user would immediately be taken to the ‘buy tickets’ page.
Once the flow was in place, I could begin designing around four main screens.
Several iterations were developed based on this core flow.
User testing quickly revealed several issues.
It was not obvious what happened after the initial music libraries scan.
Navigation was not intuitive.
Users expected to navigate through buttons at the bottom of the screen.
A key takeaway was the positioning of the navigation buttons. A prototype created in Marvel showed that the top of the screen is a physically awkward location to move the thumb to. The buttons were also far too small to be effective.
The final version of the prototype featured newly designed icons at the bottom of the screen. These were much larger than the previous button panes.
A simple loading page was also added after the ‘music-scanning’ page, which made the transition more obvious to the user.
These changes were positively received during user-testing. At this point, the app also gained a name: Resonate. This suggest music, shared interests and connections.
By focusing on clarity of action and a straight-forward userflow, Resonate is an app that helps music fans stay more connected to the music they love…
But more can be done.
This is an early prototype built around a narrow function. In order to be released in the wild, several features could be added.
Ability to bookmark concerts
Create a calendar function for scheduling alerts
Enable peer-to-peer second-hand ticket selling when concerts are sold out
Improve the UI and create an appealing look
Following these improvements, data could be gathered and the results of using the app measured.
Check out the interactive prototype here: https://marvelapp.com/2ab2fa2
BRANDING AND STYLE GUIDE
I decided to take the wireframes I developed for Resonate and push them up to high-fidelity screens.
I explored several branding exercises – which I have since used with other clients – in order to define personality and build a unique style.
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
Unashamed Retro Kitsch :)
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.
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.
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.
The design of the recommended/following tabs references 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’.
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.
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!
Final screens, including an animated Loading Screen.
Core User Flow at bottom of the page.