Designing for Excellence in Engineering

The Duke University Pratt School of Engineering came to us with an ambitious vision: unify the user experience across its sprawling ecosystem of websites. Each program and department had its own subdomain, each with different structures and styles. Navigating from one to the next felt disjointed, and users often struggled to find what they needed.

Pratt needed a solution that would balance consistency with flexibility, allowing each program to highlight its unique offerings while maintaining a cohesive identity tied to the Duke brand. The main engineering website had to serve as a central hub; helping prospective students navigate their options and guiding current students, faculty, and staff to critical resources. Success meant building an intuitive navigation system and a robust design framework that worked seamlessly across all sites.

We started by immersing ourselves in the world of Duke Pratt, studying not only its main website but also its many subdomains. What quickly became clear was that the main engineering site had to act as a “control center.” It needed to introduce prospective students to the school’s values and programs while serving as a gateway to more specific content. Simultaneously, it had to function as a practical resource for existing students and staff.

The discovery phase revealed the depth of the challenge. With so many stakeholders and content creators involved across departments, we needed to bring order to what had become a web of inconsistencies. To tackle this, we conducted a comprehensive inventory of every page and analyzed user data to understand how visitors interacted with the sites. We identified high-priority pages and created a streamlined information architecture that linked the subdomains back to the main site. This approach allowed users to move seamlessly between resources without feeling like they were jumping to a completely different website.

One unique challenge was helping prospective students. We realized that they were often overwhelmed by the sheer volume of information needed to make an informed decision. To address this, we designed “resource hubs” that organized the most important content in one place, guiding students through their decision-making process instead of leaving them to search on their own.

The design system was at the heart of this project. Historically, Pratt’s websites were visually inconsistent, with departments having free rein over their presentations. Some sites were polished and professional, while others lacked the sophistication expected of a prestigious institution. Our goal was to maintain flexibility for content creators while establishing visual cohesion across the entire ecosystem under Duke brand guidelines.

We began with a modular design system that included 144 component variations for desktop alone—our largest set to date. These components ensured that each subdomain could meet its unique content needs while maintaining a shared aesthetic.

To address concerns about users missing content as they scrolled, we introduced custom divider components inspired by Duke’s iconic arches. These dividers—designed as Peaks, Valleys, Vertical Lines, and Tenets—provided subtle visual cues to encourage exploration without resorting to more basic solutions like arrows. For example, Valleys featured sweeping curves that naturally drew the eye downward, while Peaks gave the impression of content unfolding below. This approach married functionality with the prestige of the Duke brand.

On the development side, the project presented its own complexities. We collaborated with external backend developers from their team, which required us to approach the codebase differently than usual. To ensure seamless integration, we focused on handling layout logic in the frontend and wrote detailed documentation to explain the backend dependencies.

The final number of design components also demanded a high degree of abstraction in our code. Each component had multiple variations, requiring careful consideration of when to rely on CSS for layout adjustments versus modifying the HTML. This approach allowed us to maintain consistency across the designs while accommodating the diversity of content needs.

Adding to the complexity, this project marked a departure from Duke’s usual CMS, Drupal. At the request of the incoming Communications Director, we built the site in WordPress, which offered a more user-friendly interface for content management.

This project challenged us to think deeply about scalability, consistency, and collaboration. It pushed the boundaries of our craft, requiring both technical precision and creative problem-solving. Working across teams and technologies, we delivered a solution that elevates Duke Pratt’s digital presence and sets a new standard for what complex academic websites and their ecosystems can achieve.