Bump is a fun and easy-to-use DJ game used to create cool beats called ‘Bumps’. Learn how to get the most out of Bump using our follow-along guide.  Share bumps with friends and with the Beatniks in the Bump community.

Challenge

To create an enjoyable, easy-to-use music making app/game that was quick to learn but took time to master. The game would offer upgraded sound effects and instruments and include a social capability.

Role

Led end-to-end design through competitive research, wireframing, visual design, prototyping and cross-team collaboration.

I worked closely with the CEO, the Product Manager, and the Engineering leads to design a competitive music app/game.

AUDIENCE & RESEARCH

Bump was conceived from the beginning as a competitor to three apps previously identified as market leaders. With a goal of competing in this established space, Bump needed to be ‘as good as’ and ideally ‘better than’ the 3 category-leading apps.

I reviewed and deconstructed the 3 top apps for features, copy, presentation, motivation, psychology, triggers, upsells, advertising, gamification, habituation and overall experience.

After assembling and absorbing each of the three apps I researched other apps in the music space as well as potential social capabilities as a differentiator.

Given the known financial performance for apps in our competitive cohort and a proven revenue capability, we felt a sufficient level of confidence to proceed with our product design efforts.

Process

APPROACH

I arranged and printed the complete onboarding flows and subsequent beatmaking functionality for each of the competitive apps. All three apps were almost complete clones with minor thematic and copy differences and a few functional deltas.

As these were mature, successful apps, I felt it was a reasonable assumption that current flows and functionality were sufficiently tested and optimized to onboard and upsell their (and our) target audience, especially for an MVP release. We would do our own measurement and optimization later.

I started with these high level guiding tenets we’d agreed on as a team:

1
Fun and enjoyable, a game more than a serious music app
2
Easy to learn and to make really great music quickly
3
A way to learn new skills and create more complex music
4
Social engagement via sharing your songs

Design

Whiteboard Sessions

I’ve experimented with apps like Procreate on the iPad but I always come back to the whiteboard as my preferred ideation medium. There’s something about drawing with your hands that just ‘does it’ for me.

Having cohort app screen prints available for reference was extremely helpful as design references.

I believe this was version 3 or 4 of sketching flows and functionality. A review the following day ended in maybe one or two minor tweaks.

Notes
1
Riffing on naming the educational component “Beats-U”
2
A potential toggle to show a small drum pad (3 x 3) or a larger one (4 x 4)
3
A feed for beats (I’d later call them ‘Bumps’) as a simple social element that also provided a valid reason to ask for Notification permissions (for upvotes)
4
I thought the Bump community could be called ‘Beatniks’ along with a music note+B logo, something like this:

Notebook

Sometimes I’ll move to Sketch from a whiteboard session but with this project I decided to spend some time sketching flows and screens in my notebook.

Sketchbook with design annotations

Sketching on paper in pen is a quite different experience than the whiteboard. Strokes are permanent and not easily changed and while there’s no commitment to it, it often solidifies and generates ideas for me.

Notes
1
I’d like to animate the headphones on the splash screen to add a fun element.
2
A deeper exploration of onboarding psychology as it relates to upsells.
3
I wondered if users could earn sound packs by watching a 30 second reward ad as well as via in-app purchases.
4
I had the idea that sound packs could be represented as 3D boxes of music.
5
To have two sets of drum pads accessed via set [A] and set [B] toggles.

RAPID DESIGN EXERCISE

Post a Product and Engineering design approach meeting, I created a rapidfire  set of design mockups in Sketch.

Not overly worried about colours, branding, detailed functionality, screen states and the like these rough designs brought the app to life for the next round of discussions with a broader audience.

Designs V1

The rough designs worked really well as visual cues to engage the wider engineering team as well as the head of marketing in a positive dialog. A very healthy discussion with great questions as well as ideas and suggestions.

A selection of the MVP release designs:

Onboarding flow

Bright bold splash screen to set the tone that this is a fun, interesting app/game.

I’m considering animating the headphones to grab attention.
Acknowledging most users do not read these screens, they’re lightweight and may educate some.

Introduce the app and explain core functionality.
Required GDPR Consent Screen for EU users.
Second explainer screen discussing sound packs.

I altered the hue on each of the graphical headers to match the cyan theme.
Third screen defaults to offering a free 3-day trial.

Upsell attempt #1.
Upsell attempt #2 using a timer mechanic.

Fun Font choice.

The timer starts from 15 minutes and counts down to 00:00 at which point the “Get Offer” button text changes to “Next”.
Upsell attempt #3 via a Free Premium trial offer.
Next offer the user a chance to learn the drum pads via the Levels screens.

The user can opt to close the overlay and see the two drum pad introduction screens.
Practice levels starting with simple and increasing in skill.

Icon represents pads that will be used. Levels may be replayed for practice or for a higher pass level.

50%+ pass to unlock the next higher level.
I tried a number of different approaches for focusing on just the active pads.

Animate a countdown from 5 to allow the user to get ready to watch the pattern they need to repeat.
After the countdown, the sequence to be repeated plays with the active pad highlighted.

The sequence can be stopped, useful for a repeat attempt or refresher.
Once the sequence is complete, a white dot indicates which pad to tap.

As soon as the indicated pad is tapped the dot moves to the next pad.
>= 50% to pass the level.  

With one or more stars, options to redo the level or move onto the next one
A failed level offers the ability to attempt the level again or to exit back to the Levels screen.
First time experience explains the three types of pads
After explaining the pad types, an overview of the Bump Pad.

This is the end of the onboarding flow.
The main Bump screen showing the drum pad including Loops, Sequences, Beats and the Bump Pad.

Tapped state shown for the 3 groups of pads.
Drum pad in recording mode after the record UI element has been tapped.

The red center dot pulses to show recording and the ‘Record’ label changes to the elapsed recording time.

Tab Bar

Pad
My Music
Bumpers
Packs
More
A simplified version of the drum pad, some pads activated
I created a baseball capped user holding their music
Play » Details » Rate format used on the music sharing wall
A 3D box of music to represent Sound Packs
Standard 3 dots overflow, horizontal for iOS, vertical for Android

INNOVATIONS & DIFFERENTIATIONS

From the initial ideation through to the final MVP designs, I iterated through three separate designs for the drum pad interface.

Version 1
Version 2
Version 3

Version 1

Addressing the Fun, Enjoyable, and Game aspirations. I elected to use bright engaging colours. Initially I coloured the rows to help the user find pads with higher accuracy than possible with a uniformly coloured pad set.

The gradients worked well and the drop shadow made them pop from the background as a real button would.

This version included the [A] and [B] pad selection feature before we decided to remove it due to the increased challenge of making 24 sounds instead of 12 per sound pack.

I had some concern about the limited space for the sound pack name but figured we could truncate longer pack names if necessary.

Created banner ads for other products we’ve created that should appeal to the Bump audience.

Version 2

After much discussion we made a series of decisions.

On reflection, 16 pads seemed far inferior to the 32 offered by our competitors (via A/B toggle). Maybe not enough variety to make great music or to engage our musicians over time. As a compromise between making an engaging app and the challenge of creating all the beats, we settled on a 24 pad layout.

This offered 50% more pads than V1 and removed any requirement to shift between [A] and [B] drum pad sets mid-composition, something we felt was awkward in practice.

I split the pad set into two groupings, the top row with sequences of beats and the lower row with individual beats. I added the icons to communicate functionality augmented by colour.

This format also allowed for much longer sound pack names removing the need to truncate shorter sound pack names.

Looking good.

Version 3

While I was happier with V2, it was still a lesser offering than our peer apps. A common compromise for an MVP release of course but it bugged me that the MAIN feature of the app was inferior.

I spent time researching other music apps as well as VST videos on YouTube for inspiration. I sketched out a bunch of ideas over a couple of days (I forgot to take photos 🙃) and ended up with some interesting ideas to discuss with Engineering and Product folks.

I added a third type of pad effect, a Loop to the existing Sequences and Beats. Loops do a lot of the heavy-lifting for beat making and allow for even the most non-musical person to make cool sounding music. We want to give our new users the best ‘jolt’ of ‘hey I can make cool beats’ as we could and this was the way to help craft that experience.

For these to all work in tandem and sound good would, I suspected, require some engineering smarts to synchronize the sounds independently from the pad tap events.

Engineering confirmed this as true and would research additional effort required on both Loop production and the sync effort.

At this point we were arguably very similar in terms of features and functionality as our peers. Could we innovate and actually be better, more fun, more engaging?

From watching YouTube videos and looking at the large trackpad on my MacBook Pro I had the idea to incorporate a similar concept within our drum pads.

If it worked like a trackpad we could start by implementing a draggable effect to whatever was playing.

That would give our users a unique way to customize and enhance the pre-programmed drum pad buttons and effects. Instead of individual music being the sequence and timing of your pads, it could now be taken to another level.

Adding a three-way toggle (represented as A, B, C buttons) would allow the pad to interact differently depending on the selection, tripling the utility of what I labelled the “Bump Pad”.

This not only would make Bump unique but also create an extensible foundation for future capabilities. Adding tap, double-tap, pinch etc. to the Bump Pad for even more effects.

Social Interactions

The second innovation over our cohort is the addition of a feed of user-created beats.

This provides not only a differentiator but is the foundational layer for future social/community interaction.

For the MVP release, a standard feed capability offering Latest beats as well as Top Rated beats. This provides inspiration to others for what can be achieved using Bump as well as recognition and feedback from the community.

I considered supporting upvotes and downvotes but given the likely age of the audience decided to solely support an upvote.

It’s also a valid reason to ask for notification permissions for upvote alerts.  

We made a conscious decision to not implement search and filtering for the MVP.

Outcome

This app is currently in development for both Android and iOS.