Contact Me

Drop me a line so we can talk about design, tech, or life around the world!

         

123 Street Avenue, City Town, 99999

(123) 555-6789

email@address.com

 

You can set your address, phone number, email and site description in the settings tab.
Link to read me page with more information.

URX

 
 

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.  

 

 

My Role:

Product Designer on a team of four.

Our Goal:

Help URX redesign their current carousel unit to improve conversion (clicks) and engagement (swipes) in ten Weeks.

Deliverables:

  • HTML Prototype
  • Carousel JPG assets
  • Final presentation to client
 
 

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

 
 

A sneak peek of the original carousel unit design vs the team's redesign!

 
 

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.

 

Some Scenes from our 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.
 
 

Sketches from our design sprint

 
 

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:

 
 

Our hypotheses for each phase of the experiment

 
 

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:

 
 

Our Custom Article

 
 

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:

 
 

Prototype of the Existing Unit  on iOS 

 
 
 

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. 

 
 The Four Iterations!

The Four Iterations!

 

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.   

 

The final recommended version!