Website development

TASK

Encourage Interactivity and User-Generated Content

We began with the clean, photo-driven design centered on a large Columbia University logo and School header so readers knew instantly they were in the right place. To keep the homepage content organization simple, the nav included only three prioritized sections – Events, History, and Memories. Then, to add movement to the design, our development team coded four interactive elements: a full-screen background slideshow with navigational arrows that also auto-rotates every six seconds, an interactive history timeline with jump-to-date functionality, Facebook and Twitter integration, and a carousel of milestone dates.

Inside the three sections, our award-winning development team allowed alumni to perform multiple actions including sorting, searching, refining, selecting, downloading, sharing, mapping, and adding their own content.

• Sort, Select + Map — Inside the Events section, alumni could sort the event postings in two ways: 1) selecting a date on the calendar or 2) selecting ‘Past’ or ‘Upcoming’ links. For those who hoped to attend, they could easily click the location link to be taken to a Google Map with auto-loaded destination.
• Refine dates — In the History section, a tiled page of 250 historic moments could be further refined by a vertical timeline in the left rail that allows alumni to jump to their graduating class.
• Add content — In the Memories section, an input field allowed alumni to write their favorite memories, upload a photo, and include the date of the memory, and their name and email in a custom CMS.
• Download + Share — In the Multimedia link on the footer, alumni could view ten engineers’ video interviews. We strategically decided to host the videos on YouTube to keep bandwidth costs down and performance up. This also allowed them to leverage YouTube’s sharing capabilities to Facebook, Twitter, Google+, Reddit, Blogger, Tumblr, Pinterest, LInkedin, and StumbleUpon.

The multitude of alumni-engagement points made the online destination attractive to its audience of nostalgic class members.

ACTION

Build a Flexible CMS and Tap into Sharing APIs

On the site's back-end, a flexible CMS was required to house all of the School-provided and user-generated content. Fortunately, we’re longtime members of the ExpressionEngine Professional Network, so we utilized our expertise in building a robust CMS with custom modules and plugins.

Every piece of media had attached with it a taxonomy of searchable tags. The team paid particular attention to making the keyword search fast, and added relevance by applying weights to certain pieces of metadata.

For the homepage social feeds, we also tapped into the official API widgets from Facebook and Twitter to pull in real-time social posts with live links. In addition to pulling from social media, the development team encouraged alumni to push the site’s ten video interviews to social media.

RESULT

An Interactive Site That Engaged Alumni

In the end, alumni participation was well documented. For example, the user-generated memories were such a success that 57% of the posts came from alumni – with the other 43% of posts being provided by the School’s yearbook.

The clients rejoiced over the level of detail that we put in – especially our dedicated Quality Assurance team. Knowing that the audience was comprised of all ages and countries, the site needed to work seamlessly and be cross-browser compatible.

When Columbia University’s School of Engineering and Applied Sciences anniversary launched, the faculty and staff were proud to feature the custom site on their .edu homepage and share it across their many social media accounts.