Credit: Paul Natkin
Credit: Paul Natkin
Credit: Wade Linder
Credit: Alex Goykhman

Loop 40th Anniversary

WLUP: 40 Years Of Rockin’ Chicago

Website Section

01

Background

A custom online experience, commemorating the rich heritage of 97.9 The Loop

Since 1977, 97.9 FM has been home to one of the most iconic Rock radio stations in America. Legends like Steve Dahl, Steve Garry, Jonathon Brandmeier, Erich “Mancow” Muller, and even Danny Bonaduce (the list goes on) have all graced the airwaves of WLUP throughout it’s 40 years. During its reign, 97.9 The Loop has built an immense following of passionate fans through countless Rock concerts, the introduction of The Loop Rock Girl, and of course, perhaps the most iconic event, the historical Disco Demolition.

The Challenge

To commemorate the 40th Anniversary, our Programming Department wanted to raid the archives and create a custom online experience that showcased all of the history of 97.9 The Loop – a website that could handle a variety of content, ranging from listener-submitted photos, to exclusive audio, to blog posts about rarely seen promotional items. This website also needed the flexibility to grow and evolve if necessary throughout the whole year.

My Role

I worked closely with the Programming Department to identify what kinds of content we actually had at our disposal, and of that content, identify how we wanted to roll it all out. After a logo was established, it was my responsibility to bring the whole website to life, from the architecture of information, to the overall design & development. Once the “bones” of the site were built, I turned it over to other team members to begin generating content.

Client:

97.9 The Loop (Cumulus Media)

Services:

Art Direction, Information Architecture, Web Design & Development, UI/UX, Content Strategy

Credits:

Sabrina Česas – Graphic Design
Paul Natkin – Photography
Alex Goykhman – Photography
Wade Linder – Photography
Giorgio Reyes – Video
James VanOsdol – Content
Jake Hoefnagel – Content

02

Process

Gather, brainstorm, create

We were under a pretty tight deadline to complete this custom website, so we were figuratively “spinning a lot plates” as we worked. While other key members were busy creating a logo for the anniversary, and digging through the archives, it was my role to determine the content structure of the website, and then to bring the whole thing to life in a way that best-represented WLUP.

Loop 40 Website Sitemap

Website Sitemap:

Based on the content that we decided to include for this microsite, this is how I decided to lay out the whole website. View larger PDF

Loop 40 - Sketch
Loop 40 - Sketch
Loop 40 - Sketch
Loop 40 - Sketch
Loop 40 - Sketch
Loop 40 - Sketch

Preliminary Wireframes:

As always, I turned to sketching to make my ideas more tangible during our preliminary meetings.

Website Wireflow:

To get a better flow for the user flow, I created this “wireflow”. View larger

Loop 40 - Web Style Guide - Color
Loop 40 - Web Style Guide - Typefaces
Loop 40 - Web Style Guide - Headings
Loop 40 - Web Style Guide - Body Copy
Loop 40 - Web Style Guide - Buttons
Loop 40 - Web Style Guide - Text Links

Website Style Guide:

Here’s the style guide for various assets on the website. View larger

Loop 40 Logo

40th Anniversary Logo:

One of the team members was tasked to develop a logo… out of a handful of options, this is what was eventually chosen.

Loop 40 - Collage

Imaging Sample:

I came upon this image during the discovery phase for this project. It was created several years ago for another promotion. When I saw it, I fell in love with the overall tone of the imagery and knew we had to find a way to include it into the website.

Paul Natkin Photography
Paul Natkin Photography
Paul Natkin Photography
Paul Natkin Photography

Iconic Moments:

An anniversary website of this magnitude benefits greatly from top-notch editorial photography. This is just a sample of the beautiful work of Paul Natkin that captured so many iconic moments during the early years of 97.9 The Loop. He was kind enough to give us permission to use his photos.

Loop 40 Photography
Loop 40 Photography
Loop 40 Photography
Loop 40 Photography

Glimpse of the heritage:

These are samples of additional photos, that we either found or staged ourselves, to help round out the “look & feel” of the website.

03

Website

Simple, clean, and loaded with history

The end result is a responsive website that captures the history of a Classic Rock radio station, full of content that resonated with our most loyal fans.

Loop 40 - Main Landing Page - Browser View
Loop 40 - Main Landing Page - iPhone View

Loop 40 Landing Page:

This website is fully responsive. Both of these figures are scrollable, helps to showcase the page layout.

Dynamic Image Transition:

To add more impact to the landing page, I created a container that slowly cycles through a handful of iconic photos with a Ken Burns effect.

Dynamic Timeline:

We built a timeline to pinpoint a variety of influential Rock moments during the 40 years of WLUP’s existence.

Loop 40 - Rock History Category Listing - Browser View

Scrollable Layout Sample:

This page demonstrates the listing of posts for our Rock History section, a series of Podcast episodes that detail historic Rock-n-Roll moments.

Loop 40 - Rock Girls Category Listing - Browser View

Scrollable Layout Sample:

This page demonstrates the layout for the Rock Girl section, and all of the beautiful women who’ve represented the radio station over the years.

Loop 40 - Comic Book Post - Browser View

Scrollable Layout Sample:

This page is a sample of one of our “blog” posts, featuring an rare and priceless comic book, created using the likeness of several personalities from WLUP, as well as other celebrities and musicians.

Loop 40 - Sample Post - iPhone View
Loop 40 - Sample Post - iPhone View
Loop 40 - Sample Post - iPhone View
04

Results

A digital time capsule

Overall, this all-encompassing website has proven to be a huge succes for our radio station, creating a lot of buzz from our rabid fanbase. It was fun to dust off the archives to shine a light on old memories and assets that helped shape radio in Chicago, as well as helped define an era of music for our country.

40

Years of rockin’ the airwaves in Chicago

31k+

Pageviews in the first few weeks of promotion

Infinite meaningful memories for Loyal Loopers