North Central College

Duo’s collaboration with North Central College was a great example of addressing an immediate set of needs, while building a relationship to support their internal dev team and future marketing initiatives.

before

Before

When North Central College came to Duo they knew that visitors were challenged to navigate the site using the existing menu system. Even more frustrating, there were sporatic issues with menu depth once a user was within a section, in some cases the child links didn't appear in the menu at all.

Duo’s initial project was to retool the site navigation, including a deep dive into overall site architecture with an emphasis on improving the UX design. At the same time, refreshing the home page to support the college's brand redesign.

Streamlining the mega menu

While the engagement wasn't a complete content audit, redesigning a menu requires a deeper dive into content organization in order to make better recommendations. The North Central team obviously knows their content and pain points so the Duo team wanted to be sure to enable collaboration on this mission critical step. Sharing our streamlined sitemap recommendations in a Google spreadsheet with the client allowed both our teams to rebucket content in a transparent and efficient manner. Duo also reviewed other higher-ed sites to inform and help shape our approach. When done, the North Central team was able to use the Google spreadsheet to move pages into the new structure while Duo worked on the UX design and development.

Duo presented several low-fidelity mockups for the redesigned primary menu. Typically we might use flat black and white wireframes at this stage, but the new North Central brand was so visually unique, we added some basic color, fonts and key brand visuals to give the North Central team a better feel for how the new structure would work within the new design. They were so well received, we were able to move to the home page refresh right away.

ux
xxx

After

All our ideas were modern, and streamlined, some more minimal than others. The North Central team decided to target specific personas - prospective students, parents, counselors, alumni. They really understood their current students were more likely to be engaged on other existing North Central College sites for the athletics, arts, and current undergraduates. 

The decision to select a design direction using the hamburger menu made a lot of sense based on their younger audience demographic. The menu is deep, so using an off canvas menu moves it out of the way of the content. At the same time, the menu and search buttons are larger and strategically located so they are always easy to find. The full screen menu overlay provides more room for the deep links which many .edu sites require.

Layout Builder

With Layout Builder now in core, the possibility to visually build engaging landing pages is finally a reality. Duo leverages a custom set of reusable components to jump start fast paced engagements like this example.

Site audit

The first step was a front- and back-end audit of northcentralcollege.edu. This gave the Duo team better insight into how the site was built, and documented tasks to improve workflow and establish Drupal best practices for the North Central dev team.

Higher Ed Expertise

Duo's extensive experience in the .edu space, having worked with many higher ed clients for over 10 years. We understand the market, personas and bring valuable insights to similar projects.

UX Design

North Central's brand refresh incorporates new fonts, colors, and dynamic visual cues. Duo's UX team made sure the user experience was seamless, taking into account how a completely new page header would impact the interior pages.

New Brand. New Home Page.

The home page refresh was driven by a number of requirements; replacing the carousel with video, emphasizing news and events, and adding visual cues from the new branding.

Hello Layout Builder

While the site already makes extensive use of the paragraphs module, the Duo team quickly recommended using the new Layout Builder now in Drupal core. Paragraphs has been a Duo goto module since Drupal 7. And now with Layout Builder, Duo has created a set of reusable blocks and layout configurations which jump start the building process. From there, we built new components for the pages, which included custom styling controls giving site admins more visual design flexibility.

Smooth Deployments

Having worked with another developer on the initial Drupal 8 build, their internal dev team had some concerns with working together on code and deployments. And a major change to the navigation would have profound effects on the rest of the site. With the complexity of recategorization, Duo had to manage shifting links to the new navigation scheme, but also do this on a live site. All this while the North Central dev team was actively maintaining the site, updating core, and other configuration. We setup new menus which the North Central team could populate, while we were able to pull the database locally when needed, and handle all other changes through Drupal configuration. This made it possible to push the new menu and home page live without downtime.

Working with an existing Drupal site can present its own set of challenges, but with Duo’s deep Drupal experience North Central College was able to implement this important project smoothly, and early feedback has been very positive! With this first engagement, Duo and North Central have established a collaborative relationship and the foundation of future site enhancements.

North Central College - New Front Page UX Design