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.
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.
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.
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.
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.
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
National Site article page — mobile phone
Music Station home and listen live — mobile phone
Music Station home and main menu — mobile phone
Music Station home scrolled — mobile phone
Music Station home and article pages — mobile phone
News/ Sports Station home and listen live — mobile phone
News/ Sports Station home scrolled — mobile phone
Music Station home — tablet landscape
Music Station main menu — tablet landscape
Music Station home — tablet portrait
Music Station article — tablet portrait
In addition to accommodating traditional banner ad placements, I envisioned a variety of native ad integrations as well.
Banner and Takeover
Pre-roll (2 Options)
Article fixed custom ads
Full-screen interstitial ad (between articles)
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.
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
Selected wireframes for the revamped tool
Selected mockups for the revamped tool
The new sites and admin tool went through a successful transition with the help of Townsquare’s stellar development team.
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.
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.