Case Study: 99% Invisible Website

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!

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.

  • 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

2. Research

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

  • 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
Small dog, big fan of 99PI

3. Wireframes

Oh boy now it’s wireframes!

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

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.

  • 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.
  • 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.

5. Development and Design Rollout

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

  • 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.
  • 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)
  • 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!

  • Typography
  • Icons
  • Site updates
  • Plugins
  • Deployment

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?

  • 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.
  • We use BrowserStack which did work well for us

Additional Reading

My Favorite 99% Invisible Episodes and Articles

Designer, Co-owner at Duck Brigade Design + Dev

Designer, Co-owner at Duck Brigade Design + Dev