Radio Kingston
Website & App

Background

Radio Kingston is a non-commercial platform dedicated to a vibrant, just, and healthy Kingston centered around community storytelling, artistic and musical expression, conversation and connection. It is located in the city of Kingston, NY, where I have worked and lived for the last 4 years.

I worked on this project as a UI/UX designer during the time I worked on the front end team at Moonfarmer (2017-2018). A contracted designer came up with both of sets of branding we worked with through the project, and we had to design the site to algin to look and feel from the logo. I worked with my team to design this site using text styles and components in a consistent way that could be translated by our developers easily. We also worked in Sketch symbols, keeping our React components in mind. We worked on this in an agile methodology in 2 week sprints. For a year, we added new features, took in user feedback, and improved the overall user experience on the website, and eventually on the cross platform app.

Radio Kingston Website

Website - Version One

The Radio Kingston website launched the same day as the station itself went live on November 1st, 2017. Leading up to the launch, Moonfarmer was tasked with preparing a website for the station that would show basic information about the on air hosts, a schedule of the shows on the air, and basic information about the station.

Information Architecture / Wireframes

The head of our front end team made the site map/application diagram for the site (pictured below), and I used that to create the wireframes below. I linked up the pages of the wireframes in Marvel so that when we presented them we could make it so the stakeholders could try it out for themselves and see if the content relationships made sense to them.

Screen Shot 2019-09-12 at 6.28.38 PMScreen Shot 2019-09-12 at 6.28.38 PM

Visual Design

After our wireframes were approved, we started experimenting with what kind of look and feel we wanted to establish for the website and cooresponding pattern library. Below are some different options we explored before we settled on our final option. We needed this design to be accomodating to switching back and forth between English and Spanish, because a feature we built into the site was the ability to switch the language without reloading the page. The React app made it so we could switch out the content in the strings on the page without reloading styles or making any other changes to the DOM.

Something we ran into during the design process was we wanted the site to feel like Kingston. In our earlier prosopsed designs, we were stongly tying the design to the elements in the logo they were using. The branding at the time wasn't what they intended on keeping, so we were advised to not worry so much about "matching" the identity. We needed to establish a look and feel that would work still if we switched out the logo. Eventually, we landed on the idea of incorperating illustrations of some buildings around our city to give the site a more "Kingston" feel.

Finalized Design

We honed in more on the buildings concept and built it out to be what went on to be the inital release of radiokingston.org. We were on a tight deadline, so we ultimately decided to do some key screens in high fidelity and take the cues from our wireframes for the rest. At this point of the project, I switched over to help on front end dev to style React components as they were being built. It was a lot of work, and the deadline was tight, but ultimately our team got the site where it needed to be on the day of the station annoucouncement. 

Website Features Added in Later Sprints

We did not get to do everything we wanted to do in the intital release of the Radio Kingston website. We had a one year contract to work in agile sprints, where we would work on new features and enhancements, release them every two weeks, and collect . The process of building this website was truly iterative, and we worked in two week sprints, utilizing boards in JIRA. After the site initially launched, we discussed with the leadership at Radio Kingston and collected user feeedback to get insight on what features were going to be our top priorities. From there, our project managers created a a roadmap of future sprints.

About Page + Addition of Board of Directors

My first assignment for a UX enhancement on the site was on the About page. At the time of launch, it was just a paragraph on a page with a little overview of what Radio Kingston is. The team at Radio Kingston wanted to make themselves more accessible to their listeners and put faces and names to the organization. Utilizing mostly exsisting components from building out the rest of the site, I created a solution to show all the board member's information to more efficently connect them to the public.

Media Player Experience + Archive Release

One of the most critical aspects of the Radio Kingston user experience was it's audio listening experience. We did release an audio player as a persistant UI component from the start, but it was about to become a lot more advanced, as we were beginning to lay the groundwork to allow show hosts to post recorded audio of past broadcasts to the website for site visitors to listen to.

Today, this is the main use of the Radio Kingston website, and is a large reason why I view this as a software project and not a just a web design project.

At the time of working on this feature, we started to establish more of a process in my decks to propose new features. The leadership at Moonfarmer had an interest in our designers to adopt Atomic Design into our process for creating components, which isn't exactly the way I like to work (I think a lot of the terminology gets lost on folks who aren't super tech-saavy), but it did definitely did start my interest in pattern libraries and design systems.

Search

After the episodes archive launched, it became evident pretty quickly that users needed a better way to locate older episodes of shows that were posting at a high volume (some Radio Kingston shows broadcast five times a week!). Also, as time went on, more shows were getting added to the lineup on the station.

As a team, we decided that having a site-wide custom search was going to be what was best for our users. We didn't want to jam in some generic search solution that wouldn't understand the context of the station's website, so when we were were developing the mechanics, we decided to offer the option to filter the kinds of content the search would return. We also had to develop a component for search results that would properly display every kind of content we had on the site.

Podcasts

In late April of 2018, Radio Kingston annouced that it would be offering its studios and resources to aspiring podcast hosts in our city. Some exsisting shows were also going to start exsisting as podcasts too. While the content type of podcasts was quite similar to what we had from our exsisting archive experience, these would also be ditrubuted out over tradional podcasting platforms and would not appear in the Radio Kingston show schedule. 

Stakeholders at Radio Kingston also wanted us to differentiate anywhere that listed shows or episodes whether they were from a podcast show or a "broadcast" show.

When incorperating this feature, I had to refactor any pages on the site that this feature would touch so that our engineering team would know what to do. In order to do this with the least possible friction, I collaborated with our project managers and the engineer who would be working on development of the feature in our next sprint.

Show Card Refactor

After we had done all of this work on the shows archive and podcasts, the site had pretty much fully shifted from being an informational website about a radio station to a browser based audio experince. Considering this, the way wer presenting shows as types of content didn't really make sense anymore. We were getting a really positive response about the cards we used for podcasts and broadcast episodes and our analytics data was showing there was too many steps between the user finding a show and being able to access an episde of that show to start listening to it.

We decided refactor the show cards' design to align more to the episode cards. We wanted to provide imagery so the pages that listed shows would be more visually appealing and provide more context to the user.

Incorperation of New Branding

After months of working with a freelance designer, Radio Kingston was ready to release their new branding. They wanted to roll it out across all of the platforms their brand exsisted on. For our team, that meant the website, both apps, and all the Radio Kingston social media platforms. As the main designer on this project, it meant that my work was cut out for me! 

Refactoring the Website Header

My first task in this was refactoring the site header to accomodate the new logo, which was a completely different shape and had to fit into the composition in the various states of the header that had been developed in the media player experience.

 

Social Media Profiles

While Moonfarmer wasn't managing Radio Kingston's social profiles or anything like that (all posts you see on the RK social media profiles are actually all created by show hosts and staff, which I think is pretty neat!), we did help them manage their digital presence at some points in time. This mostly was their profile and cover photos on Facebook and Instagram. In order to get the new ones approved, I designed several options and put them in context for the folks at Radio Kingston to see and know what they liked best.

Assorted Logo Color Combinations and Compositions

Along with the new logo, Radio Kingston was annoucing that they were now going to also be broadcast on an FM frequency, 107.9. This was not initally incorperated into the branding with the freelance designer, and they were no longer available to do any more work. Despite my role being primarily UX design and front end development at Moonfarmer, I put my graphic designer hat on and helped create what I am going to call a "branding system," because really, it became clear very quickly that creating 200+ different versions of the logo was going to happen if I didn't think of it as a system. I ended up utilizing nested symbols in Sketch to get all the color combinations and compositions without accidently having an element be a few pixels off in its "version."

Radio Kingston Cross Platform App

About halfway through our engagement with Radio Kingston, we were tasked with developing an inital offering for an app. When the app was initally released, the radio station had a AM frequency with a narrow range of reach outside of the city. The feedback we were getting back from listeners the most was the ability to easily stream what was on the air from their mobile devices when they were out of reach of the frequency.

The first goal of the app was to allow Radio Kingston listeners to easily listen to what was on the air no matter where they were. We wanted to keep the app simple, and link out to the mobile website is a listener was attempting to access more detailed information.

Another focus for us with the app, was to have an equivalent Spanish language user experince right out of the gate. 20% of the City of Kingston population speaks Spanish as their first language, and a signifgant proportion of their programming is in Spanish. We wanted these listeners to feel fully welcome and acknowledged in their experince on the app.

Information Architecture / Wireframes

UI Design & Prototyping

After we showed the wireframes to the Radio Kingston stakeholders and discussed the proposed structure, we went into designing what the main screens/states of the app would look like. The app was being built as a cross platform React Native app, so when it came to this part, I collaborated with the engineers who would be building the app to see what approaches to design would be most condusive to the way styling works in React Native. We also didn't want to app to rely too heavily on Android app components or iOS components because we wanted a truly equivalent experience across both versions.

We also looked to our exsisting component library from the work we had done on the audio player we had in the website. This also saved time for our engineers, who built the site's frontend in React and had existing React components to work with. React and React Native are not 100% the same, but it was still an exsisting resource.

After I worked on the inital version of the app, the next versions were designed by another designer on our team as my focus was brought back to the website's upcoming features. In the version of the app you'll see if you download the app today, you'll notice it has the new Radio Kingston branding, and the option to listen to archived episodes and podcasts has been added.

 

Screen Shot 2019-09-12 at 2.29.50 PMScreen Shot 2019-09-12 at 2.29.50 PM

The Radio Kingston App is Available on Google Play & the Apple App Store

Outcomes & Lessons Learned

I'm really proud of the work my team did on this project. We took this on a point and time where we were just hitting our stride as a team that develops software in an agile environment, and while I wouldn't say it was the easiest transition, I think all of us learned a lot along the way. I came out of working on this project with a love for design systems and product design, and knew that this was the direction I wanted to take my career.

I got to apply all the concepts I had learned from Design Thinking and Human Centered Design, and steadily incorperated feedback from actual users throughout the process, through in person conversations, watching user sessions on Mouseflow, and going through Google Analytics data. 

It is really cool to get to work on a project that has such an awesome impact on the community you live in. Radio Kingston is such a helpful resource to the people of Kingston and I love being able to say that I was a big part of the production of their digital platform.