99 Percent Rebuilt: Design Process, Features & Secrets of the 99pi Website

In late 2015, we began the process of redesigning the 99% Invisible website. The new site needed to be beautiful, functional and mobile-friendly. This relaunch was also part of a larger plan to branch out beyond episodes (and companion content) to articles, videos and other media. Below, you can take an inside look at the process we followed, design options we considered and new features of the site. At the end, we also have some suggestions for your own future web projects.

99pi world

With the creative team of Duck Brigade, we dove into discussions about creative direction, visual identity, user experience and site organization. Establishing a foundation before tackling visual layouts or designs, these conversations formed a touchstone for the rest of the project.

99pi elements

By the time we started developing wireframes, we had a strong sense of what general direction to take things in, though much would still change across numerous rounds of development and iteration. Indeed, what you see here is a small fraction of these steps at critical junctures.

wireframes

With wireframes in place, we engaged in further design exploration, experimenting with a range of options, including the following:

Design Version 1

v 1

v1a

In many ways the most straightforward of the initial designs, this option kept to a simple color scheme and used elements like grids and icons to liven up the design without compromising usability.

Design Version 2

v2

v2b

The second option explored more intricate details and a slightly more complex color scheme, including a typographic strategy and image overlay approach that would be incorporated in the final design.

Design Version 3

v3

v3b

The third direction was bold and crisp but also very playful, pushing the limits with rich and complex icons as well as bright color options.

final

After multiple rounds of evaluation and refinement, we arrived at a semi-finalized design, subject to small changes in development.

icons

At this point, we began developing the site’s architecture in parallel with further design refinement. Along the way, we arrived at creative solutions to address site-specific usability challenges.

playlist

A persistent player was developed with an associated playlist, allowing visitors to collect episodes for current and future web listening.

archive copy

A custom navigation system was created to let visitors browse the archives by producer, year, category and combinations thereof.

404

We also created “Easter eggs” for die-hard fans of the show, including a module featuring the voices of Mazlo and Carver (hit the donate button at the bottom of the page to hear it!) and a 404 page flag.

And, of course, the site is a work in progress as we continue to fix and improve things. For instance, we recently developed a new direct-embed feature that allows authors to post old episodes in new articles. This feature conveniently ties into the site-wide persistent audio player.

99pi banner
Category icons by Aaron Nestor of Death to All False Metal

Launched in early 2016 (but continuing to evolve), the new site offers fresh ways to navigate and new kinds of content to explore. The resulting design has been highly praised and helped win some awards.

99PI_FeaturedImage2

As with any big design project, a lot of thought and work went into everything you see on 99pi today, so we do hope you enjoy the site!

99pisss

louie
Louie, fan of 99% Invisible and dog of Duck Brigade

Credits

Production & Pointers

If you are considering your own complex web project, be sure to spend ample time on the early steps. Find good collaborators, set the scope and follow an organized process from start to finish. Strong project management on both client and contractor sides is also critical (Slack and Trello can help, too!).

A successful collaborative project starts with a clear scope-of-work document, outlining everything known about the project parameters. Kurt Kohlstedt and Mike Waggoner worked on this in advance (before seeking out design and development partners). As we spoke with teams, firms and agencies of different types and sizes, this document was critical in establishing scope and estimating costs upfront.

Once we began working with Duck Brigade, their experience with structuring the design and development process allowed us to create a framework for the months of work to come. Gabe Danon and Andrea Tomingas had a clear sense of what questions to ask and how to stage things, right down to meetings and milestones by week and day.

No project outline is perfect, of course, and we hit speed bumps along the way. The real trick is to anticipate as much as possible but also build in mechanisms to adjust course and tackle unexpected issues. That … and a strict regimen of Pakistani buffet.

Comments (4)

Share

  1. I don’t see any discussion whatsoever of code quality, Web standards, or accessibility. All you talk about is making things look pretty and reinventing wheels.

    1. Rudy

      …I just looked it up.
      Wordpress. If this is true, nice job. It does not come across as a wordpress template.

Leave a Reply

Your email address will not be published. Required fields are marked *

All Categories

Playlist