KBCS 91.3 FM

A community-powered radio station website that is responsive and integrated with other back-end services to display live music stream, playlist history and more.

KBCS website screenshot


Site URL



Launch Date

April 2013


Problem

KBCS, a listener supported community radio station, needed to move their website to an entirely new platform because they had just ended their contract with a well known CMS/CRM solution for non-profits. The site needed to be easier to maintain than their current site, be mobile friendly, be able to  consume their 3rd party playlist solution, connect to their live streaming system, allow for advertising, and a handful of other needs.


Solution

We designed a website which:

  • was responsive (using aspects of twitter bootstrap)
  • allowed used custom post types to allow for a more complex information architecture
  • Integrated with their 3rd partly playlist software by using REST and consuming JSON data and played audio archives from that system.  (Search results were tweaked to also include search results from playlist software)
  • Included a custom global message used during fund drives to drive users to the donation page
  • Connected to their streaming service and customized it a little to make it mobile friendly
  • was built using a custom WordPress theme and several custom plugins



Screenshots



What I did

  • Led planning meeting with all stakeholders
  • Designed adhoc personas based on stakeholder research and revised them after reviewing marketing personas
  • Designed the Information Architecture and architecture of website
  • Designed the Interface (>90% of UI work), including baseline grid, font-rhythm & scale and color scheme
  • Worked as team lead in scrum process
  • Scoped most features for the project while working closely with the product owner (at KBCS)
  • Worked closely with developers as they implemented aspect of the website
  • Interviewed staff at KBCS to get a better idea of their processes for updating their website, handling fund drives, advertising, com
  • Developed most CSS, a good portion of the WordPress page templates as well as implementation of playlist & archives feature consuming JSON
  • Software used: Fireworks, Sublime Text 2, Dreamweaver and FogBugz



Sketches, wireframes & mockups



Want more?

This portfolio is a living document and I’m always making it better and keep my notes publicly. I need to add to this page include: screenshots of responsive versions of website, sample of message during fund drives, diagrams of IA, personas document.