Are you looking at Developing a new Website for your Radio Station? This article will help you with this project, guiding you through the twelve steps you need to complete.
Radio station websites generally aren’t great. They make mistakes in the areas of information architecture, functional design, and usability. As more and more radio stations realise there is a need to develop a strong online presence, this is starting to change. While terrestrial broadcasting still has it’s place, it’s important to develop your radio station’s website to engage your audience in new ways and unlock additional revenue streams.
The steps I will be walking you through are as follows:
- Needs Analysis, Business Plan & Functional Specification
- Usability studies
- Competitive analysis
- Information architecture
- Functional design
- Graphic design
- Technology identification & selection
- Development
- Content migration
- Testing
- Launch
- Maintenance
Yes, this is a lot of steps. I don’t want to shield you from the reality that this project is lengthy and complex. The aim of this article isn’t to dumb down the process, but to ensure you are fully aware of the steps involved.
If you need to bring in external contractors or consultants, then please do so. As someone who has been through this process, and seen others go through it, I can say that rarely is an organisation equipped to complete the entire process with internal resources. There is no shame in using external resources when needed.
As I have done a lot of work for not-for-profit community radio stations, this article features some elements that are suited towards these types of radio stations (e.g. donation pages). Rest assured, most of the advice also applies to commercial and government-run radio stations.
Step 1: Needs Analysis, Business Plan & Functional Specification
The very first step in developing a website for your radio station is to identify your needs for the new site and create a business plan around this. This frames the rest of the discussion, and essentially states what direction the site will go in. Some points you should consider:
- Mission
- Objectives (broad-level)
- Goals (Measurable and Objective)
Developing this plan will help you identify what you want to get out of your new website. You could decide you want the website to focus on listening to your live stream, at the cost of everything else. Or you could decide you want to publish written or on-demand content and have that as the focus. These are important high-level decisions which inform the rest of the project.
Here are some questions you should ask as a part of this process:
- What do you want the user to achieve on the site?
- What message do you want to convey to the user?
- Who is your target audience?
- What differentiate your website from the competition?
- What are the financial requirements? (e.g. advertising revenue)
Once you’ve determined the direction of the site you need to create a functional specification. This outlines every aspect of the site, and how it is to work/behave. Here are some example points you may wish to include:
- Site-wide
- Open source CMS
- Responsive design with mega-menu
- Supports browsers down to IE9
- Meets corporate branding guidelines
- Homepage
- View recent and featured articles
- View recent and featured audio-on-demand
- Launch popup streaming player
- Show the current song & show
- Streaming Player
- Stream the live stream via MP3 & AAC+ streams
- Play/pause button
- Volume control
- Pops up in a new window/tab
- Compatible with most common browsers via HTML5 & Flash-fallback
- Show the current and recent songs
- Links to buy current and recent songs
- Show the show on air
- Show recent articles from the website
- Display advertising space
- Help text
- See my article on streaming radio players for more guidance
- Donation Page
- Make a monthly recurring or once-off donation
- On-page form validation
- Server-side fallback validation
- Credit Card Gateway integration
- CRM integration
- SSL delivery of the page
- See my article on radio donation pages for more guidance
The functional specification should be very detailed, and go over every aspect of the website ensuring that no details are omitted.
Finally, you’ll need to do budgeting here. Determine which components of the site will be built externally, and which will be built by an in-house team. You may also need to hire a Digital Producer to create new content.
Step 2: Usability Studies
The best way to determine what works and doesn’t work on your existing website is to watch people using it.
In the simplest form, a usability study would consist of one person sitting in front of your website running certain scenarios and another person observing that. Here are some example scenarios you could run on your existing radio station’s website:
- Listen to the radio station in your browser and change the volume
- Find an interview from the Breakfast show with Steve Carell
- Make a monthly recurring donation of $5
The Nielsen Norman Group has an excellent article on writing Task Scenarios.
The users who do your tests could be staff, listeners, friends or complete strangers. Websites such as UserTesting.com allow you to send tests out to complete strangers – this strategy is good because you can almost guarantee users aren’t familiar with the site at all.
Ensue that users know they aren’t being tested – it’s the website under examination and there are no wrong answers.
Step 3: Competitive Analysis
Competitive Analysis is the process of looking at other website and determining what they do and don’t do well. When you do Competitive Analysis for Radio Station Websites, make sure you not only look at other radio station websites but also at general publishing/media sites. I have found that radio station websites overall exhibit poor usability and design patterns. There are lessons to be learned from a variety of websites.
Here are some example websites you can take a look at:
- NPR
- Absolute Radio
- Mashable
- The Verge
- 2DAY FM
- Nova FM
- The Guardian
- BBC Radio
- Z100 New York
- Buzzfeed
Make sure you add to this list your local competitor radio stations, as well as local TV and newspaper outlets.
For each site, identify:
- What first stands out when you load the homepage?
- How do they arrange content?
- How do you listen to the station?
- How do you listen to on-demand content?
- How are archives arranged? Is it searchable?
- Are there obvious signs of good SEO?
- How to advertisements integrate with the website?
- What other ‘services’ are listeners provided with?
- How is the main navigation organised?
- When I finish reading an article how well am I directed to more content?
- Are there any efforts to get email sign-ups?
- How is social media integrated with the website?
- What significant design elements have been used?
Using this information you can identify what works and what doesn’t across a variety of other websites. By this stage you should start getting an idea in your mind of how your new website will be organised and designed.
Step 4: Information Architecture
Information Architecture is all about how you organise content. It’s about site navigation, content types, categories, tags, menus, and URL structures. Using the information gained in the previous steps, you can start to map out how different types of content are organised.
I find it helpful to start this process with a Card Sorting exercise. Write out every different bit of content you imagine you’ll have on the site, and group them together. Having multiple people complete this exercise and comparing the results will inform your site’s structure. Usability.gov have a comprehensive article on Card Sorting.
Armed with the information from your card sort exercise, draw out a potential navigational structure on a whiteboard. This can be done as a workshop session with a couple of other informed individuals.
With a navigational structure worked out, you can now determine different page types, categories, and everything else to do with the information architecture. It may be worth revising some websites from step 3 to see how they organise their content.
Step 5: Functional Design (Wire Framing)
Functional design and Wire Framing is how you determine what the site looks like, without actually creating graphics or code. Armed with the knowledge gained in your competitive analysis and information architecture stages, you can begin to draw what the site looks like.
I find this is best done on pen and pencil, so you can iterate through designs quickly. Wire Framing is a low-risk way to work out what the site looks like and how it will function. You should never touch Photoshop or HTML as a part of this process.
The homepage is the best place to start, followed by your key page types (player, content pages, etc). Consider modern design approaches, such as large photographs, large text and full-width sections. Many of these elements should’ve been evident on competitors websites.
Six Revisions has a wonderfully extensive guide to Wire Framing which I encourage you to read.
Step 6: Graphic Design
It’s been a long process, but you can now finally begin to get a sense of how your new radio station website will look visually. Photoshop is probably the tool of choice here, but that’s up to your designer.
Everything up until this stage could be done by in-house people (I don’t recommend that), but I suggest you finally look at hiring a contractor or consultant to complete the graphic design. Even if you start the design yourself, you’ll appreciate the polish of a professional designer. If you can’t afford a professional designer, then consider a website such as 99Designs or Design Crowd. Make sure you get layered files (PSD’s if you’re using Photoshop) as a deliverable from your designer.
Not every page needs full graphic design done. Ensure you have all elements and key pages designed. With the wire frames, you can ‘fill in the gaps’ in the development stage.
Step 7: Technology Identification & Selection
Choosing the technology stack is the last thing you need to do before actually building the site. There are many considerations, and choices will be influenced by what your developer is comfortable using.
I recommend you go with one of the more popular Open Source content management systems, such as WordPress. Proprietary systems will lock you in to specific vendors, and probably need to be thrown out in a couple of years anyway. Also, please avoid building your own system. There are very few reasons to do this for a content-driven website.
If you don’t choose WordPress, then consider other open source systems such as Umbraco or Drupal.
Apart from your CMS, you also need to select other pieces of technology such as:
- Source Code Control (e.g. Git)
- Database (e.g. MySQL)
- Javascript framework (e.g. jQuery)
- HTML framework (e.g. HTML5 Boilerplate)
- Web host (e.g. SoftLayer or Digital Ocean)
- Plugins for your CMS
- Backup solution
- Streaming audio player library
- Site Search Engine
You also need to determine which browsers you are targeting.
For help selecting WordPress plugins for your website, I’ve written an article which features some of the best plugins for WordPress.
Step 8: Development
Development of your Radio Station Website is when the actual code is written. If the work has been done properly in the previous steps, you shouldn’t need to do too much hand-holding of your developer. Here are a few common pitfalls to look out for as you go:
- Hacking the CMS core code (rather than building plugins)
- Not using Child Themes
- Not escaping user-entered data (XSS attacks)
- Form validation issues
- Building code when a good off-the-shelf solution exists
- Lack of source code control
- Not paying attention to URL structure
- Not paying attention to SEO best-practices
Testing should be completed as each section of the site is build. This will avoid one huge bug-fixing session at the completion of the project. Trust me, it’s cheaper to test as you go.
If you are yet to pick a developer, make sure you ask these 52 questions of any potential hires.
Step 9: Content Migration
Content Migration is a terrible job, but it needs to be done properly to ensure you don’t loose old content and the advantages that come along with that. My strategy is as follows:
- Manually create all top-level pages
- Manually redirect all top-level pages
- Export the content (except top-level pages) from your old CMS
- Write a script to go over this data and transform it to meet your new information architecture (merging or splitting content types as necessary)
- Import that content
- Import the redirection from your old content to your new content
You can use various site crawling tools to ensure your redirection works correctly and you haven’t lost content in the process.
Step 10: Testing
While testing should be done as the developers complete features, you also need to do a final massive test of the site before you launch. Here’s how you do this:
- Document all required features (this should already be done as a part of your Functional Specification, but make sure it’s up to date)
- Go over each page and test it for the required functionality
- Create a list of bugs and missing features as you go
- Conduct regression testing as the developer fixes bugs
- Conduct load testing
- Run a crawler over the site to ensure the URL structure is expected and you don’t have broken links
Steps 2, 3 and 4 should be completed across a variety of browsers. I also suggest you get a number of people on your team to run through the tests. It may even be worth running usability tests again over your new site to ensure you have fixes the issues identified in Step 2.
SitePoint have a very comprehensive site testing checklist. You can use this as the basis of developing your own site test plan.
Step 11: Launch
Launch can be done after:
- Development has completed
- Testing has completed
- Your team is ready
I prefer to do a site launch between major events, campaigns, and when the traffic is lower (weekends or evenings). I also prefer to run the new site off a new web server so you can just update the DNS records without having to mess around with virtual hosts, etc. It also means your new site is isolated from the old site (making it safer to turn off the old server).
Make sure you and your team have plenty of time to respond to bugs and issues when the site launches. If there are known bugs at launch time, then have responses pre-written when people complain.
Step 12: Maintenance
A site is never ‘complete’. You now need to keep maintaining it. This could mean:
- CMS Updates
- Plugin updates
- Bug fixes
- Design changes to keep up with trends
- Adding or removing pages
- Content updates
Ensure you have a plan for maintaining the site so it doesn’t get out of date.
In Conclusion…
Building a website for your radio station is a huge process, and not for the faint of heart. If you don’t have the skills or experience, please get a consultant on board to guide you through the process. I have been through this process before, so please consider me to help with your project.