I was brought into On Top Communications to help build a better online presence.  This was a combination of UX and visual design.

Stakeholder Concerns

  • Need new websites for all of the stations
    • All should have the same layout, but branded with market colors
  • Need to increase traffic to websites
  • Websites should compare to competitor sites
  • Advertisers do not feel they could get any return for online advertising
    • Need dedicated spaces for online advertising

Research & Analytics

  • User Interviews
    • With assistance, I put together 3 focus groups (2 groups of listeners, 1 group of on air staff)
      • Group A – Ages 18-24
      • Group B – Ages 25-35
      • Group C – On Air personalities and Dee Jays
    • Listeners were given a set of tasks to complete on the current station website and a competitor website using 1 of 3 media devices
      • Desktop computer
      • Tablet
      • Mobile Device
    • Listeners were asked to describe their experience using the station website, how it compared to the competitor site, and what features if any would they like to see on the new site
    • Listener Feedback
      • Hard to navigate on phone
      • Content was old, or no content available
      • Other stations showed what song was playing
      • Other stations had lots of entertainment news stories
      • Other stations had interviews to watch on video
      • On air personalities would like to be able to do more with their page
  • Web Site Analytics
    • Did an analysis of the current web sites
      • Most page views
      • Least page views
      • Average monthly page views in the last 3 months
      • Average unique visitors in the last 3 months

After meeting with the stakeholders and completing my research and analytics, I set out to meet these objectives:

  • Create a mobile friendly design (Bootstrap Framework)
  • Create a layout that is easy to navigate
  • Create content that draws listeners to the site on a regular basis (increase average monthly page views and unique visitors)
  • Include ample space for online advertising in desirable locations

Information Architecture

I started with determining the navigation that would work with every station regardless of the genre.



Next, I began to layout the mobile and desktop design.


Once I had sketches of my design, I put them together in an Axure wireframe to present to the stakeholder.

This slideshow requires JavaScript.

The stakeholder liked the layouts I presented.  I continued on to the visual design step and created an HTML prototype for beta testing.

User Testing

With the HTML prototype complete, we brought back our original 3 focus groups to complete the same tasks on the new site.  We also presented the beta platform to different advertisers and requested their feedback.


We received positive feedback from both the users, advertisers and the stakeholders. Everyone was excited about the new layouts and eager to participate in preparing for the launch.

The design assets and notes were handed over to a developer to develop into a WordPress template.