The Anatomy of a Video Shoot

Whether you’re planning a major video project with an outside vendor or want to enhance your own or your staff’s ability to produce video internally, knowing how the pros approach a project can make your efforts more efficient and cost-effective.

Register now. Space is limited.

Who it’s for:
Marketing and communication professionals at education institutions who are planning major video projects or would simply like a better understanding of how video is produced.

What we’ll cover:
We’ll walk step-by-step through the process of producing a short series of video vignettes, beginning with key messages and audiences and following with pre-production (scripts, storyboards, casting, and locations), production (sound, lighting, styling, and interview techniques), and post-production (transcripts, editing, music, titles, approvals).

How you’ll benefit:
At the end of the webinar, you’ll have a basic understanding of the video production process that will make you better able to interact with vendors and/or internal video staff , allocate people, money, and time to a video project.

The presenters:
Writer and creative director Mark Sheehy of mStoner has led video projects for a wide variety of higher ed clients. Director and producer Libi Hake of Olin/Hake Films, Inc., a frequent mStoner partner, has been producing video for education, health care, and other non-profit institutions for more than 20 years. Together they have produced TV spots for University of Detroit Mercy, student profiles for Trinity University’s Webby Award-winning Virtual Dorm Room, and video vignettes for George School’s CASE Gold Award-winning website.

When is it:
Thursday May 24 at 1:00PM CT.

Cost and attendance:
The cost is free. Attendance requires registration.

What do you want to know about web video production? At the end of the webinar Mark and Libi will have time for questions. Make sure yours is answered and leave your question in the comments now.

We can help:
Email Me if you are interested in having mStoner address your web video needs.

Posted by Mallory Wood
Additional Posts (30)
Categories: Marketing and branding / Social media

Discuss this article (0)

Reel Deal Monday: Big Things Are Within Reach, Nina Blanco

Profiling current students is one of the easiest ways to show prospective students the potential opportunities available at your institution. This idea isn’t rocket science, but it can have a big impact. Here is the second video in Southern Illinois University Carbondale’s new series “Big Things Are Within Reach.”

Perceived Goals

• Sharing opportunities available for students attending SIU with prospective students. (“This could be you!”)


• “This series focuses on students gaining hands-on experience and pursuing their goals,” stated Tamarah Cook, manger of social media at SIU.


• Tamarah added that this series directly supports SIU’s overall branding messages.

Evaluation

• “Big Things Are Within Reach” videos are created and produced by students on the Social Media Team. Awesome! Giving capable students a project like this is really smart. They’re in touch with the current student body, have the ability to easily find these unique stories, and the end result will often look more authentic.


• If you aren’t required to have a three to five second intro of your institution’s logo, get rid of it. You can always put your logo at the end of the video or add a small watermark over your frames in the beginning. The first five to ten seconds are critical to retaining your viewers. In some ways I consider those intro-logos to be a punishment!


• I love the b-roll and effects selected for the beginning of the video. Making it clear very quickly that Nina’s story is unique and taking place outside the typical academic setting was a smart decision. As a viewer, I’m curious to see and hear more.


• The shots of Nina in action are interesting and fun. Filming the interview from her DJ chair enhances the story and provides authenticity. Smart visual choices!


• When you’re profiling current students with web video it is really important to select people who will be natural and relatable in front of the camera. Nina was a great choice.


• Layering music or other audio underneath a person speaking is a common practice, but you have to be really careful to not distract viewers from what is being said. The music was well selected for Nina’s video profile, but overall it needs to be toned down. Many video editors will auto-adjust layered tracks for you, known as “ducking.” Make sure you manually re-adjust if necessary. In fact, you might have to reduce the volume of your layered tracks to different levels throughout the video depending on how loudly the person on camera is speaking. Once you have all the audio tracks properly layered and adjusted, always give the entire video one final listen, with you eyes closed. It’s amazing what you might pick up when you remove the sense of sight and just focus on listening.


• It’s important to select your visual effects wisely. Too many transitions, flashes, or filters can be a bit overwhelming.


• Perfect length.


• More could have been done with the description and tags. What if a student wants to take Nina’s path? What is the next step? Why not provide a link to her major’s academic page? And better tagging will increase the likelihood that other videos from this series will appear in the side column of related videos.


• In case a prospective student discovers these type of videos on your YouTube channel, create YouTube playlists for your video series when two or more videos are posted.


• In case a prospective student randomly stumbles across this video, don’t make it difficult for them to discover the rest. Using YouTube annotations you can quickly and easily link to the rest of the videos in your series.

Results

• This video fits well into the theme “Big Things Are Within Reach.” And Nina is a great example of a SIUC student pursuing special opportunities.


• The video has received a modest number of views.


• Selecting a title for the series that is in line with other branding efforts allows SIUC to take advantage of SEO opportunities. For example, notice the first sentence on the how to apply page.

Rating

My rating for this video is a 7.5. The video series is a fantastic idea to enhance the “Big Things” tagline and profiling Nina was a smart decision. I took into account that this series is student created and produced, but there were some audio issues and other minor details that prevented me from giving the video a higher score. Overall, it is an interesting and enjoyable video to watch.

Thanks for sharing this series, Tamarah!

Don’t forget to submit a video from your institution.

Next week I’ll be taking a short hiatus from the Reel Deal Monday series. But don’t worry, something even better is in store…

Posted by Mallory Wood
Additional Posts (30)
Categories: Marketing and branding / Social media

Discuss this article (2)

Insanely passionate about Drupal? mStoner’s seeking a Technical Lead

Are you a great communicator and broadly knowledgeable about technology, the web, and social media? Know Drupal inside and out—and passionate about Drupal? Insanely curious? And personally invested in making education stronger? We may have the perfect position for you.

mStoner is seeking a technical lead for one of our consulting teams. You’d join one of our consulting teams, working with colleagues (strategists, writers, designers, project managers and technologists) to provide web-first communications and marketing consulting to education institutions around the world. With offices in Chicago, St. Louis, and Vermont, we develop web solutions that help schools, colleges and universities to reach and engage constituencies that include prospective students and their influencers, current students and their families, alumni, faculty and staff, and donors. We arm our clients with the best marketing and communications strategies in higher education.

Here’s the job description.

If this sounds like you, let us know: email Bill McLaughlin, our COO (bill.mclaughlin(at)mstoner.com) and tell him why you rock.

Posted by Michael Stoner
Additional Posts (322)
Categories: Jobs

Discuss this article (0)

Oh, the Humanity!

Think about some of the world’s most popular web technologies for a minute and notice just how much they enhance the human conversations and relationships. Facebook is a living canvas of our relationships and now with timeline it can be a personal history of all of these human connections over our lifetimes. There is sophisticated technology behind all of this, but it is entirely focused on enabling the human relationship.

What is Twitter, technologically speaking, but a series of short, tagged content managed by an ever-growing number of pieces of hardware to serve it? Looking at it from the human side, it is so much more – a method to communicate emergent human experience and foster global human relationships on a scale unlike anything that we have had before.

LinkedIn is an incredibly sophisticated, powerful database – but its value lies not as a database, but with the professional human relationships it helps to build and facilitate.

In much the same way, college websites are built on many different kinds of technology but exist primarily to help human beings communicate with each other. The sites we use in higher education crunch numbers, model data, run queries, tag information, and much, much more from a technical standpoint, but the reason they do all of these things really isn’t technical at all.

When thinking about what features, functionality, layout, and structure your website should have, it can be beneficial to start with the human relationships you want to build, conversations you’d like to have or stories you want to tell and work backward into the technology that accomplishes those in the best way.

For example, take the major gifts officer who is trying to convince a donor that the university is worth giving to – this is a deeply human relationship, one that requires a long period of one on one conversation and a building up of trust and rapport. The website should make the case for giving through donor stories and then provide clear information on how to connect with the human being on the other side.

A good, engaging admissions site includes lots of human conversations or ways to initiate conversations later on – student blogs with comments, a live chat feature, and information on visiting campus or one on one interviews – all with the end goal of connecting people to other people.

mStoner produces websites for higher education; but launching your website isn’t our ultimate goal – we are looking to enhance the human relationships that you have with your various constituents.

We want your prospects who visit your admissions site to feel connected to the students who are already there. We want your alumni stories to resonate with other alumni so that they remember what those human relationships were like in the past and rekindle them in the present. We want information to be easy to find so that people can contact the right people for the right human conversations.

This approach even applies to the purely transactional elements, such as filling out forms. A good transactional page is one that gets you through the process as quickly and intuitively as possible, leaving you with more time and avoiding you sitting at your keyboard shouting “I just want to talk to a real human being!”

Our web project process at mStoner emphasizes people first as well – at the beginning of every one of our projects, we send a team of people out to an educational institution for two straight days of just….talking to each other. No technology necessary. We want your human stories and insights. We want the beginning of our relationship with you to be a very human one just like we want your website to be the beginning of a very human relationship with your audience.

The next time you begin a new technology project (website or not), begin with the human conversations that need to take place and think about the person to person relationships that need to be fostered. Ask yourself if the technology solution that you are proposing is something that will enhance the human conversation or hinder it. Starting from this vantage point will help identify what’s truly important to the success of your project, and what is simply technology for technology’s sake. Trust me, your humans will thank you for it.

Posted by Fran Zablocki
Additional Posts (1)
Categories: Content and writing / Marketing and branding

Discuss this article (0)

ISO … Campaigns That Utilize Social Channels + Other Channels & Got Results

Did you create, or do you know of, a campaign, large or small, that used social media and other channels (online and/or offline) and got results? Would you please let me know?

Here’s why I ask:

I’m developing the content for a white paper about what we learned in the 2012 CASE/mStoner/Slover Linett survey of social media in advancement. It’s very clear from this year’s results that institutions that rate their social media activities as very effective or effective embed social media into broader campaigns where the social channels are connected to and amplified by other channels. This echoes findings from last year.

We want to research and write up a number of case studies of effective campaigns for our white paper. And I’m trying to discover campaigns that I don’t know about. If you could help, that would be awesome!

We’re looking for examples like these:

• Webster University developed a campaign to build brand awareness and increase engagement through a concert ticket giveaway in the summer (a time when many people weren’t paying attention or engaging much). They used a website, Twitter, Foursquare and YouTube.


• Elizabethtown College and Messiah College collaborated to bring a traditional soccer rivalry to social media, with alumni competing to see which college could win by boosting its annual fund the most.


• The College of William & Mary developed an alternative viewbook consisting of a deck of cards with word pairs (“Naked and Friendly”). A website enabled visitors to contribute their own word pairs.

I’d love to know about other examples. Can you share one or two?

To be clear, I’m looking for examples of campaigns focused on alumni relations, giving, advancement, brand building, student recruitment, or other purposes that combine social media with other channels (online or offline). For the record, I define a campaign as “a focused effort to achieve goals using a variety of channels appropriate to the results sought,” so it’s not restricted to fundraising. The campaign can be fairly limited in scope, as in the above examples, or much bigger, such as Oregon State University’s Powered By Orange initiative.

You can send me an email (to Michael.Stoner[at]mStoner.com) if you have something to share. Here’s what I need to know (at this point, shorter is better):

• Please tell me a little about the campaign: What was its purpose? Who did you target? What channels did you use?


• What results did you achieve? (In other words, why did you say it was “successful?”)


• Can you share a few images? (Facebook posts, graphics, etc.)

We’ll take it from there. This is a great chance to share your (or a colleague’s) success with colleagues who, in the inimitable tradition of education, are eager to CASE (that stands for “Copy And Steal Everything”; also, of course, for the cosponsor of this work, the Council for Advancement and Support of Education).

Again, case studies that emerge from this request will be included in a (free) white paper that will be broadly distributed to schools, colleges and universities. You can download the 2010 white paper from the CASE website (here. It contained a number of case studies (about Powered By Orange, Northfield Mount Hermon School, the Emory University Alumni Association, and William & Mary’s mascot search).

Thank you: I’m grateful for your assistance!

Posted by Michael Stoner
Additional Posts (322)
Categories: Admissions and recruiting / Alumni / Design and usability / Fundraising / Marketing and branding / Social media / Strategy

Discuss this article (0)

Receive a discount and attend Hannon Hill User Conference

This year mStoner has a handful of discounts to give away for anyone interested in attending the 2012 Hannon Hill User Conference.

Where? Atlanta, GA
When? Sunday, September 16 through Tuesday, September 18, 2012

If you register by May 31 you’ll also be able to take advantage of the $100 early bird discount.

Interested in receiving this discount? Email Me for the code.

mStoner is a Gold level sponsor of the 2012 Hannon Hill User Conference.

Posted by Mallory Wood
Additional Posts (30)
Categories: Technology and software

Discuss this article (0)

Telling Your Research Story

If you work for an institution that not only allows undergraduate research, but actively supports undergraduate research opportunities, it’s likely a point of pride and a distinguishing feature your institution wants to promote.

Try this: select two or three institutions and search for information on faculty and student research. Can I hear a womp womp? In my experience, research-focused pages are text-heavy, organized for a specific internal audience, and intimidating to new viewers. I get overwhelmed and frustrated navigating these sites, and I do this for a living! Imagine the experience for a prospective student.

It’s commonly noted that some of the top questions a prospective student asks are: Where will I live? What will I eat? Who will my friends be? What will I major in? It’s not that pre-college students are shallow thinkers, it’s that they ask about what they know. For many students, research is an abstract idea. This is even more true for the approximately 30 percent of entering freshmen who will be first generation college students. For these and a number of other students, the college search process will be the first time they are formally exposed to research.

Undergraduate-focused institutions need to effectively communicate their research story to a young, novice audience. Here are my top tips for doing so:


1. Make it Personal
Students entering college today live in an incredibly intimate environment. They share their personal pictures across social networks, Skype with friends hundreds of miles away, blog daily details of their lives, and pin up their hopes and dreams for a wider audience. Therefore, posting a research story with an just the researcher’s name feels oh-so-90s. Nowadays, students want to know a good deal about the individuals behind the work. Where is he/she from? What did they study? How did they get into research? They also want to know results (there’s a point to doing research, right?): Did they go to graduate school? Where do they work now? What did they learn from the research experience?

Hampshire College does a great job of making their Division III experience personal. The experience, essentially a capstone research project required of all students, is unique to Hampshire and will naturally induce a lot of questions from prospectives. Their feature page allows individuals to peruse over 20 projects per year from 2003-2011 complete with individual photos, process stories, and “share this story” opportunities.

2. Keep it Simple
Since many students are new to the idea of research, they aren’t concerned with the minute details. One of the best ways to communicate with prospective freshmen is to keep it simple. Can undergraduates do research? What does it look like?

I stumbled upon the KU prospective student research page and the first word that popped into my mind was “refreshing.” Additionally, the pathway to that information was intuitive: Homepage—> Undergraduate Admissions—> Academics—> Research. Ta-da!

3. Speak to the English Majors!
When I was an admissions counselor I would say to a room full of students “Raise your hand if you’re interested in research.” I would proceed to ask them which majors they were interested in and I received a bevy of science-oriented responses. When high school students do have familiarity with research, it’s almost always mentally associated with the hard sciences.

Emory’s College of Arts and Sciences does a phenomenal job of not only saying there’s research beyond the sciences, but also showing what it looks like. Visitors select between Research in the Sciences, Research in the Humanities, Research in the Social Sciences, and Research in the Creative and Performing Arts. To me, the message screams, “everyone does research here.” On the site there are specific research titles, images to grab the eye, and student profiles to keep it personal.

4. Be social!
Sure, students will visit your website. Common sense and some good ‘ol Google Analytics tells us, though, that the frequency, quality, and duration of their visits varies by time of year. Yet, you can be certain students are on social media outlets year round. Communicating effectively means meeting students where they are: on Facebook, Twitter, Flickr, and YouTube.

The University of Chicago has a pretty great research footprint on Facebook. I found the teasers, images, and likes to be so compelling that time flew by as I played around in their timeline. I’m going to guess that’s exactly what they were going for: engagement.

Long story short, if research, particularly undergraduate research, is truly a distinguishing mark at your institution, there needs to be more thought and energy put into telling that story.

How does your institution communicate research opportunities to prospective students?

Posted by kylie.stanley
Additional Posts (1)
Categories: Admissions and recruiting / Marketing and branding

Discuss this article (0)

Reel Deal Monday: If you can… You can go to Brock

Sometimes dealing with criticism head-on is the best approach. The saying goes: “If you can walk and talk, you can go to Brock.”

Karine Joly covered this video when it published in February 2011. Read her Q&A with Kevin Grout, Marketing and Communications Manager, for a background on why and how the video was produced.

Perceived Goals

• Address the misperception that Brock University accepts anyone who applies.


• Highlight the intelligent and engaged community at Brock.


• Positively enhance the University’s reputation.


• Incorporate into undergraduate recruitment initiatives.

Evaluation

• Someone very smart chose to begin and end the video with one woman stating, “You know how the saying goes.” (Was that you, Kevin?) This is effective at the beginning because once viewers recall the full taunt, they are bombarded with Brock students and faculty sharing their academic accomplishments. Unless you’ve brushed up on your SAT-vocab recently, a first-time viewer might become overwhelmed with the academic opportunities and might not understand everything being presented. The quick pace of the video contributes to that feeling. By the end of the video, when one can’t help but think, “Wow, there is a lot going on there…” the first woman reappears. This time when she says, “You know how the saying goes,” the viewer realizes the full absurdity of the taunt.


• One criticism. I wish they’d highlighted a physically disabled student who is succeeding academically… even though they can’t “walk.”


• My favorite clip: I loved how Brock got the point across that they attract leaders and people who think for themselves. It was powerful to say “If you aren’t one of these…” followed by an image of a sheep. The message was clear and clever.


• I think it’s interesting that Brock chose to use an image of a closing door to accompany the latter half of the statement, “Fall in love or lust.” But hey, it’s college.


• Warning, this is really picky. The timing of “supportive” around 1:06 and the person’s hand touching his friend’s shoulder was perfect. Combining sensory cues has a huge effect for the viewer, whether they realize it or not.


• I like the text they selected for the video description. It strikes a balance between being friendly and inspiring.


• This video was very well produced. Audio, visuals, length, pace… it’s all works together seamlessly. Kevin shared with Karine that a professional crew shot the video, but the concept and script were developed internally.

Results



• Nearly 30,000 views is nothing to sneeze at.


• Unlike many higher ed videos I’ve seen, this one actually received comments. It is great to see that Brock took the time to respond to some comments from the institution’s account and individuals associated with the project left their responses too. (And for what it is worth, I think it was a smart decision to avoid some of the more ridiculous conversations.)


• I’d be curious to hear more from Kevin on whether or not they feel the video helped counter misperceptions.

Rating


It isn’t easy to tackle tough subjects head on and I commend Brock for having the guts to produce this video. This video receives a 9.5 rating because it was edgy, smart, and well-produced.

What rating would you give this video and why? Leave a comment below.

Don’t forget to submit a video from your institution.

Posted by Mallory Wood
Additional Posts (30)
Categories: Admissions and recruiting / Marketing and branding / Social media

Discuss this article (2)

Reinventing the Wheel: the Innovation Behind Notre Dame’s Unique New Homepage

“Notre Dame is known for being independent. We break away from the crowd. Why wouldn’t we do that with our website? I’m forever grateful for our leadership that believed we could do it and for the team that made it happen. We do this not only for nd.edu but every project that rolls through University Communications. I’m blessed to be a part of this department.”
—Don Schindler, Managing Director; Print, Web and Multimedia of University Communications

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 much 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
@donschindler

Nick Johnson, Director of Web and Interactive Marketing
Responsible for the creative direction, design and development of website.
@GtownNick

Erik Runyon, Manager of Interactive Development
Responsible for development of the website.
@erunyon

Philip Zastrow, Web Designer
Responsible for user interface and design of the website.
@zastrow

Stephanie Tatay-Myers, Project Manager
Responsible for resource dedication, meeting documentation and timelines.
@stephaniemyers7

Jane Morrow, Content Specialist
Responsible for stakeholder interviews, site map audit and content audit.
@janeway2

Kate Russell, Information Architect
Responsible for Google Analytics, Information Architecture, and Quality Assurance Plan for the website.
@krussellnd

Mike Roe, Writer
Responsible for user interface text and copywriting on the website.
@wokeupwithword

Posted by Doug Gapinski
Additional Posts (38)
Categories:

Discuss this article (4)

The What and the Why

I’ve been helping a business school lately with the strategy for their executive education site, and part of my background work has been to conduct one-on-one interviews with corporate learning officers (CLOs)—those who either create internal educational programs or connect individuals with development opportunities offered by third-parties like business schools. Let me please say that I love talking to people for projects like this almost as much as some have liked talking with me (I’d heard from more than one person that it’s like therapy). In our kickoff meeting, my client told me that CLOs look for program details, faculty members, timeframe, cost, and outcomes. Makes sense, but this quote from one interviewee really captured my attention:

“What every guy in my chair fears most is having an executive go away to a program for two weeks and say ‘it was a horrible experience’.”

That statement explained so much to me about my audience: why recommendations from colleagues are so important, why most general collateral ends up in their trash can, why they tend to build longstanding relationships with some institutions to the exclusion of other—perhaps more-qualified—providers, and why the ability to register online was not at the top of their wishlist.

It’s one thing to know what someone comes to your website for. It’s quite another, however, to get a glimpse into the feelings and motivations that drive expectations for information, service, and interaction. Understanding what’s happening in someone’s head and heart helps us to build a better web experience for the people we’re trying to reach. It was true more than a decade ago when we first started talking about visitor-centered design, and it’s true today. And it’s a large part of what keeps our work interesting.

Posted by Voltaire Santos Miran
Additional Posts (100)
Categories:

Discuss this article (0)