Case Study: 99% Invisible Website

9 min readMay 26, 2016

We’re a little obsessed with podcasts over here. I’ve long been a fan of the gorgeous, smart, and funny 99% Invisible. As a person who works in the design world, I’ve had dozens of chats about a recent 99PI show around coffees with colleagues.

The Beginning

So back in September 2015, when Gabe and I saw that they were looking for a team to help them rebuild their website, we jumped at the chance! Big thanks to Dan Engler (twitter), our friend from the world of podcasting, for making the initial Twitter connection. This was our dream come true! Podcasting + art + design + development, oh my!

We emailed Kurt Kohlstedt (website), who is the digital director at 99% Invisible. To our delight, we began the discussion about the project.

This BIG OL’ post will detail the process that got us from start to finish successfully and without any mental breakdowns (that I know of)!

Check out the site!

1. Proposal

One of the most important stages of a website project is the proposal. It’s not just something to get through so you can get into the meat of the project.

It is an opportunity to see:

How communication styles are meshing — the consultant and the client
Do both parties understand each other — do I as the consultant understand the client’s identity and how they see themselves?
Are the goals and needs for the website clear?
Are there any points of fogginess — are there lands in the map of the project that haven’t been charted yet?
Either explore those now, or flag them for future exploration

99PI prepared a wonderful scope of work document outlining all their hopes and dreams for the project, down to great technical specifics. This is so great to do at this stage — talk about the big picture goals but also don’t be afraid of getting too detailed!

2. Research

Once the 99PI and Duck Brigade teams all felt good about the proposal, it was time to dive into Research.

The goals of the research phase are:

Establish creative direction for the project by analyzing the 99% Invisible brand and audience
Kick off creative discussion about visuals, user experience, and site organization
Identify what will work — and what would not work — for the 99% Invisible site

Duck Brigade created a document of brand and audience analysis, brand elements, and inspiration.

We were lucky enough at this stage to get to meet with Kurt in person. He came down to Los Angeles and we had a great meeting discussing this document, as well as their current WordPress setup and workflow. It was so helpful to get to see him in person and hash these things out.

On that Los Angeles trip, we also all met with Kurt’s longtime tech advisor, Mike Waggoner, who provided valuable expertise throughout the project.

And we also ate some yummy Thai food together (shout out Palms Thai!) and our dog Louie also got to meet Kurt.

3. Wireframes

Oh boy now it’s wireframes!

Goals of wireframes:

Begin to establish site architecture
Assess content — is it targeted, specific, appropriate?
Assess UI (with the knowledge that additional robust UI exploration will come in design phase)

We did about 20 pages of wireframes and 3 rounds. Here is an example of just one page:

4. Design Exploration

The Research and Wireframes should feel like a great solid foundation that gives structure and guidance to the creative phase of design exploration.

The goals of the design exploration are:

Approach the design solution from different directions, within the visual style articulated in the Research phase, and going off the framework explored in the Wireframes.
Provide a range of options from very clean, simple and elegant to more playful, off-the-wall and unexpected.
Explore looks that will be unique to 99% Invisible.
Explore designs that are not too “blocky” — that have organic, flowing elements that break the grid that add interest and guide the user.

ICON FUN

In this very exciting phase, we worked with the amazingly talented designer and illustrator Aaron Nestor of Death to All False Metal (website, twitter, instagram). I not only love Aaron’s work, but he is so fun to spend time with, he’s a great friend.

I wanted to get his expertise working on the 99% Invisible icons. One of the drawbacks of responsive web design is that it can start to feel too blocky and predictable. Adding some personality and breaking that up with organic elements helps a lot.

I also wanted something distinctive that would be fun to extend across other media — social, print, merch if desired.

First, we delivered a creative direction document to Aaron so that we were on the same page in terms of visual direction. Then Aaron did his thang, doing sketch explorations of the various icons:

Hi can I just hang these sketches on my wall please?

In this phase, we honed in on a few different styles and showed 3 different options in the exploration.

DESIGN

I like to keep design both wide and narrow in the initial exploration. Doing a 1, 2, 3 approach:

Design 1: Is meant to pretty literally translate the research and wireframes into design. Straightforward. Simple. Nothing off-the wall here.
Design 2: Pushes it a little further in one direction. Maybe a little more playful. Maybe a little bolder.
Design 3: The off-the-wall direction. Something we haven’t thought of yet. An odd approach.

DESIGN VERSION 1

One thing that helped a lot was to break the design out into Style Tiles. The Style Tile shows the look of the design version in components.

This is especially helpful for responsive design — what are the distinctive elements that are the core components, regardless of screen size? What communicates the brand visually no matter what device you’re on?

DESIGN VERSION 2

I love design options! Design options allow everyone to see what’s working and what’s not working and combine the elements that are working.

DESIGN VERSION 3

Off-the-wall option!

DESIGN REFINEMENT

Now, the 99PI team know themselves, they know their audience, they know their brand. This self awareness is HUGE at this stage! It allowed them to pull apart these designs and see what accurately communicated the 99% Invisible aesthetic. Kurt as the project manager deftly solicited and compiled feedback from the team.

So we refined and by Round 4 had something that looks pretty much like the site looks built-out:

5. Development and Design Rollout

Once the design look was approved, things really start taking off!

First, we start building out the homepage and overall site framework in a staging environment. Once the initial buildout is done, it allows us to start testing UI, checking out responsiveness, and troubleshooting overall.

Concurrently, we start rolling out the design look to the other pages of the site.

DEVELOPMENT

The 99% Invisible website had some great functionality that we really dove into here:

Filtering — On desktop, the archives pages have a menu of filtering options in the right sidebar. So you wanna find the Episodes from 2013 that were about Architecture, Visuals or Sounds? No problem!
Player and Playlist — We wanted a persistent player that stays with the listener across all pages. We also wanted a playlist that the user can add to and sort, encouraging engagement with the show.

DESIGN ROLLOUT

We’ve got the look, it just needs to be applied to other pages, like the Archives page for example:

EASTER EGGS

We wanted to include some playful winks to the 99PI audience, who know their stuff when it comes to this show.

Mazlo and Carver Audio — 99PI listeners LOVE Roman Mars’s kids’ contributions to the show. There is an audio snippet in the donate modal that contains a nod to this tradition.
404 Page — We designed a 404 flag that would wave on the internet city flagpole when that page just cannot be found. Roman Mars is famous for his astute flag aesthetics (check out his TED talk)

ICON REFINEMENT

In this phase, the icon designer Aaron Nestor refined the icons and delivered final, woohoo!:

COPYWRITING

We also worked with a great copywriter, Jillian Gordon, in this stage. She discussed a lot of smart approaches to the information organization in the 99% Invisible about pages and wrote the copy to have the friendly + smart, casual + highly intelligent tone that 99PI is known for.

PROJECT MANAGEMENT: TOOLS + PROCESS

Once development gets going, it is EVEN MORE important that the right tools are in place. We used the following tools and methods:

Trello — Feedback Capture, Change Requests, Phase Planning. I can’t live without Trello. If 99% Invisible said something in Design Rd. 1, “Hey it would be nice if this component animated in buildout.” Get that into Trello! Our Trello board was organized with lists in Phases. So Dev Batch 1 Rd. 1 / Dev Batch 1 Rd. 2 / Dev Batch 1 Rd. 3 / Dev Batch 2 Rd. 1 / etc.
Slack — Communication — both real-time and non-real-time, Occasional Silliness
Iterations — Once we get to this phase, we’re delivering development batches about 1/week. The first delivery establishes framework, and one component (say the homepage). The next delivery ADDS to that and ADJUSTS the initial delivery, with feedback incorporated. We continue this process of building the skyscraper + refining previous floors until completion.

6. Testing, Documentation, Launch

OK almost there!

Testing

Is both client-side and on our side, and involves front-end, back-end, cross-browser and responsiveness testing. Again, we rely heavily on Trello to track bug reports and change requests.

Documentation

Acts as both a style guide and a development guide. We gave guidance on:

Color palette
Typography
Icons
Site updates
Plugins
Deployment

…and more!

Launch

Once the site was in a good place for everyone involved, this baby launched! Pop the champagne and put on your party hats! Then take a nap, you deserve it.

I’m really excited about our new website https://t.co/ou5lPw4JnX masterminded by @DuckBrigade & our own @KurtKohlstedt. Check it out.
— Roman Mars (@romanmars) January 27, 2016

Check out the final product!

Last Thoughts

So this was a large-scale web project that was successfully completed, why did it work?

Process Successes

Great Scope of Work document — thorough understanding by all parties of the project goals and needs
Close attention to all 3 project components — Project Management, Design, and Development
Smooth communication — some real-time some non-real-time
Strong project managers — both the client side and the consultant side
Close partnership between development and design — real-time and in-person communication.

And what could we have done differently? We learn from every project and in this case, we had a key process modification to takeaway: