On April 1, 2012 Notre Dame’s in-house team launched a new homepage that raises a new standard for design and development for colleges and universities. It a nutshell: it’s awesome.
Much of the media attention on the new nd.edu homepage has been on the responsive design—the way it adjusts automatically resizes the page and stacks page elements when it is viewed on tablets and smartphones. Their responsive development is truly cutting-edge: they are using RESS (responsive design with server-side components) to deploy content that is appropriate to each device.
But the innovation and real success of this project goes much deeper. Almost everything about the new nd.edu challenges the conventions that are typical to university homepages. The nd.edu team changed the basic navigation model associated with universities, the amount of content presented, and even replaced the top area reserved for feature stories on most sites with simple but gorgeous photography. The primary photography on the homepage photography differs from the standard “students on the green” imagery, instead focusing on images that are distinctly Notre Dame: architectural details, interiors and exteriors, an image of the Dome.
Their new homepage represents a boldness rarely seen from universities. it demonstrates a willingness to try something different and to own the details that make Notre Dame unique. We spent some time with Nick Johnson (Director of Web and Interactive Marketing), Erik Runyon (Manager of Interactive Development), and Philip Zastrow (Web Designer) to dig into the story behind this radical reinvention the University homepage.
The new ND.edu pretty defies nearly every convention of a typical university homepage. Can you explain what it is that you just launched?
Nick Johnson: We launched the new fully responsive homepage for nd.edu.
From the start, we believed that we could create something bold without making sacrifices to usability. If doesn’t matter if you’re a transactional or experiential user. It doesn’t matter what device you’re viewing from. Whether you prefer a rich, long form approach or a traditional navigational approach, we cover those bases. We launched something where the core brand is present through the entire page. We want the brand to bubble up and out from behind a click or a feature and really saturate the page, regardless of what browser the user is on.
Philip Zastrow: The experiential aspect of this page is our marketing. One of our biggest brand elements is the physical campus itself. Alumni and current students already have an emotional connection to the places featured in the large photos. Prospective students get a glimpse into the experience of being at Notre Dame.
Can you talk about the overall creative strategy—what you were trying to accomplish?
Nick Johnson: The senior leader on campus that tasked us with this redesign believes firmly that when a visitor walks on to campus, they hope at some moment to be moved to tears. We were asked to bottle a little of that up.
Nesting our content choices within a mobile-up strategy helped lead the creative charge. Why not deliver what’s best about your tour site in your homepage too? If your campus is a major part of who you are—as it is at Notre Dame— why not feature the campus in a big way? We wanted to hit that mark boldly, all the while avoiding the girls-under-trees crutch.
You moved away from a typical navigation set for colleges and universities. What drove the decisions you made about navigation?
Philip Zastrow: We wanted to make the navigation as intuitive and simple as possible. We don’t have clear-cut audiences every time the site is accessed. The four core items are About, Academics, Admissions, Faith & Service: a set that is tailored to the needs of any visitor to the site, from prospective student to alumni. This core navigation also corresponds with the sections found on the homepage. There is also a secondary navigation set above that provides information for very specific audiences.
The new homepage brings a large amount of content into one page. What was the thinking here?
Nick Johnson: Most higher ed sites have a big feature area at the top, as did the previous version of nd.edu. Our analytics showed us that pouring energy into rich feature stories is not a good use of the real estate. Less than 2% of our visitors were diving into the feature stories. We were putting a ton of effort into design and photography for these features, and barely anyone was taking the time to read them.
In this version we thought about a model to distribute the institutional identity more broadly: photos that aren’t linked to stories at the top, pieces and details of Notre Dame are distributed throughout the page.
Philip Zastrow: In a lot of ways a homepage is a portal, but we want it to be a more experiential, informative portal. We know our homepage has overlapping needs between our target audiences, so we looked to news websites. These are sites that deal with a wide range of topics and a number of audiences. Plus, they have a lot of information on a single page. The way sites like The Verge handle content is very appealing and inspirational.
Erik Runyon: A challenging, yet fun part of the project was deciding how best to present this wide range of content across the myriad of devices we’re dealing with these days. In some places, we decided that, where you click to switch between content on the desktop, we’d employ swipe gestures on those devices that support it. The conventions of a “touchable” user interface made sense.
Nick Johnson: A lot of credit goes to Erik for the multi-device, responsive approach—from the beginning he pushed for a site that would work for desktop users, smartphone users, tablet users, and whatever is next.
The user interface (UI) seems pretty different than many sites, but still engaging. What informed the decisions you made about UI?
Philip Zastrow: We didn’t want to be like other higher ed websites, but we also didn’t want to be different for the sake of being different. Notre Dame has a unique and vast community with a rich history. We needed to capture Notre Dame.
We took the prospective student tour and walked around campus a lot. We took pictures and sought out little intricacies of our campus that we could bring to the site. For example, the light gray background on the site comes from a pattern found on the walls of the Sacred Heart Basilica. Of course there is the gold from the Dome and some other campus elements scattered throughout the site.
We were also inspired by news websites, entertainment websites, and iPad apps. The news sites largely helped inform how to handle content. Entertainment websites, such as HBO, inspired the experiential approach with accessibility on devices furthering that experience.
How does the site scale well for devices (including tablets and mobile) and how did you implement this?
Erik Runyon: We began by thinking mobile first. We started out knowing that our 1200px wide initial design needed to adapt in every direction. This includes mobile phones and HDTV’s. The difference in this case is that not every device can experience content in the same way. The biggest case on our homepage are the large location images. That experience doesn’t translate to a mobile phone, so now we’re in the process of bringing features to mobiles that are unique to those devices.
Almost everything available on the big screen is available on the mobile version, except that we load content conditionally in order to download fewer resources for mobile users initially. We use server-side scripts to accomplish this.
The large screen version for the whole site is around 2.9 MB. The home-page doesn’t load everything at once, but once someone starts playing with featured content, we load what didn’t download initially. That way, if a user visits for a strictly transactional purpose, they’re not downloading a bunch of content they won’t view or need.
If you load the nd.edu homepage on a tablet, the full set of files downloaded is more like 2.18 MB. The idea is only to give users as much resolution as they need.
If you visit the site on a smartphone you’re getting lower resolution images and less initial content, only about 304k, and we’re trying that to get that number down even lower. The smartphone set of files is very tiny by most .edu standards. And the content we’re not loading for mobiles is available with a single touch on the homepage.
What is cutting edge about the responsive code on the new homepage?
Erik Runyon: We’re using a technique called RESS, and we implemented a fairly simple user agent detection script to decide what platform the user is on. We do this to tailor the experience to the device in order to create an optimal experience for everyone. Eventually I plan on changing our server-side code to feature detection using a library that makes use of Modernizr tests. This is a more forward-thinking method of detection that is less about looking for specific browsers, and more about looking at the browsers capabilities. It’s a good way to future-proof the site.
Do you have any preliminary site metrics to share?
Erik Runyon: Twitter and press response has been overwhelmingly positive. This is my third major launch of nd.edu. The two prior received less than stellar reviews from our internal audiences. This time around we didn’t receive a single negative comment through our feedback form. No one questioned where things had been moved or why.
Nick Johnson: We’ve received lots of favorable press from experts in higher-ed. Voices we care about love the site…it’s been humbling.
Erik Runyon: The overall number of visits to the homepage is very similar, which is good considering we pushed a lot of ordinary conventions out the window. The time spent on the site is similar too. We were happy to see that some of the colleges and departments that are now featured on the homepage are now getting more traffic since the launch.
We are also tracking every action we can on the homepage to learn more about how people are using the site. We’ll use this to drive decisions about content and screen real-estate as we move forward.
Any advice for a university that wants to reinvent their homepage in a unique way?
Nick Johnson: Stop looking at other higher ed sites, because many of them look the same. Somewhere along the way, the higher ed web community appears to have decided upon the “right way” to execute a site. Take a look at your own campus, your own strengths, your own brand and saturate your site with those details.
Philip Zastrow: Designers need to see their canvas as the web browser rather than Photoshop. We have an expansive canvas that can be as small as a mobile phone to as large as a HDTV and bigger, with everything in between. Know your subject and get away from your computer to find inspiration. And get a deeper understanding of how far you can go. Talk to developers to know what is possible and ideally design with code.
Erik Runyon: Respect all users and devices, and think mobile first. Feel free to go crazy with challenging conventions but don’t forget that download size matters, especially for low-powered devices. If it takes too long for your site to download, you’re going to start losing visitors.
List of credits for the new nd.edu homepage and Notre Dame people to follow:
Don Schindler, Managing Director; Print, Web and Multimedia of University Communications
Responsible for the content strategy
Nick Johnson, Director of Web and Interactive Marketing
Responsible for the creative direction, design and development of website.
Erik Runyon, Manager of Interactive Development
Responsible for development of the website.
Philip Zastrow, Web Designer
Responsible for user interface and design of the website.
Stephanie Tatay-Myers, Project Manager
Responsible for resource dedication, meeting documentation and timelines.
Jane Morrow, Content Specialist
Responsible for stakeholder interviews, site map audit and content audit.
Kate Russell, Information Architect
Responsible for Google Analytics, Information Architecture, and Quality Assurance Plan for the website.
Mike Roe, Writer
Responsible for user interface text and copywriting on the website.