URX MUSIC CAROUSEL

Native Advertising Redesign

The Challenge

How might we create a compelling, engaging native music experience for the mobile web?

URX helps publishers monetize mobile content through interactive native advertising. I helped optimize their music carousel unit, a swipeable series of cards featuring songs from various music providers like Spotify, Soundcloud and Rhapsody.  

The Process

Our team followed a lean version of a standard UX process, beginning with a collaborative design exercise, and emphasizing heavily on testing and iterating:

The Constraints

Song Titles Only: Due to engineering constraints on the URX team, the music carousel could only pull song title info. Though our team strongly felt that pulling in additional information e.g. artist name, album art, album name etc would increase engagement, we had to work within the constraints.

Card Height 300px: The card size of the carousel was constrained to 300px max height. The width of the carousel had to fit within the iOS standard, and accommodate a “peak” of a second card to indicate swipe interaction. 

Consistent Visual Design: We could not tailor custom, branded visual design for each music player. Each player card must have the same design, eg. background color, fill, etc.

A/B Testing Not a Possibility: The team strongly recommended A/B testing for conversion, but the client did not have the resources to do so.

Results Sneak Peek

Our redesigned carousel unit represented a 50% increase in first-pass clicks and 500% increase in swipe interactions compared to the original unit. 

DIGGING DEEPER:

Design Studio

We kicked off the process with a design studio to brainstorm design solutions, following a 'lite' version of the Google Ventures’ Design Sprint.

After drawing inspiration from music players out in the wild and feeding off each other’s ideas, we agreed on this hypothesis, which we later validated:

A carousel unit that resembles a native, embedded music player on the page will increase engagement and conversion, and is less likely to seem like an advertisement.  

Our design decisions based on that hypothesis were:

• Add a large play button
• Add a progress bar indicating song length
• Add CTA text to “Listen on” the music player
• Change the 3-song offering to one song.

We decided to test following a moves-the-needle experiment loop, in which we constantly prototyped and tested new iterations through multiple experiments to determine which features performed the best:

With the testing approach and experiment model set, we moved into prototyping.

HTML & Javascript Prototype

We began the prototyping process by creating a custom article about Maroon 5 in which to place the carousel:

In order to ensure the highest quality prototype, we created a live, HTML-5 prototype using Bootstrap. We manipulated CSS elements on the prototype using Javascript, as we could not directly manipulate the carousel code. The result was a fully functioning, hi-fi prototype that worked on both iPhone and Android:

Testing & Iterating

We designed the usability test methodology to ensure the user was in a natural, comfortable environment in which they would be likely to read content on their phone:

• We invited them into the Tradecraft office to sit on a couch and read the article at their leisure 
• We left the room and filmed them with a video camera so they could feel at ease
• We re-entered the room after 5 mins and asked them how they felt about the article, what they noticed, etc, eventually zero-ing in on the music carousel.

With this methodology, we first tested the original unit to establish a baseline, then moved through iterations, keeping modifications when they performed well and ditching them when they didn't. 

We moved quickly through four iterations, testing 5 users on each and determining what to move forward with. The following are all the aggregated results:

The Final Results & Recommendation

Our final experiment results were: 

Our Version C carousel, with the play button and progress bar, ended up performing the best out of all iterations, providing a 50% increase in first-pass clicks and 500% increase ( from 0 to all 5) in swipe interactions.

Ultimately, we recommended this version to the client, and suggested that they conduct in-the-wild A/B testing with a larger quantity of users when possible, to validate the results.