Case Study: 99% Invisible Website

The Beginning

Check out the site!

1. Proposal

  • 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

2. Research

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

3. 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)

4. Design Exploration

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

5. Development and Design Rollout

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

  • Color palette
  • 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

Last Thoughts

  • 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.
  • Begin cross browser testing earlier — essentially immediately when development starts
  • We use BrowserStack which did work well for us

Additional Reading

--

--

Designer, Co-owner at Duck Brigade Design + Dev

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store