Drilled Media is a global multimedia reporting project focused on climate accountability, founded by Amy Westervelt. It originally started with the inventive true crime podcast about tactics of the fossil fuel industry, but has expanded to print reporting including smaller news stories, substantial investigative projects, and collaborations with other publications.
I completed this project as a UX/UI designer for the design agency, Maybe Ventures. I completed the bulk of the design work, and relied on the project/design lead for feedback. Since this was phase one of the site overhaul, the project scope was limited to site mapping/information architecture, wireframing, and design system development. Phase two of the project will involve even further visual design refinement and an overall search feature–hopefully another case study to come in the near future!
Content inventory
First we kicked off a meeting with the client to understand the content and site functions we needed to support. The 3 basic types of content were to be:
All of these content types are interrelated. For example, some podcast episodes and articles may pertain to a certain investigation. Or there might be some documents that are cited in a podcast episode.
In the new hub, users shall easily be able to find related content in order to see the bigger picture of the investigative reporting and to drive them toward the podcast series.
Due to CMS limitations, it was unlikely that we could implement a search function. Therefore, we knew we needed to design an efficient filtering feature to enable users to sort through the abundance of content housed within the site. Consequently, all of the content should have tags attached to them.
Taxonomy development
We decided to structure our content between 3 different categories: superindex, index, and item. Items are classified as the main content types that were identified above–podcast episodes, articles, and documents.
Sitemap
We knew we wanted to create superindex/index sections for Podcasts, News (Articles), Investigations, and Documents, but in addition, the top level sections needed to include Home and About. This is the sitemap I ultimately created to demonstrate the content structure.
The same filtering system shall be used for the Podcasts, Articles, Investigations, and Documents superindex/index sections to establish a pattern across the site that is easy for users to comprehend.
Low fidelity
I began to sketch wireframes in my notebook as I usually do. During the wireframing stage, one of my big focuses was designing the media cards for articles, podcast episodes, and documents.
For each item, I had to consider the card’s unique anatomy such as the thumbnail image, header, subheading, and lede. I also spent a considerable amount of time iterating on the filtering system. Since there were 20+ kinds of tags within different categories, I was challenged to think about how to display the tag options while making efficient use of screen real estate.
Mid fidelity
Before transitioning into high fidelity wireframes, we needed to create a new design system that still complemented the preexisting podcast album art. First I worked with the design lead and client to gather site inspirations. We also engaged in a branding exercise to help our client define what their site does and does not represent.
