User insight driving design choices

Since 2014 SMILE have been working with the University of Birmingham, a Russell Group institution, on delivering their online event platform.

Aston Webb for why bham Cropped

The platform’s longevity is a testament to its success. In its first iteration, the platform began life as a Postgraduate only platform, but pretty quickly struck up a good following with both students and staff, leading to it being deployed across undergraduate and international departments as a tool for hosting online events with a focus on personal, timely and authentic communications with prospects.

The platform was launched in early 2015, and whilst developments had been bolted on over the following three and a half years, a growing appetite for a more fundamental tidy up led the university back to SMILE.

Over the years since its original launch, the university had seen many changes. Strategies had evolved, staff had moved on and brands had been tweaked and updated. It was time for the platform to realign itself with these changes. 

Our process began with an in-depth review of the existing platform. As well as those changes internally at the university, we’ve seen huge advancements in technology since the platform launched, so we knew of some quick wins in terms of how the infrastructure could be updated, and how we could use new techniques to offer users a better experience across devices. We also had our own opinions on how we’d like to see the design and UX evolve, but we were keen to back our design choices in evidence.

Having first-hand experience with their users, university staff also had an idea of how the platform needed to evolve. Backing this up with a data analysis piece gave us direction for the updates.


Events

In terms of layout and functionality, events is the most complex section of the site. It’s also the biggest pull in terms of traffic so it seemed sensible to start here. 

Some background

Events fall into one of three states: Upcoming; Live or; Past. Each state has a different set of data attached to it (for example, date formats update as the event moves through the states).

StateDate Format
UpcomingWednesday 28 September 2018 10:00-16:00
LiveToday 10:00 – 16:00
PastTook place on Wednesday 28 September 2018

In addition to the date, page content updates according to the state the event falls into. Live and past events have a video function, whereas upcoming events have a sign-up form to register for event updates. 

Based on data analysis and opinion gauging with users, we identified that the most engaged-with content are the video and live chat. Everything else had lower dwell times. 

As part of our review, we identified that the site would benefit from an updated typographic system. The brand had evolved and we wanted to use the platform to take more ownership over brand colours and typefaces. 

In the screenshot above, the site masthead is huge, taking up a lot of space and detracting from the event content. By containing the university logo in a ‘tab’ and allowing background images to flow behind, the masthead instantly feels more integrated. 

A new event title bar has been designed featuring a scrolling ticker as a nod towards news websites and TV channels. The date field automatically switches based on the state of the event. 

Aware that live chat and video are the most important pieces of content, it’s no surprise that we opted to put these front a centre. Moving the Live chat from right to left and making it sticky keeps it fixed in the viewport. To add more focus to the video it has been increased in size. In addition, scroll transitions have been implemented to keep the video on-screen at all times. In the screenshots below you can see a pre-scroll version of the page (left) and a scrolled version of the page (right). As the user scrolls to reveal content positioned further down the page, the video shrinks into a grey bar that sticks to the top of the event panel, allowing other content to scroll behind. The playlist also transitions to show only the next on deck.

imac 3

Stylistically, the site now takes more ownership over the brand colours and typefaces. A new typographic system provides more contrast and therefore hierarchy between content. In general, the user experience and the way in which content is served is more considered. 

Elliott Barnicle
Elliott Barnicle

Lead Designer