University of Illinois

UX/UI Design and Development

View of the website on different devices

Redesigning the campus website and the custom content management system behind the homepage/2015

Overview

  • Client University of Illinois
  • Role Lead designer & front-end developer

Methods

  • Research User interviews, competitor analysis, usability testing
  • UX Content strategy, information architecture, wireframes, prototypes (paper, html)
  • UI Art direction, modular design system, responsive design
  • Front-end HTML/SCSS/jQuery

Case study—Reflecting the campus experience on the website

Background

The University of Illinois launched its campus website redesign in the spring of 2015. The process began in 2013, five years after the most recent redesign. Like previous versions, this was completed in-house. I was both the lead designer and the front-end developer.

Creating an experience

Surveys and interviews with users and stakeholders revealed that the website should focus on being an experience in addition to serving as an information gateway—something it had never prioritized. The design should support users who know what they’re looking for and allow them to accomplish tasks within an Illinois-branded environment. It should also introduce the chance of discovering something that users didn’t know would interest them.

User input

Throughout the process, proposed website features like a new navigation system and more prominent search bar went through many rounds of usability testing at all levels of fidelity—paper prototypes, wireframes, and a live website.

Design priorities

  • Use storytelling to demonstrate impact: showing examples of impact is more effective than listing strategic goals
  • Start conversations: interact with the campus’s strong social media presence
  • Be device agnostic: no more need for a separate mobile-only version
  • Set the standard for design on campus: it’s important to lead by example on a decentralized campus
  • Be dynamic: give people more reasons to come back
The Illinois website displayed on two tablets to show how much more space for campus news on the redesigned homepage

More spaces for campus news stories to be featured on the homepage (hero slideshow, cards, social media section).

Designing an information pipeline

One way the new homepage demonstrates the many opportunities for research, culture, and engagement on campus is by featuring a lot of campus news. Because the new design greatly increased the capacity for displaying articles, the design process involved planning ways to collect enough stories to keep content fresh.

Post-its of the news grid during a brainstorming session Planning the blog tool content flow

The university content platform was rebuilt as part of the homepage redesign process. This was a lengthy collaborative effort from several units.

Establishing a new mechanism to gather stories required making big changes to the university’s custom content platform, a suite of digital communications tools. This effort was a close collaboration with campus news writers and communicators, homepage content administrators, software programmers and designers, and the homepage designer/front-end developer (me). The new system, which was built with the university’s custom blogging platform, also supported an internal initiative to build a repository of campus stories for marketing communications.

Story gathering benefits

  • Creates a pool of content ready to distribute to various communication efforts (speeches, social media, campaigns)
  • Lowers the barrier for contributing to the content pool (empowering campus communicators)
  • Streamlining the process for collecting content (efficient for content curators)
Different page layouts

Page layouts are assembled from different module options instead of a one-column template.

Different page layouts

The type of content drives the layout instead of the type of page.

A future-friendly design system

Creating a modular design system not only improves the presentation of content, but it also allows the university to iterate on this design more easily when requirements change rather than having to begin another traditional, lengthy redesign process.

Launch website