The Interactive Mystery of D.B. Cooper

Interactive Design • Web Design

The Brief

The initial brief for this project was to develop a biography for a selected individual. However, D.B. Cooper is not a singular, well-defined figure but rather a cultural icon shrouded in mystery. This posed the question: how do you craft a compelling, interactive website about someone whose true identity remains unknown?

The main challenges of capturing an unknown yet infamous criminal:

• A Faceless Icon: Unlike a traditional biography, there was no central figure or person to focus on. So how do we present the essence of D.B. Cooper?
• Sifting Through Conspiracies: The D.B. Cooper story is surrounded by countless conspiracy theories, much of which can overshadow the actual facts of the case. The project needed to rely solely on verified information.
• Simplicity: The website needed to be accessible for anyone, covering the essentials of the case while avoiding overwhelming details and conspiracies suited for more die-hard D.B. Cooper enthusiasts.

Research

To build the site, I gathered information from various sources to ensure factual accuracy and provide a comprehensive overview of the D.B. Cooper case:

• Primary Resources:
  • The FBI's official case files on the hijacking, providing details and imagery on the evidence of the case.
  • The D.B. Cooper Wikipedia page, which featured extensive information on the timeline of events, suspects, pop culture, and additional sources.
  • The D.B. Cooper Forum page, which contained important information surrounding the hijacked aircraft, including the exact flight path data.

FBI's estimated landing zone of the hijacker, along with flight paths. Used in the website's interactive timeline

• Contextual Understanding:
  • Articles exploring the cultural and aviation impacts of the hijacking, like The Conversation's piece.
  • Investigations into historical parallels, like Jack the Ripper, provided insight into the fascination with unsolved mysteries.

A website covering information regarding Jack the Ripper. The final vector art style for the project was inspired from criminal cases like this one

• Multimedia:
  • The timeline of events was verified through multiple sources, including The Search for D.B. Cooper, which inspired the visual storytelling for the interactive timeline.
  • Additional timelines, such as this one helped cross-check and refine the sequence of events.

A frame from the video The Search for D.B. Cooper, which inspired the timeline design

While the case involves countless suspects, I narrowed the list to six individuals who were frequently mentioned across sources and stood out as the most intriguing.

Final suspects page of the implemented D.B. Cooper site

Designing

The goal of the design was to create an immersive experience that allowed users to easily explore the history, evidence, and cultural legacy behind the infamous D.B. Cooper case. The process began with creating a prototype in Figma to map out the website's layout.

• Early Figma Mockup: Focused on a clean homepage and basic pages for the timeline, evidence, and suspects.

Figma visual of the timeline, utilizing Mapbox's mapping tools and labels as a background layer

• Feedback and Final Mockup Iteration: Feedback led to refining the character on the homepage for a better visual identity and clearer layout for the evidence and suspects pages. The vector art style was also adjusted for better visual consistency.

Overview of the final Figma designs of the project

• Final Web Implementation: The homepage visuals and interactions were refined, the timeline was integrated with Mapbox, and suspects and evidence images were made interactive, allowing users to view them in more detail.

Final evidence page of the D.B. Cooper site

Conclusion

The final result is a clean, yet visually rich and immersive web layout that effectively captures the essence of D.B. Cooper. This project taught me how to combine thorough research and a well thought-out design to create a website that goes beyond the traditional definitions of a biography website.

Test out the final implementation of the website here: D.B. Cooper