Web Design for Hushh Online Radio

We’ve just got to tell you about our latest great project for a new client, Hushh Radio. Having found us from our case study of the LeCandyLab redesign, Amba from Hushh gave us a call to work with her on her latest creation – Hushh Radio. Here’s a short case study on the project. design-for-online-radio-homepage-preview

Website Planning / Research

Our brief was to create a cool, uncluttered, easy to navigate site targeted at 15-25 year olds who like to listen to contemporary urban music and like to interact and contribute to the music they listen to. The main message of the site was ‘your music, you decide’, where the listeners ‘likes’ automatically create a top 10 chart for the week. Amba already had a logo created for Hushh and wanted us to carry the logo colour styling through to the website. She also wanted us to incorporate space into the design for potential advertising in the future. From our questionnaire, and clients budget, we established that the main pages of the site we’d produce designs for would be:

  • Homepage
  • Register (lightbox)
  • Programme Schedule Page

Website Wireframes

Having established the goals we’d been set by the client, we were ready to produce wireframes for the main pages of the website. These allowed Amba to see blueprints of our thoughts and ideas for how we intended to lay things out.

Homepage Wireframe

Here’s a quick look at the homepage wireframe layout we proposed: design-for-online-radio-home-wireframe You can see the layout is nice and spacious with room for a big visual at the top to attract people to listen live and register. Then below this is a clear area broken into three columns showing the current track, upcoming tracks and a form field to make a request. Further down we’ve got an area to showcase this weeks Top 10 Chart, and a sidebar area highlighting Top Users with room for advertising. Below this we’ve reiterated the fact that there are three ways to listen to Hushh (on your PC, Tablet, Smartphone) with more social links next to it. Finally there’s space for another advert.

Register Lightbox Wireframe

Next we worked on the wireframe for the Register lightbox. We proposed that the Registration form pop open in a lightbox/modal window to keep things simple. We also advised that it would be a good idea to allow users to use their social profiles (Facebook and Twitter) to register on the site too, as this would help promote the site on these platforms. design-for-online-radio-register-wireframe We also produced a wireframe for the Programme Schedule. You can see the design for that page later in this post.

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 main aim was to create something that was a bit different for an online radio and something with high impact that would appeal to a younger audience (teens & 20 somethings).

Homepage Design Concept

Here’s the design concept we produced: design-for-online-radio-homepage Those of you with a keen eye will spot that we did decide to make a change to the design of the ‘ListenLive!’ button from the initial wireframe. During the design we didn’t think it stood out enough, so we wanted to make this more prominent. To solve this we added a full width opaque black strip at the bottom of the banner to give it space and help it draw more attention. We also moved the wide advertising banner at the bottom of the site to be slightly further up, to generate more clicks. Amba was thrilled with the design saying:

‘All I can say is that I absolutely love it! It’s amazing how you’ve used the colours from the logo, the big imagery with blurred background giving a 3D effect. The full width Listen Now button is a nice touch. The whole design is crisp and clear and bright. Absolutely love it! Nice work!’

We were really happy with the concept too – so there were smiles all around! The only comment we had to address was the main imagery, as the client wanted something a bit funkier. The original image we proposed was a teenage girl listening to her iPhone with a cityscape behind her.

Registration Lightbox Design Concept

Below is the design for the Registration Lightbox. You’ll notice the Registration fields were reduced from our initial wireframe and we split the registration into two steps. This was because we decided the form looked a bit daunting when the design was produced. Better to keep things as simple as possible. design-for-online-radio-registerlightbox

Programme Schedule Design Concept

And here’s the Programme Schedule design. We proposed keeping this much the same as the homepage, but removing all the unnecessary content, and focusing on the schedule information in the banner area. The user would click the up/down arrows to the right to cycle through the days of the week. design-for-online-radio-progschedule

Finally, here’s what the client said…

Hushh was a brilliant design project to work on as Amba was keen to get involved and gave us such encouraging feedback. When we asked Amba for some feedback on the project her parting words were:

“Absolutely amazing. I’ve never had a website design done before that I have thought ‘WOW’ on a first version. Very happy bunny!”

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?