Redoing Moody Radio’s homepage

Note: I updated this post in December 2013 to have newer graphics of the final homepage

This fall we updated the homepage of MoodyRadio.org and the navigation of the website, and I thought it would be interesting to post the wireframes and compare those with the final designs. Here is the original design:

Original - Moody Radio Homepage

The new design

There were a few goals in mind for the new homepage design. First, we wanted to better represent that we were a live radio network. So we wanted to show a bit of what was going right now on our radio network. Also, we wanted to promote some of the on-demand content we had, series we were running, or different promotions like fundraisers. And finally we wanted a simplified layout and navigation. Below is the wireframe and final design:

Moody Radio Homepage

 

moodyradiohomepage

 

Navigation

One area I wanted to highlight was the changes we made to the navigation of the website were probably some of the biggest and most helpful as it greatly simplified and cleaned up the website.

Original Design

original-nav

Wireframe

wireframe-nav

Final Design

current-nav

 

One of the goals of the redesign was simplified layout and navigation. One of the biggest steps in that direction was simplifying the navigation. We went from 9 main navigation items to just 4, plus in the final design we were able to further minimize the cross site navigation (to other parts of Moody Bible Institute) by placing that information at the top edge of the page.  This helped make the website more navigable for users, and the addition of the “Listen” menu item help drive traffic to our primary goal for the website which is to get listeners to our radio content. Obviously all of those extra navigation items didn’t just go away, but we were able to move to using a mega drop down menu  so we could better present that same information.

Also as we moved from the wireframe stage to the final design stage, we were able to introduce some good changes including :

  • Changes to corporate branding requirements.
  • Added vertical lines between main navigation items to help distinguish them
  • Moved search inline with main navigation
  • Changed the logo to the stacked version to better fit the layout

Discovery Area

The second area I wanted to highlight was the “discovery” area of the homepage we hoped to surface the current content playing on our radio network and the content on our national programs.

Original Design

original-now-playing

Wireframe

wireframe-now-playing

Final Design

current-now-playing

This section contains two parts, one the “now playing” section which highlights what’s current playing on the national radio network. We had hoped to make this actually be what was on your location station if you lived near a local station, but due to development constraints we kept it as the national feed. Secondly we added a section for promotion national program content, series or specials we had for example.

Conclusion

We made lots of other changes to the homepage, but the navigation and “discovery” areas really were two big wins for making the site more usable and allowing our listeners to discover Moody Radio’s content better.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>