anchor.diff:    p When we had the basic functionality and structure built into the site, we shared the staging site with users that matched the audience segments we defined in Discovery.
   
     h3 The Outcome
  -  p After testing the site, Michael realized that he wanted to change directions drastically. As Michael talked to users he had a vision of a completely different brand and image. He saw a character living in his music that would be the creative vehicle for Michael to share his music with the world. Michael quickly arrived on a name &lsquo;Jackie Stone&rsquo;.
  -  p As Michael wrapped up the first stage of recording for his album, the identity of Jackie Stone continued to evolve. We decided to start the website from scratch under the new brand identity. Michael and I worked side-by-side to design and develop the site together. 
  -  p My experience with designing in the browser allowed Michael to have fine-grained control over every element of his website. While we weren't utilizing user testing in this stage of development, we were crafting an experience that achieved Michael's main goal for the website.
  -  p He needed a website that represented his music in a way that resonated deeply with him and allowed him to build on his web presence with confidence. Check out the Jackie Stone Music website or read the case study.
  +  p After testing the site, Michael realized that he wanted to change directions drastically. As Michael talked to users he 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.
  +  p As Michael wrapped up the first stage of recording for his album, Jackie Stone continued to evolve. We decided to start the website from scratch under the new brand identity. Michael and I worked side-by-side to design and develop the site together. 
  +  p My experience with designing in the browser allowed Michael to have fine-grained control over every element of his website. While we weren't utilizing user testing in this stage of development, we were crafting an experience that achieved Michael's main goal for the website:
  +  p He needed a website that represented his music in a way that resonated deeply with him and allowed him to build his web presence with confidence. Check out the Jackie Stone Music website or read the case study.
     
positive.code: 
    p Given the requirements for songs to be shared individually, I sketched a few different approaches for a song-sharing module. Having read through SMACSS a few times, I wanted to implement some of the principles I learned in the markup and stylesheet architecture.
  
    p When it comes to wireframing, I find higher-fidelity prototyping tools like Balsamiq and Omnigraffle to be cumbersome and tedious. I often move directly from wireframes to designing in the browser. Using my front-end framework with Gulp and BrowserSync, I can make edits quickly and see the changes reflected on all the devices I have on my workstation.
  
    h4.subheader Step 3. Development
    p Using my front-end prototyping tool of choice (Zurb Foundation 5), I layed out Michael's website and set up a staging site for Michael's review and for user testing.
  
    p We moved quickly into developing the song modules. Each song needed to have the following functionality:
    ul
  
negative.code:     h1  Michael McDaniel Music
      h2.subheader Web Design Project
    h3 The Story
    p I first heard Michael's music in New Orleans. My best friend and I were driving down St. Charles beside the rattle of the classic New Orleans street car. My friend was playing Michael's song &lduqo;Spiderweb&rdquo; as we drove.
    p Like most people who hear Michael's music, I reached for the volume and asked my friend &ldquo;Who 
      em is
      |  this?&rdquo;
    p &ldquo;This is my cousin Michael. Have I not showed you his music before?&rdquo; my friend answered, &ldquo;just give him a couple years, I bet you' he's gonna make it.&rdquo;
  
    p A few days later, I met Michael. Our friendship bridged over our shared passion of music. I was fascinated by Michael's ability to express deep and complex emotion through his music. I felt a calling to help Michael share his music with the world.
  
    p Years later, Michael approached me to talk about making a website for his first album. It was a recording project he'd initiated with several different studios, but it seemed like he finally found &lsquo;the one&rsquo;.
  
    h3 The Problem
    p Michael 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. He also had little experience working on the web and had never managed a project before.
  
    p He had a deep and personal relationship to his music, and anything that he was going to put his name on needed to be perfect.
  
    p I told Michael &ldquo;When it comes to design and development on the web, nothing is perfect, and nothing is ever truly finished&rdquo;, but that I would love to help him use the web to share his music with the world. 
  
    h3 The Goal
    p We decided on an iterative approach where we would launch variations of the website and track key performance indicators that would allow us to improve the experience of the website for the growth of Michael's music business.
  
    p Michael wanted a website that effectively portrayed his brand as a musician and encouraged people to download his music. It was also important that users could stream high-fidelity music on any device. He wanted users to be able to share the music easily and that they should be able to share the entire website or just a single song. 
  
    p Also, Michael felt that his lyrics were a crucial element of his music and that users should be able to toggle lyrics for each song while they were listening to them.
  
    h3 My Process
  
    h4.subheader Step 1. Discovery
    p Michael flew to Denver for a weekend and we got out the sharpies and loose paper (my favorite ideation and sketching tools). 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&mdash;from his closest family and friends, to committed fans of his music, to the types of people he wanted to attract.
  
    p We sketched out basic personas and empathy maps to better understand the needs and expectations of our users. We quickly decided that mobile-first responsive 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.
  
  