How to Build a Music Website

The aim of this case study is for musicians to see what works when making their own site, so they too can improve how well their website retains and converts visitors.

Ultimate Guitar
Hey guys, this is part 2 of a two part case study I've been doing on the Ed Sheeran website. You can check it to see what it looked like at the time of writing this, in case anything has changed since I wrote this. For those that don't know, Ed Sheeran is a singer/guitarist who's doing some very big moves at the moment. That said, today we'll only be focusing on how the home page of his website is laid out, as it does quite well in terms of guiding visitors in ways which are useful for obtaining long-term fans and making sales. The aim of this case study is for you to see what works when making your own site, so you too can improve how well your website retains and converts visitors. If you already have a site, you can use the below tips to better improve it in terms of structure and layout.
But enough of the intro, let's have a look at the site.

Mailing List (Newsletter) Sign Up Form

I've talked a bit about this already, but let's get into Ed's mailing list opt in form. As you can see, it's below the fold. This means that his website visitors have to scroll down before they see it. What's more, it's not very prominent. It's good that emails are being collected on this site. That said, it could be done better, even if the main aim is building up a social presence. I'll explain below.

What I'd Do Differently Part 2

As you can see, Ed (or his design team) gives away a free EP in exchange for your email address. That said, they don't make it clear that this is the case. The fact that you get a free EP if you add your email address isn't very stand out. In fact, it's quite likely you'll miss it. Considering that's one of the only places on the website which you can actually download his music for free (if not the only place), my guess is that this will be one of the things a lot of fans would be very interested in. Due to it's placement and the fact that it blends in with the rest of the site though, my guess is a lot of people miss it. I mentioned before that I would move the left hand nav up to the top (where his social icons currently are) and move the newsletter opt in form to the top of the left hand sidebar. What I'd also do is make this opt in box a lot more stand out. I'd do this in three ways: I'd add a image of the EP fans will get in exchange for their email address. This will help instantly draw people's eyes, especially if a 3D image of the EP was on display. Pictures are a lot more stand out then text. I'd make the opt in box a different color. Even though by simply raising the position of the opt in form you'd get a lot more people opting in, making the color stand out would get even more people's attention, and therefore more newsletter sign ups. My guess is a bold red would stand out nicely without clashing with the color theme of the existing site design. That said, I'd advice split testing different colors to see which one works best for his audience. And depending on the color of your website, you'll want to find a color that stands out but still looks good with the overall design. I'd make the word "free" stand out more. Again, as this is the only place you can actually download any of his music on the site for free (I couldn't see anywhere else, but feel free to correct me if I'm wrong), my guess is a lot of people would be interested and add their details. One last thing I'd do is add a "name" input box in addition to the existing section for people to enter their email address. This will allow you to send out more personalized emails, using their name in your communications. This will in turn increase the email open rates received, and get more interaction from the majority of subscribers. The above changes shouldn't decrease his social traffic much if at all, but should greatly increase his mailing list sign up numbers. Overall, if he sends out weekly or bi weekly emails to his mailing list, traffic to his website and people getting reminded of him should increase with the above.

Latest Tweets Before Latest News

Ed displaying his latest Tweets before his 'latest news' section again points to the fact he wants most of his interaction to occur off his site and on social media. While his Twitter page is updated with multiple Tweets daily, his blog is updated a lot less frequently. Should you also be doing this? Well, it'll depend on which of these platforms you update most often, and where you want to drive people. Either way, be sure to display your latest blog posts or news on your website, as that's still important for keeping fans revisiting if you make proper use of it.

Latest News Section (And Why You Should Keep It Updated)

While the above Latest Tweets section always has fresh updates and content on it, the updating of Ed Sheeran's blog seems quite irregular in comparison. While there's nothing wrong with updating your social media accounts on a daily basis (I actually encourage you do that as you start to build a following), it's also a good idea to update your blog at least once a week. Not only will this encourage people to keep coming back as they know something new's going to be waiting for them, but you're also adding content to a website you own. If Facebook or Twitter was to become unpopular some time in the near future, that would be another platform you've put a lot of time and effort into, only to have to build up a presence on another platform now. That might seem like an unlikely scenario, but it happened with MySpace, along with a load of other previously popular sites over the years. The reality is, you have a lot more say over how long your site stays around and remains an effective tool for marketing your music. So invest more time and effort into it over anything else. Use social media to drive traffic back to the main content which is hosted on your site.

The Store

Any good music website should have a store or shop page, and Ed's one is a beauty. As I mentioned in the last part, the layout of the website makes it easy for you to consume all his content and grow a real liking for him. Then once you've done that, the option to buy something comes up. A percentage of his new fans will take him up on that offer. This store "widget" on this music website is situated at the bottom of his right sidebar. It displays two of the t-shirts available to buy in the store, and anyone who scrolls down enough is sure to see it. This is because pictures are eye catching, and the colors of the t-shirts stand out. No matter what stage of your music career you're at, if you've recorded any kind of material, you need to give people the option to buy something from you. There will always be people who want to take their relationship with you further, and for some, buying your music or merchandise is the way to do that. So let them give you money if they want to. I'm not saying that everyone who likes you music and visits your site will want to purchase your music. In fact, a lot of them probably won't. But some will. If you don't have a store page on your website, you're quite literally losing out on money. When you make a music website, be sure to include one.

His Website Footer

The footer of the Ed Sheeran website is in all honesty quite boring. That said, that's probably a good thing! There are a few things you ought to display on your website, such as your privacy policy and any other information needed for those using it. That said, the average music fan isn't going to have a interest in this stuff. So while you need to display it to cover yourself and for those that have a interest, you don't want to draw attention to these options. As you can see, Ed's design team have linked to all the necessary non music related information in the footer, and kept things pretty plain as to not draw attention. These options aren't hidden, but they're not really promoted in any way. Furthermore, the footer doesn't take up much space. This is how it should be.

A Couple Of Other Things About Ed's Music Website

Ok so we're near the end, but there are a few more small points I want to mention about his site which you might want to consider when making or redesigning your own:

Ed Sheeran's Website Background

If you have a look at the background, you'll notice it's largely quite plain. There's a image near the bottom, but other than that it's one single plain color. No images, logos and the like. The reason this is a good thing is because you don't want to distract people from the main content of your site. Yes you could put a background which features your logo again and again, but that won't really showcase what you're really offering. In fact, it's actually a turn off to many people. Complex background images often look too busy, and make your website look cluttered. This is annoying for a lot of people, and increases the likeliness that more people will "bounce" off your site. Your "bounce rate" is when someone visits one page of your site and leaves without going any further. Of course, this isn't a good thing. Keep your background simple. If you want it to look that bit better, maybe add a gradient color to it. But avoid making your background too complex, and let people focus on your website's content instead.

The Size Of The Logo In The Header

The next thing I want to point out is the size of the header section. I've seen many music websites have big headers which take up half of the screen. While this may seem like a cool and powerful things to do, again it takes away from the real content which is going to win you fans and get people to keep coming back to your site. Look at any of the big popular websites. Amazon, CNN, BBC. Do any of them have big headers? No, they're all quite small in terms of height. This is how it should be. As I mentioned in part 1 of this guide, the main thing that stands out when you first visit the homepage of Ed Sheeran's website is his video playlist. This is something website visitors can interact with, and will increase their bond with him and his brand. A logo on the other hand won't have the same affect. As a general rule, the most important parts of your website should be 'above the fold'. This means people shouldn't have to scroll down the page to see them. If you have a big header you'll be able to fit less things above the fold. If you keep your header reasonably low in height (as the designers of the Ed Sheeran's site have done), you'll be able to add more features above the fold. This will lead to better conversions with regards to what you're trying to get your website visitors to do.

The Flags In the Top Right Hand Corner

The last thing I want to mention are the flags in the top right hand corner of the site. This allows visitors to choose a website version which best suits their needs based on their location and language. The reason I mention this last is because, while it's a handy feature, it's not really essential when you're first creating your website. Having different versions of your website is a big job, and not one that can be done very easily. It's because of this that I'd suggest you don't worry about this side of things for now. If you ever get to the stage where you're getting a lot of international fans and visitors to your site (or if you're already there), then go ahead and get this feature sorted. But if you're still quite a local act or have a reasonably small fan base, the time and money that'd go into setting up a feature like this wouldn't be worth the effort. So while it's a nice feature, it's something that you most likely won't have to worry about for now.

How To Build A Music Website Like Ed Sheeran - Final Thoughts

So there you have it, how to create a music website like Ed Sheeran. If you already have your own site, hopefully you can use the above tips to better structure the layout of your site. Having your own website will be one of your key marketing tools as a musician. I hope you found this guide useful, if so please share it with fellow musicians and on social sites. Thank you. About the Author: Shaun Letang, Music Industry How To. This is part 2 of a two part case study I've been doing on the Ed Sheeran website. If you haven't yet got a site, you can follow this guide to making one and then put into practice. You can also see part 1 of this guide here. I suggest you read both to get a full picture of how this website works.

0 comments sorted by best / new / date