Jackie Stone Music

UI Design & Development

Visit The Finished Site

Case Study

jackie stone website on a mac book pro

Jackie Stone is the stage name for New Orleans musician Michael McDaniel. I interviewed Michael as part of user research for Thengine and afterwards he followed up with me about designing the website for his upcoming album launch.

The Story

M ichael and I worked together to define goals for the website as well as his music business. We collaborated extensively throughout the entire design and development process and ended up with a clean mobile-first responsive website for the launch of his first album, ‘The Wildfire’.

We wanted to create an online platform that would allow Michael to grow his fanbase through email subscription. The old music-business profit model of selling physical albums in stores has long been over. Profit now comes from shows, and shows come from fanbases.

The Problem

Michael needed a web platform that would not only portray his art but also allow him to build a profitable business. He had a lot of ideas about how he wanted to portray his brand and what kind of experience he wanted his fans to have on his website, but he had trouble articulating exactly what he wanted.

a sketch of the problem michael was facing for this project

The Goal

The goal for the project was to create a website that would establish a foundational web presence for Michael to:

  • Establish his brand
  • Grow his fanbase
  • Measure engagement and
  • Optimize conversion to 4%

My Process

Step 1. Discovery

I flew Michael out to Denver for a stakeholder workshop. I facilitated a conversation with Michael about the goals of his website and the story behind his music. We walked through the different ways we might tell the story of Michael's album and splashed as many ideas as we could onto the whiteboard.

sketching ideas on a whiteboard for michael's sitebrainstorming 'what is the story?'sketching ideas on how to tell the story of michael's music

We talked about different business models within the music industry, and how Michael could position himself in the market. We looked at the radial segments of his audience—from his closest family and friends, to committed fans of his music, to the types of people he wanted to attract.

We mapped out the major communication channels for his target audience and realized the utmost importance of his fan's inbox.

jackie stone music network mapping for design project

We sketched out basic personas and empathy maps to better understand the needs and expectations of Michael's users. We quickly decided that mobile-first development was a priority. Much of Michael's fan-base was mobile and we needed to provide a quality experience for those users on the go as well as those users at home or at work.

I helped michael prioritize a feature list for the project based on our brainstorming sessions and organized the functionality into three sprints or 'phases' on a timeline.

a list of features for jackie stone music projectsketch of our iterative project timeline

Step 2. Content Strategy

The next day I facilitated a workshop surrounding the content strategy for Michael's project. We looked at how to communicate Michael's brand to his audience and created a convent inventory for the site.

Step 3. Wireframing

From the intial personas and empathy maps, I sketched wireframes to communicate different interface approaches for Michael and I to consider. Starting with quick sloppy drawings of layout and components, we worked together to boil down the interface into a higher-fidelity prototype.

wireframe of a section for michael mcdaniel music website

Michael wanted each song to be able to be shared individually, and for users to be able to view the lyrics for each song while they were listening to them. I sketched a few different approaches for a song-sharing module. Having read through SMACSS a few times, I wanted to implement the modular principles I learned in the markup and stylesheet architecture.

wireframe of the song functionality
Sketching the initial song modules on a portrait-oriented device.
wireframe of the song functionality once clicked
The position and state of the 'Lyrics' button changes depending on viewport width.

Step 4. Prototyping

Using a front-end framework (Zurb Foundation 5), I prototyped out Michael's website and set up a staging site for Michael to review remotely and allow us to observe real users performing tasks on the prototype.

We moved quickly into developing the responsive song modules. Each song needed to have the following functionality:

  • Play, pause and scrub
  • Share
  • View/hide lyrics
first image of the song module I developedfirst image of the song module I designed
The song module in its normal state.

first image of the song module I designed
Once the user has tapped or clicked the share icon or label the share buttons appear.

first image of the song module I designed
If a user clicks the 'Lyrics' button, a jQuery slideDown animation opens up an image of the lyrics for the user to read.

Step 5. Testing

With our live prototype up and running within a few weeks, we shared the prototype with Michael's core fanbase. We observed users on the site and asked them to think out loud so we could test the usability and effectiveness of the prototype.

user testing for jackie stone music website

After receiving feedback from users, Michael realized that we needed to change directions drastically. He didn't want to portrayed as a solo singer-songwriter who strummed an acoustic guitar. Michael wanted something epic, something more meaningful.

Michael began to envision a completely different brand and image for his music. He saw a character living in his music. It would be the creative vehicle for Michael to share his music with the world without all the strings attached to his personal life. Michael quickly arrived on the name Jackie Stone.

Also, one consistent feature request from users was to have the ability for the songs to play through so they could continue scrolling down the site and not need to play the next song after the current song ended. I dug into the jPlayer API and found an 'end of song' (event.ended) event that I used to trigger the next song to play.

(function playNextSong() {
  songs.slice(0, -1).forEach(function(song, index) {
    var songNumber = index + 1;
    $("#jquery_jplayer_audio_" + songNumber)
      .bind($.jPlayer.event.ended, function(event) {
        $("#jquery_jplayer_audio_" + (songNumber + 1)).jPlayer("play");
      });
  });
}());

Step 6. Iteration

Michael and I worked together over video conference to craft the next iteration of the site. We had long conversations about Michael's vision for his music and what role Jackie Stone would play.

From layout to imagery and typography I gave Michael the lead and used my skills to help funnel his ideas into practical implementation.

We settled on an album-based skeumorphic for the layout of the site where the above-the-fold would represent the album's front cover, and as the user scrolled it would be akin to flipping the album over and looking at its back. We didn't follow the skeumorphic strictly, but rather let the concept be a guiding constraint for design decisions.

Brainstorming with Michael regarding the implementation of the album skeumorphic.

Sketching out the possible interaction design for the album skeumorphic.

Michael was interested in understanding my process so we decided that we would work together remotely to make the changes for this iteration.

It was satisfying to fluently design in the browser with a client collaborating over my shoulder. I had worked hundreds of hours on my own to gain this level of fluency and to see its fruits in action was incredibly rewarding.

I had my device lab setup with BrowserSync such that we could monitor the development from mobile up. Having a variety of form factors, operating systems and orientations allowed us to make informed decisions about our user's experience of the site.

Step 7. Analytics Infrastructure

After less than twelve hours of paired programming, we finished the front-end development of the site. I implemented custom Google Analytics event tracking to measure conversion rate and hooked up Mail Chimp to harness email subscription.

(function () {
  'use strict';

  jQuery(document).ready(function($) {
      // share song
      $(".m-share-image").on('click', function(){
        ga('send', {
          'hitType' : 'event',
          'eventCategory' : 'Share',
          'eventValue' : 2
        });
      });

      // submit email
      $("#submit-email").on('click', function(){
        ga('send', {
          'hitType' : 'event',
          'eventCategory' : 'Submit Email',
          'eventLabel' : 'Submit',
          'eventValue' : 3
        });
      });

      // contact button
      $("[data-event='contact']").on('click', function(){
        ga('send', {
          'hitType' : 'event',
          'eventCategory' : 'Contact',
          'eventValue' : 100
        });
      });

      // play song
      $('.m-song-wrapper').on($.jPlayer.event.play, function(e) {
       // var title = $(e.target).children('audio').attr('title');
        ga('send', {
          'hitType' : 'event',
          'eventCategory' : 'Play'
        });
      });

  }(jQuery));
}());

Step 5. Performance Optimization

After reading Scott Jehl's Responsible Responsive Design, I was committed to improving performance on my front-end development projects.

I read up on how to reduce code bloat on CSS frameworks, and began to check items off my performance checklist.

Also, I noticed that because the actual song files were quite large and we were hosting the songs ourselves—there was a lag in the page load time caused by the songs. I wrote a small bit of jQuery to load the songs after the user had scrolled to a define waypoint on the page.

$("#jquery_jplayer_audio_1").waypoint(function(direction) {
  createSongs();
  },
{
  triggerOnce: true,
  offset: 'bottom-in-view'
});

In less than two hours I had the website loading in under 500ms and scoring above 90 for both mobile and desktop Pagespeed Insights:

performance test for responsive websitemobile pagespeed insights responsive websitepagespeed insights responsive website

The Outcome

The conversion rate for email subscriptions skyrocketed to 25% within the first 30 days. Since then, it has settled at a solid 6.9%. This greatly exceeded our project goal of 4% conversion rate.

Michael has a performant website that successfully represents the Jackie Stone brand and has allowed him to grow his fanbase from 0 to over 450 subscribers.

If you're interested in seeing the finished product, you can check out the Jackie Stone Music website live.

Screenshots

Courtesty of Browserstack
jackie stone website on a mac book projackie stone website on samsung galaxyjackie stone website on an iMac