If you are paying attention to web trends in higher ed, you no doubt saw the rise of the outcomes site reach critical mass in 2015. Keeping up with things, as we do, it seemed to us at Bravery that most had something lacking. There is a lot that can be done in exploring a university’s brand narrative through its raw data, but many of the existing outcomes pieces stop at presenting a static infographic or a data filtering interface, and most of the interactive pieces were flashy to the point of being confusing on the usability front. We set out to create a visually rich and narratively compelling outcomes experience with LMU Outcomes.

In planning this piece with Loyola Marymount University (LMU) in Los Angeles, it became obvious that experiential design was the low-hanging fruit for these sites. Never a group longing after the status quo, we at Bravery set about planning an experience piece that not only presented the data in its most compelling and persuasive light, but also wrapped that data in LMU’s overarching brand narrative while setting a California tone throughout. In fact, we managed to turn around what we think is the best outcomes site a university has ever released in just 30 days.

Bravery’s primary goal was to design a best-in-class outcomes piece that set a high bar for the rest of the industry.

Setting the stage, emotion first

We already design mobile-first for every web project we do and it seems old hat to keep harping on something that, in this day and age, should be expected. In planning the LMU Outcomes piece, we took a new approach in designing for emotion first. We wanted any time spent on this piece to carry some weight. We collaborated with the mega-talented Ryan Weaver in generating an illustrative style to establish a sense of place and time.

LMU Outcomes on a phone

After defining the overall mood of the experience through the illustrated LMU bluff, we started looking at motion graphics. We wanted to use a light touch here with perspective parallax effects on the multi-layered illustration and extended that touch to slowly drifting imagery throughout the content sections.

Speed tricks

Despite using SVG images for the illustration pieces, we knew file size was going to be a challenge to speedy loading of the site. We simplified and compressed the SVGs as much as possible without degrading too much detail and then set about on some tricks to make the site loading time feel faster.

Outcomes Site on a laptop and iPad

SInce most visitors would enter at the top of the page, we turned the hero area into an animated feature. The layers of the bluff fade in (on slower connections), the hero title fades and drifts, and a giant “outcomes” seems to rise with the sun from behind the California mountains. This short, 3 second introduction is generally enough time to get everything else loaded while keeping the visitor distracted … in a good way.

Presenting data

The LMU Outcomes project presents its visitors with real student outcomes data and then lets them interact with it. We opted to go in a simpler, more restrained direction using donut charts, supportive text, and in some cases logo grids to communicate the data. Visitors to the site can filter that data by college or school and by class year, with the option to show aggregate data across all years and segments.

Data display on an iPad

The LMU team was provided a dashboard interface for adding to and editing this content through WordPress. We chose WordPress for its interface familiarity to LMU staff and for its flexibility. Speed to launch was also a deciding factor in our CMS choice. Had time allowed we may have have considered building a lighter weight system for managing and displaying this information.

WordPress REST API

When it came to flexibility, the inclusion of a JSON REST API in WordPress contributed heavily to the types of things we could do on the frontend of the site. We’ve been using the REST API for years, but this is the first project where we were able to harness its new inclusion in WordPress core.

That sort of data access flexibility made filtering options a lot easier to work with on a quick timeline.

Continuing flexibility

A with any project we build in higher education, we want to provide our clients with the ability to grow and build upon our work. LMU’s outcomes piece provides the extended flexibility to add additional annual data as it becomes available.

We loved working on this project. Setting a new level of excellence in visual and experience design in higher ed is something Bravery will continue to pursue. LMU Outcomes is just a taste of what’s to come.