Townsquare Music & Radio

A Massive Re-design of Hundreds of Music and News Websites

I devised and executed a mobile-first re-design of 200+ music, pop-culture, and radio station websites for Townsquare Media.

The Challenge

At the outset of this project, Townsquare Media’s national and local websites were running on a proprietary suite of common services and templates that were customized by station editors and allowed them to push out new articles and updates with ease. Early versions of the WordPress-powered templates that they had developed were underserving their markets by relying on fixed-width, non-responsive layouts, thus catering primarily to users on desktop computers at the expense of those on mobile devices.

Townsquare Media - existing desktop sites

Digital managers at Townsquare asked me to devise a “mobile-first design” that would preserve all of the existing content modules while at the same time not forcing a full re-code of the desktop sites. (Given the complexity of the overhaul, they were looking for a cross between an adaptive and fully responsive solution). In addition, I needed to figure out a way to automatically map the varying brand colors and fonts from desktop elements to mobile ones in order to efficiently migrate 200+ sites.

My Role

I was the sole designer on this project, responsible for re-designing several website templates powering the entire network of websites, and a WordPress admin tool. My functions included:

  • UI Design. I transitioned the websites to a brand new responsive, “mobile-first” UI, and created specs for developers to follow.
  • Information Architecture. I created wireframes (and mockups) for a new, more capable WordPress theme editor used by the sites’ admins, station managers, and developers while devising a way to automatically transition and consolidate various UI elements between desktop and mobile.

Timeline

The project spanned roughly two months. This included all design stages including spec creation and admin tool re-design.

Sketching & Wireframing

To arrive at the final result, I started by doing a lot of sketching and wire-framing to determine optimal layouts for both phones and tablets. In order to provide convenient access to the streaming radio player, I came up with a panel that slides out from the right when clicking a play button, in the same way that the main menu slides out from the left.

Townsquare Media mobile wireframes

Mockups

In Photoshop, I created mockups to show all of the UI states for three “example” sites which comprised the main template types — a local music station (WYRK.com), a local news station (WJON.com), and a national site (Popcrush.com). Each one differed to a small extent from the others in their features and structure. In order to generate predictable results, I sought to reduce color palettes to neutral tones and a single accent color. I also ensured that my designs covered both mobile phones (iPhone and Android) and two orientations of tablet devices. In total, I ended up with over 100 mockups out of which I’ve chosen a handful to present below.

National Site home and category pages — mobile phone

Townsquare Media - Popcrush mockups

National Site article page — mobile phone

Townsquare Media - Popcrush mockups

Music Station home and listen live — mobile phone

Townsquare Media - WYRK mockups

Music Station home and main menu — mobile phone

Townsquare Media - WYRK mockups

Music Station home scrolled — mobile phone

Townsquare Media - WYRK mockups

Music Station home and article pages — mobile phone

Townsquare Media - WYRK mockups

News/ Sports Station home and listen live — mobile phone

Townsquare Media - WJON mockups

News/ Sports Station home scrolled — mobile phone

Townsquare Media - WJON mockups

Music Station home — tablet landscape

Townsquare Media - WYRK tablet ockups

Music Station main menu — tablet landscape

Townsquare Media - WYRK tablet ockups

Music Station home — tablet portrait

Townsquare Media - WYRK tablet ockups

Music Station article — tablet portrait

Townsquare Media - WYRK tablet ockups

Ad Integrations

In addition to accommodating traditional banner ad placements, I envisioned a variety of native ad integrations as well.

Banner and Takeover

Townsquare Media - Popcrush mobile ads

Pre-roll (2 Options)

Townsquare Media - WYRK mobile native ads

Article fixed custom ads

Townsquare Media - WYRK mobile native ads

Full-screen interstitial ad (between articles)

Townsquare Media - WYRK tablet ad

UI Color Mapping Documentation

After designing the mobile sites, I sought to document the logic in which colors would be automatically mapped between existing UI elements on desktop and their mobile counterparts. I wrote detailed specs with diagrams to illustrate these mappings and ensure that the development team made the correct translations. In my process, I noticed that the current color system was too large and confusing, so I worked on consolidating and streamlining the color options, coming up with a clear set of rules and bindings that could deliver aesthetic results for hundreds of brands at once, without the need for individualized or manual adjustments.

Townsquare Media color mapping notes

Townsquare Media color map diagrams

WP Admin Tool Re-design

As part of this overall effort, I went about transforming the WordPress theme editor that admins and station managers were using to customize and edit their site templates. I expanded and revamped both the theme selection interface and the color picking system, accommodating a finer set of actions and elevating its usability.

A screen from the original theme color picker tool

TSM Theme Picker - Original Color System

Selected wireframes for the revamped tool

Townsquare Media theme picker wireframes
Townsquare Media theme picker wireframes

Selected mockups for the revamped tool

Townsquare Media theme picker mockup
Townsquare Media theme picker mockup
Townsquare Media theme picker mockup Townsquare Media theme picker mockup

Result

The new sites and admin tool went through a successful transition with the help of Townsquare’s stellar development team.

Retrospective

The designs I came up with were pivotal in transitioning the sites to a mobile-friendly format for the first time in addition to streamlining various UI elements for a more consistently pleasing result.

Townsquare Media mobile promo

Sketching was a pivotal part of my design process as it allowed me to work through many different possibilities for configurations and placements of UI elements. By the time I began to set up frames in Photoshop, I had virtually no need to move things around drastically. This ultimately saved me a great deal of time since organizing layers and managing all of the layer comps was a process unto itself.

When coming up with a scheme to map colors to UI elements, I realized that switching to the left brain by writing lists and auditing elements in a very methodical manner was an important driving factor in my success. In my thoroughness, I found ways to deal with edge cases (such as a site with a deviant color scheme) in a graceful way.

One area of the project that I thought deserved more attention was the handling of desktop screens. In order to release on a tight schedule, the plan was to either maintain the existing desktop UI or use the new tablet landscape screens in their place as part of a transitional phase. It is not clear to me how this was ultimately addressed as I had already moved on to create The IF List.