An Enriching Site Experience Pairing Impact with Functionality

The Center for Advanced Defense Studies (C4ADS) is a nonprofit organization that aims to defeat the illicit networks that threaten global peace and security. However, their website was built on Squarespace, which meant that it didn’t have a content management system (CMS) nor allowed for the detailed infrastructure they needed to organize and present their content. They came to us looking for a partner to collaborate to design and build a new, custom website.

Like most projects we take on, we started with a discovery phase. We conducted an array of unique exercises to gather the C4ADS team’s current impression of their site design and compared it to the vision of their redesigned website. 

First, we started with tree testing. In tree testing, we set a specific task for users (for example: find information on oil trafficking) and then had them navigate a text-only version of the website’s navigation and submenus. To do this, we used Optimal Workshop’s Treejack testing tool to track users’ paths through the website to identify where there was confusion in navigation on the current site.

Although the C4ADS team initially requested their redesigned website to be built on Webflow, our team recommended a WordPress site instead due to its automated and flexible organization capabilities.

Using the information we collected during spectrum polling, our design team created two versions of the homepage, one light and one dark. Although we usually wait to have the homepage finalized, C4ADS wanted a custom motif that could be used throughout the site to reflect the nature of their work. This decision ultimately helped our teams build consensus and show off what elements our designers would use throughout the site.

From there, we addressed the issues with navigation head-on. C4ADS chose a simple hamburger menu and search icon as the main visible navigation on the homepage not to draw attention away from the striking homepage hero.

After completing the static designs, we had a strong prerogative from the C4ADS team to explore exciting and elegant hover and transition animations for interactive elements.

While Interaction design is a whole other layer on top of the site design itself,  it can be a refreshing change of pace to navigation, IA, and component design.

One thing that was vital to the C4ADS team was the ability to make changes to their website as they add more content in the future. We utilized the Nested Pages plugin to allow the C4ADS site admins to easily reorder elements such as pages, posts, and staff through a drag-and-drop interface.

Our development team put together a comprehensive guide on creating and updating content, including the navigation for C4ADS admins to reference if needed to ensure their team was set up for success.

Working with the C4ADS team challenged our designers to think outside the box. 

We enjoyed the opportunity to give the C4ADS website a total brand refresh while creating a distinctive look and cohesive feel for the organization that they can continue to develop on their own.