Back to Case Studies

Bestowing Draper Labs With a History-Driven Web Experience

Agency: Third & Grove

Role: Design Lead

Year: 2016-18

Client: The Charles Stark Draper Laboratory

Summary

The Charles Stark Draper Laboratory, a renowned research and development organization, collaborated with Third & Grove to undertake a comprehensive redesign and overhaul of their website. As the project lead, I worked closely with the Director of Strategy and Producers at Third & Grove to execute the transformation. The project was strategically divided into two phases, allowing for data collection and a more user-centric approach.

Problem

The existing website faced several challenges:

  • User Navigation: Users were struggling to find key pages, leading to a need for a more intuitive and efficient navigation system.
  • User Data Collection: The lack of proper tracking and user data from the previous agency necessitated the collection of valuable insights to guide the redesign.
  • Highlighting Labs and Capabilities: Draper wanted to emphasize the importance of their labs and capabilities as a cohesive unit rather than isolated elements.
Phase One

Solution

The initial phase of the redesign focused on improving the navigation and addressing user pain points. The following solutions were implemented:

  • Data-Driven Navigation: By analyzing Google Analytics data, key pages that users had difficulty accessing were identified and prioritized for improvement.
  • Navigation Redesign: The navigation system was overhauled to enhance user experience, making it easier for visitors to find important content and explore the website seamlessly.

Results

The navigation redesign delivered remarkable results:

  • Solutions page views increased by 108%
  • Careers page views increased by 48%
  • News page views increased by 106%
  • Overall page views increased by 24%
Phase Two

Solution

Building on the success of Phase 1, the second phase focused on a complete overhaul and redesign of the website. Key solutions included:

  • Component-Based Editing Experience: The website was redesigned with a component-based editing system, enabling Draper’s team to deploy numerous iterations and pages effortlessly without compromising on design quality.
  • Content-Centric Approach: The user experience was streamlined to prioritize and highlight Draper’s core content, showcasing their expertise and capabilities.
  • Dynamic Taxonomy Structure: To express the importance of labs and capabilities collectively, a dynamic taxonomy structure was implemented, allowing related nodes across the site to be grouped seamlessly.

  • In-medium Design Deliverables: As part of the typical design process I established at Third & Grove, this project included in-medium design deliverables (creative designed and built with HTML, CSS, and JavaScript). Not only did this allow for all stakeholders — no matter technical skills or knowledge — to review creative immediately, it also served as more definitive and granular development materials

Results

The second phase yielded significant improvements:

  • Video background heroes and tiles created an engaging and visually appealing user experience.
  • The content-centric approach helped users easily access and comprehend Draper’s areas of expertise and offerings.
  • The dynamic taxonomy structure reinforced the interconnectedness of labs and capabilities, providing visitors with a more comprehensive understanding of Draper’s strengths.
Conclusion

Through a strategic two-phase approach, the redesign and overhaul of The Charles Stark Draper Laboratory website successfully addressed user navigation challenges, boosted engagement, and showcased Draper’s expertise effectively. The data-driven navigation enhancements significantly improved page views for key sections, while the second phase’s redesign fostered a content-centric experience that emphasized Draper’s labs and capabilities as a cohesive entity. The collaboration with Third & Grove resulted in a visually appealing and user-friendly website that highlights Draper’s achievements, positioning them as a leading research and development institution in their field.

Additionally, I lead ideation pitches for the web portal of Sugar Films and Draper’s celebration of the 50th anniversary of the moon landing. This resulted in three in-medium prototypes: