SXSW Band Website Extreme Makeover: Before & After Results!

D. Edward website before and after SXSW Band Website Extreme MakeoverAt this year’s SXSW, we hosted the world premiere of a 2-part panel called “Band Website Extreme Makeover”. It was a huge success and we wanted to share the results with you guys.

Band Website Extreme Makeover panelistsOur panel included Ari Herstand (Musician, Blogger at Ari's Take/Digital Music News), Brian Felsen (President, AdRev), our Director of Artist Relations Dave Cool, Chandler Coyle (Co-Founder, Music Geek Services), and Bandzoogle CEO David Dufresne.

Part 1 was the “Website Demolition Derby”, which featured live critiques of band websites. Musicians in the audience submitted their websites and our panel reviewed each site's design, organization, content and functionality.

We reviewed about a half dozen sites in the 1-hour session, then chose one winner who would have their website redesigned and used for Part 2 on how to build an effective band website. And that lucky musician was D. Edward!

Choosing D. Edward’s website (see his old site here: http://dedwardmusic.com/bandzoogle/) made our job somewhat easy, because he had a lot of great content and nice images (and he has fantastic music!). But his website badly needed a nicer presentation, some design love, and better organization/decluttering.

D. Edward Website: Before & After

Dave Cool, D. Edward, Chandler Coyle SXSWDESIGN

We met with D. Edward the day after the panel to discuss themes, images, and fonts. After that initial meeting, we went ahead and built him a brand new website: http://dedward.bandzoogle.com (note: D. Edward will be able to easily point his current domain to the new site on Bandzoogle)

It took all of *3 hours* time, and only a couple of coffees (and Chandler’s giant iced tea). No coding, no fancy design work.

We chose the Manhattan theme which matched really well with the images he had. We used his original header image for the Homepage image, then a different photo for the interior pages.

We also uploaded his logo (which is his signature) to the header area. For social icons, we added them site-wide, running along the top of each page, and they now match the website’s look perfectly.

And maybe best of all? Since all of Bandzoogle’s themes are responsive on mobile, his site now looks and works great on mobile devices, which wasn’t the case before.

CONTENT

D. Edward already had a lot of good content, so we worked with his current images and logo, imported his music through our SoundCloud integration, and made use of our Instagram and Twitter integrations to add some fresh content to his site.

For the rest, we simply made use of the content already found on his site, and here’s what we did:

HOMEPAGE

On D. Edward’s old site, his Homepage was 1 wide column and had a mishmash of logos, several videos, poorly formatted social icons, share buttons and a donate button scattered below the fold.

For his new site (http://dedward.bandzoogle.com/home), we reorganized things, and added some content to show his latest activity.

First, we made the page a 2-column layout with a right sidebar. We then added a short bio at the top of the page along with a great press quote. We also added a site-wide music player so that visitors could listen continually to his music while browsing other parts of his site (no auto-start!).

For his mailing list signup, we placed it right at the top of the page, and added a call-to-action that lets fans know they’ll get a free download of his first album when signing up (which is automated using our mailing list feature).  

To add some fresh content to the page, we added his Twitter feed to the page and a list of upcoming shows.

MUSIC

On his old site, D. Edward had a “Listen” page, which we changed to “Music”. Rather than just embedding a SoundCloud player, we imported his music from SoundCloud into our music players so he could not only stream his music, but also sell downloads directly to his fans and keep 100% of the revenue.

Another change we made was removing the “Lyrics” page from his site. Instead, we added the lyrics to each song within the music player, which can be found by clicking on “Info”.

So now D. Edward is setup to sell music directly to his fans, the songs and albums are all easily shareable on social media, and include the lyrics all in one place!

PHOTOS

On his old Photos page, D. Edward simply had a gallery of random photos. We kept that photo gallery on his new Photos page, then added high-resolutions promo photos to the top of the page. This allowed us to eliminate his “Publicity” page from the navigation, which only had his promo photos and an old press release.
 
To help keep content fresh on the Photos page, we also added D. Edward’s Instagram feed using our Instagram integration.

SHOWS

For the his Shows page, D. Edwards had been simply adding text to the page each time he had a gig. We copied the info for his upcoming shows into our Events feature where we were able to:

  • Include a custom image for each event

  • Add address info that links directly to Google Maps

  • Add links to buy tickets

  • Add age restrictions

Plus, each event is now easily shareable through social media, so fans can help D. Edward spread the word about his upcoming shows.

How did D. Edward react?

Band Website Extreme Makeover panelists at SXSW with winner D. Edward

Maybe the most fun part of all of this was being able to present the new website to D. Edward live in front of an audience for Part 2 of the Band Website Extreme Makeover!

After a quick review of D. Edward’s old site and why we chose it, we put his new website up on the screen for everyone to see, including D. Edward for the first time. Needless to say, he was blown away and loved the site we built for him!

So a big thanks to D. Edward for playing along, to our panelists for being part of it, to everyone who attended the two panels, and of course a huge thanks to SXSW for letting us premiere Band Website Extreme Makeover this year.

Considering how much of a success this was, we have a feeling there will be more Website Makeover panels at future conferences. Oh, and if anyone wants to turn the concept into a reality TV series, we’re listening!


If you’re building a new site for your music and need some help, be sure to download our free eBook: Building Your Website: A Step-By-Step Guide for Bands and Musicians

Comments

Lisa Occhino
Posted by Lisa Occhino on Mar 26 2015 10:02 PM
Looks great! Awesome job, guys!
Dave Cool
Posted by Dave Cool on Mar 27 2015 4:14 PM
Thanks Lisa!
Diane
Posted by Diane on Mar 28 2015 11:37 AM
Been with y'all for several years now, and many Performing Songwriters from our TV Roster are switching over, too. I love all the features available to us and I sing your praises regularly. Thanks for being awesome! Our site is NashvilleUnleashed.com
Dave Cool
Posted by Dave Cool on Mar 30 2015 9:35 AM
Thanks Diane!
Passion Perfected
Posted by Passion Perfected on Mar 31 2015 10:13 PM
Hi Dave, When I was completing the initial version of Passion Perfected's website, you graciously provided some suggestions for improvements. Specifically, you recommended keeping content above the fold, as visitors may be disinclined to scroll down the page. However, the body of content on the site the experts rebuilt (their preferred format, one would conclude) is BELOW the fold. Could you please explain the potential advantages and drawbacks of using each of the 2 layouts? Also, what is the advantage of reserving nearly the full screen above the fold on each page(prime "real estate" of a website) for a single photo? I'd really appreciate your insight, as we're currently reorganizing our site. Thanks - Lissa
Keram
Posted by Keram on Apr 1 2015 1:12 AM
This is a great article/exercise. It is always important to go back and tidy up the workshop after changes have happened.
Dave Cool
Posted by Dave Cool on Apr 1 2015 10:47 AM
Passion Perfected: Excellent comment & question! We still advise having important content above the fold whenever possible. But web design trends are moving towards more visual layouts with large header/background image areas. D. Edward chose this particular theme, which features a full header image area (but interior pages have smaller header images). It has an arrow you can click to see the content below, and we placed the most important content as close to the top as we could. It was more of a style choice on the artist's part wanting that particular theme. And as more and more people access websites from mobile devices, above the fold becomes a bit less important, but important content should still be towards the top of the content area so that even on mobile it stacks higher up as people scroll through the content.
Dave Cool
Posted by Dave Cool on Apr 1 2015 10:48 AM
Keram: Great, glad you enjoyed the post!