The Village Voice

A modern take on an iconic newspaper.

The ask:

Create a new, modern website for The Village Voice.

The Village Voice was a long-running alternative newspaper in New York City. Under new ownership, the paper sought to re-focus its efforts on digital, leave behind legacy technology, and launch a new website representative of the Voice brand. I joined the project in its conceptual stages.

The site was designed with branding and art direction by Pentagram, created for a redesigned print edition. We regularly reviewed work with the Pentagram team throughout the design process.

Focusing on content

At the start of the project, we were directed to follow a traditional direction for a publishing site. The original article page concept included a rail and space outside of the body content for ad units. An alternate template for feature stories removed the rail and placed all ad units inline.

Article template and bottom-of-article recirculation.
Feature stories use a large cover image, letting the artwork define the look of each piece.
Early wireframes for the article page and feature story. Ultimately, the rail was scrapped and the final article template was built on the concepts of the feature design.

As the project progressed, we worked with the Voice’s editorial team to push for a more modern direction across the board, scrapping the template with the rail and relying on inline ads and recirculation links with the goal of letting the photography and artwork drive the look of the site.

A modular homepage

I created a wide range of wireframe sketches exploring different approaches to homepage content, experimenting with different methods of organization, levels of information density, and amount of emphasis on editorial curation versus highlighting the latest or most popular stories.

One configuration of the modular homepage. Visual design: Skyler Balbus
I explored a range of homepage concepts that inspired the modular approach used in the finished site.

The concepts I explored in the project’s early phases influenced the modular system designed for the final site, where editors were able to add or remove sections and control what type of content populates each module. This allowed the editorial team to tailor the look of the homepage for each new issue of the paper and use data to learn which layouts worked best for the readers.

Imagining an event guide

I explored the concept of a location-based event calendar for New York City concerts, theater, and art openings. The calendar was originally imagined as a mobile-first experience, with the ability to filter events by type, location, and price. The calendar section would also serve as a means for the Voice to promote their own events, such as Brooklyn Pour.

The datebook provided a curated guide of the next week of events in New York, handpicked by the Voice’s editorial staff.
The original concept for the datebook was a mobile-first guide to New York events, complete with a map view.

As we moved closer to the launch date, the scope of the event calendar narrowed to an editorially-curated list of events for the next seven days, so the finished site uses a calendar-like view of the next week, with today’s events at the top of the page and a persistent navigation to jump from one day to the next. Editors were able to add links to RSVP or buy tickets to events. I was responsible for the user experience and visual design of the Datebook page, which draws inspiration from a design created by Pentagram for the redesigned newspaper.

A beautiful template for photojournalism

I was responsible for the design of the site’s photo gallery template. The goal was to create a flexible system for visual storytelling. The design allowed for long captions, but if captions weren’t needed, the photos would automatically expand to fill the entire space.

The photo article template and expanded gallery view.

The gallery design gracefully scales up from mobile to a large desktop display, always making the photo as large as it can possibly be on the given device. Because of the required flexibility of the gallery design, I assisted with its frontend development, refining the styling and scaling rules while previewing galleries at different sizes in the browser.

A deeply-considered responsive experience

I was responsible for creating the mobile sizes and in between sizes of the responsive site. In addition to designing multiple versions of the site’s content templates, I created a system for scaling the modules that make up the site and communicated the breakpoints and sizing rules to the engineering team.

Mobile views of the article templates and Datebook.
Responsive sizing of modules.
Role

Product Designer

Tasks

Visual design, user experience

Timeline

August 2016 – May 2017

Agency

Postlight

Up next:

The New Republic

Website and CMS, launched fall 2015