88Nine Radio Milwaukee

A revenue-generating website to complement on-air efforts.

Radio Milwaukee positions itself as a stimulant for a more inclusive and engaged community in Milwaukee through events, storytelling, and music. Their website is five applications in one. It's their online publishing platform, web revenue platform to sell local advertising, playlist application to save on-air DJ's sets, live streaming service, and an event management application. Flipeleven led two redesigns, and the engineering process to each system work together while satiating the content and listening needs of their user.

Deliverables
Four Applications

88Nine's site is powered by four apps in one to provide online publishing, advertising, playlist, and event management.

Improved Speed

A few creative and technical tactics combined to improve the actual and perceived speed of the website.

Results

A 21% increase in time spent on site, 90% positive feedback in user testing, AWWWards.com honorable mention, and Milwaukee Press Club Gold for best website design.

Four applications work together as the backbone of 88Nine's website

Online Publishing Platform

On the backend, we built a publishing platform and content management system using a highly customized version of Wordpress. The front-end, on the other hand, totally ignores the Wordpress framework. We built it this way to allow for continuous streaming of their music stream while browsing content on the website. Users can enjoy some tunes while browsing through the latest Radio Milwaukee articles. This uninterrupted entertainment ecosystem was accomplished through a custom API to retrieve content and displayed through a JavaScript-based single page web app built using best practices of progressive web apps.

Web Revenue Platform

Radio Milwaukee wanted to expand the website advertising that existed on their previous website. There were only three options for ads and not a lot of opportunity for impressions. The redesign, however, required a significant overhaul in design. As both a musical and lifestyle trendsetter in Milwaukee, they were serious about the creative and user experience on the website. We created a multi-tier advertising product for them to take to local businesses.

Playlist Application

A complex series of events were in mind when we built the playlist, take all the songs from the live radio stream, and save the dates and times. We also had to tag, alter, or delete specific content like local bands, interviews, and advertisements. Last, since we only get song and album data from the meta-data in the stream, we used Spotify API, and The third-party streaming service we used was Streamguys. Radio Milwaukee sends up song and metadata to the stream, Streamguys provides an endpoint for the website both the playlist application and the site to consume. While the website offers the playable stream to the users, the playlist application does a series of events before saving the song, date, and time to a separate database that lives in an AWS cloud.

Event Management Application

The event application is a custom modification on multiple existing Wordpress plugins. Our custom front-end does not allow for complex front-end plugins to display without a little bit of design and customization.

Fast loading through creative, technology, and testing

Many things can be done in combination to ensure a speedy website. The most fundamental piece of technology we incorporated into the 88Nine single page web app was a rest API endpoint. Still, some tiered loading and subtle design and animation tweaks help make this site feel as fast as it is.

Creative

Design and user experience choices made can affect the perceived speed of a website. Poor use of a loader, for instance, can make a site feel slow. Alternatively, presenting content as it's available can make a website can seem fast. Radio Milwaukee's site uses progressive web app the best practices and offers content as it's loaded. Frames of images and text are displayed, then fully loaded into view as soon as available. The frames use subtle looping animations to give a visual cue to the user that the page is loading. The simple technique of visually presenting where content will load increases the perceived speed of the website.

Technology

This endpoint was built to request Wordpress data saved to the database through the admin. There are existing plugins that can get you most of the way there, but none of them met our speed requirements. Caching was built into these requests to speed up the response time of the website.

Testing

A series of user tests were performed to make sure our creative and technical efforts are improvements to the end-user. We first tested the updated design against the previous website, then the developed home page for speed improvements and usability. Tests were incredibly successful, and only small modifications were made based on user feedback. In the end, we completed a website design inclusive to the final user.

Results

A 21% increase in time spent on site, 90% positive feedback in user testing, AWWWards.com honorable mention, and Milwaukee Press Club Gold for best website design.