The Duke Alumni Magazine (DAM) team was looking to build a website that would serve as a new communications channel for the magazine. They needed a more engaging site that appealed to a broader audience, not just the alums but current and active students. A new website would enable them to actively engage their university community and release current stories.

Furthermore, DAM wanted a less academic site to stand out against the other, more traditional Duke sites.

As part of our standard process, we began the project with a design and development discovery effort. 

First, our UX/UI designers led activities, including site information architecture discussions, navigation activities, and broader design conversations to understand the DAM team’s organizational needs for the new site. 

Next, our developers conducted a technical discovery effort to determine the best solution for DAM’s proposed problems: flexibility and future-proofing the site. They came to us with the idea of using Gutenberg for its usability and editing capabilities that would allow for the flexibility they needed.
 

Our designers built wireframes to present to the DAM team and established a creative direction. We created two variations of the homepage wireframe to discuss the differences between an organic and a bento box-style approach, as illustrated below.

In addition to wireframes, we developed and presented various moodboards using cited inspiration sites to incorporate new elements while adhering to the Duke branding guidelines.

Another major focus during the design phase was finding a new way to present DAM’s articles a.k.a “stories.” We built various components and templates to ensure that a DAM writer could publish a story to their site independently without consulting a designer.

In keeping with DAM's existing website, our developers built the new site using Drupal as well, with a few key differences. While we used the Drupal standard approach of content types, fields, and components, we replaced the CKEditor with Gutenberg for flexible content entry. To ensure users could easily navigate content on the site, we implemented Solr. Solr is an open-source search engine based on Java. With it, users can run more complex searches across all content pieces without affecting the site's performance. 

Lastly, our developers divided up and created the front-end webpage templates. We used a modular Sass approach so that designs would look consistent across all pages.

With the power of their new website, the team at Duke Alumni magazine can digitally share their print content, giving them room for growth and expansion while also allowing them the freedom to refresh the site’s design as needed.