My Favorite Project: Flagler College Website Redesign

I am a Senior Information Architect & User Experience Designer, and I led IA/UX design for the Flagler College website redesign. Flagler is a beautiful school with a vibrant community. They have great academic programs and undergraduate research opportunities. They produce several publications, and they do wonderful collaborative work with the city of St. Augustine. Their old site was stodgy and did not reflect any of the school’s colorful personality. They needed a platform that accurately showcased their academic rigor and allowed their gorgeous work to shine through.

Flagler College Website Redesign

This college website redesign project was a favorite of mine because Flagler’s marketing team were incredibly brave with their decisions! They were willing to let us break the mold of a higher-ed marketing website and come up with new design and interaction patterns, and it absolutely shows in the final product. Flagler College’s website redesign gave me some great opportunities for expanding my knowledge and creating new conventions. These are two of my favorite facets of the project:

College Website Redesign Navigation

When you’re dealing with the kind of content-heavy sites we see in higher education, it’s critical for users to be able to orient themselves within the site and understand what’s above and below them at all times. Very few sites have do this well.  Especially as sites grow, it’s common for content creators to use navigation in strange ways. Often navigation will not reflect the site’s actual structure but to link to content that the creators feel is related to the current page. This makes the experience messy for users and detracts from the purpose of creating a sound sitemap.

Flagler College Website Redesign Navigation

Flagler was willing to experiment with navigation conventions, so we architected a pattern that combines breadcrumbs (the path of pages that leads to your current page) with section navigation. Users already expect to be able to use breadcrumbs to navigate backward through a site. Because of this I took advantage of this expectation and used the breadcrumbs to display the contents of any given section. It’s simple and doesn’t detract from the space on the page, but stays with the user wherever they are. Best of all, it’s future-proof. Dropdowns are built dynamically from the site structure rather than being directly editable. This will keep the experience clean for months and years to come and reduce the need for future clean up.

Media and Stories Integration

We were absolutely spoiled with the quality of Flagler’s media output. They have wonderful photography, vlogs, student social media takeovers, articles, you name it. They use Snapchat very effectively and have a rotating series called Flagler Favorites, where students take over and showcase their favorite places around St. Augustine. We wanted to share this high-quality content across platforms and needed to embed the media in a beautiful and functional way.

We outlined several patterns to make it simple for the Flagler team to include media and snippets of stories and videos anywhere they thought strategic. This allowed voices of their students, alumni, and faculty to be threaded throughout the site and keep the personality consistent. We provided options that were varied to suit different kinds of media, without overwhelming authors with choice. The site architecture includes patterns for quotes, traditional videos, and embedded Snapchat videos, as well as Instagram embeds. We also provided custom work for the Student Life page, which our visual design team took to the next level.

This college website redesign project was an amazing experience. We are so proud of everything we accomplished with the Flagler team. We like that the site maintains its authentic personality without detracting from showcasing the rigor of a Flagler education.