Case Study: Web Design for Online Radio Station – Diva Radio

Today we’ve got another new project to tell you about – our recent great project for new client Diva Radio. Diva found us as they’d heard about our previously successful web design projects for LeCandyLab and Hushh Radio and were keen to work with us to see if we could refresh their website and online radio player. diva-hpage-head

Website Planning/Research

Our brief was to create a fresh, bold website that looked professional and was to the same standard as many other mainstream stations. Daniel wanted to provide listeners with more than simply a portal to listen to music, and instead go a step further by also having content which could be updated on a daily basis—such as news, brainteasers and celebrity birthdays. With a focus on celebrity gossip & news, encouraging audience participation and interaction was vital. The success of the Diva website would be measured not only by increased visitor traffic; doing more than simply navigating to the live radio player, but also an increase in advertiser interest thanks to a newer, slicker, more polished online presence. With our questionnaire and the clients budget in mind, we established that the main pages of the site we’d produce designs for would be:

  • Homepage
  • Programme Schedule Page
  • Individual Show Profile Page
  • Features Page
  • Competition Entry Page
  • News Page
  • Individual News Article Page
  • Ways to Listen Page
  • Contact Page

Website Wireframes

Having established clear goals we were ready to produce wireframes for the main pages of the website. These wireframes allowed us to brainstorm our thoughts and ideas for the layout of the key pages of the Diva site.

Homepage Wireframe

Here’s a quick look at the homepage wireframe layout we proposed: diva-hpage-wframe While the client preferred a more boxed-in approach than a full browser-width layout, one of the main layout challenges would prove to be allowing everything room to breath while giving visitors obvious links to the varying content. We tried to arrange things according to the content hierarchy and each sections level of importance. The primary calls-to action on the homepage are still the “listen-live” links, which can be seen repeated in the header, and the banner (above the fold). Advertising in the header and sidebar was a necessity as this is the main source of income for Diva Radio. Further down, we have areas dedicated to ‘celebrity birthdays’ & the ‘Diva dilemma’ as well as a larger section for the latest news. There is also a section where we reiterate the fact that there are three ways to listen to Diva Radio (on your PC, Tablet, Smartphone). Social media was also regarded as key for increasing Diva Radio’s web presence as well as allowing user to ‘take-part’ in it’s daily activity. Therefore sections dedicated to Twitter, Facebook and Google+ can be seen scattered throughout the sidebar, header & footer of most pages. Finally in the footer is an area for the logos of Diva Radio and it’s partners, as well as a link to allow visitors to sign up to the newsletter and receive weekly email updates.

Features Page Wireframe

Here’s a look at another wireframe; this time for the features page. diva-features-wframe From earlier discussion with Daniel we had come to the conclusion that we would have two forms of article on the website. ‘Features’, which would be articles written by the client, making full use of the content management system the site would be built on (WordPress). And more general ‘News’ which would simply pull articles from another source utilising RSS feeds and display them in a manner that was consistent with the look & feel of the website and Diva brand. We proposed this page would display featured articles within the scrolling banner, and in varying layouts within the main content section. Functionality allowing visitors to comment on these features would be adopted, giving the site another dimension with regards to interactivity & audience participation. The sidebar on this page would contain a larger visual with a field for signing-up to the newsletter and also further down to ‘listen live’.

Moving onto the Design Concepts

The wireframing gave both us and the client a good feel for how things might look going forward and established what content we’d want to include at the design stage. The challenge now would be to strike a balance between bright, bold & energetic visual cues with the subtleties of modern, space-conscious & un-obtrusive design. We were aiming for something in-your-face but without any of the pitfalls of looking cheap or unprofessional.

Homepage Design Concept

Here’s the design concept we produced for the homepage: diva-hpage Those of you with a keen eye will notice that the inclusion of more partner logos meant a slight re-shuffle of the footer layout, we also realised during the design stage we wanted to include a small about us section here to help the site rank higher on Google. Daniel was very happy with the initial designs and it only took some minor changes over the course of a few iterations to allow the designs to reach their full potential from the perspective of everyone involved.

Features Page Design Concept

Here’s the design concept we produced for the Features Page: diva-features Again we tried to be audacious and original, with the use of vivid gradients and large titles for each article. But maintained a professional look and feel with flat white backgrounds ample line-heights, margins & spacing.

WordPress web development

Daniel was quick to sign off the designs and allow us to get started integrating the concepts with WordPress. Literally everything is editable on this website, so Diva have complete control over their on-air schedules, and all page content. As previously mentioned the Diva site also pulls much of it’s content from various RSS feeds, so the content is effortlessly fresh. And as with every other project we work on, it is fully responsive, so the website adjusts beautifully on mobile and tablet devices too. resposive-diva

Custom design HTML5 audio player

As part of the project we also got the chance to design and create another HTML5 audio player. Here’s a quick look at what that looks like: radio-player

In conclusion…

Diva Radio was a fun, interesting project to work on, providing us with new & exciting avenues of design to explore. Daniel was keen to be involved in the process and gave us great encouraging feedback throughout. Here’s the review he left us:

I approached Authentic Style to re-design the website for Diva Radio, an online radio station. With little idea on how I wanted the new site to look and with so many ‘wish list’ features, I was intrigued to see what Will with his design & development team would deliver. The final result is just amazing and far exceeds my expectations – every feature desired has been implemented and no change however big or small has been an issue. I would highly recommend Authentic Style as a company who certainly live up to their name and I look forward to working with them in the future to further enhance our listeners online experience.

Why not visit Diva Radio & see the final outcome of the project, we think you’ll be pleasantly surprised.

Subscribe to our newsletter

Get access to all our guides and resources

We will never treat your email address badly. We’ll love and cherish it and treat it right.

Would you like to be notified each time we post new digital media?