Bestowing Draper Labs With a History-Driven Web Experience
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: