Giving our research landing page some structure

Posted in: Content design, Design, Development

Sound the trumpets! We recently shipped another iteration of our Research landing page. We're always keeping an eye on the performance of our pages to identify where there's room for improvement. In the past, this has led to updates to the meganav used across the section. This time, it was the landing page that needed some love.

Our previous version of the research landing page.
Our previous version of the research landing page


We used Google Analytics and Crazy Egg to see how users were interacting with the page. We discovered many users left the page through the three boxes of links near the top - leaving our featured research unseen at the bottom. The featured research area of the page was a mixture of quotes, links, images and videos. The relationship between the different elements wasn't always clear, making for a confusing visual hierarchy. Updating the features was also a fiddly process. Most of the content was hard-coded into the page. A lack of consistency in titles, image sizes and descriptions meant features could not be swapped interchangeably. The page needed some work inside and out. Our mission was to revise the layout, structure and content of the landing page.

Here's what we came up with.

New and improved!
A responsive page, built with structured content in mind

Increased focus on featured research

The links have been moved to the bottom, leaving room for our featured research to shine. We've also taken out the quotes, which means there are fewer elements to keep track of. Since launching the page, several users have mentioned that the new layout had led them to discover the research features and case studies. This lines up with our observation that users were getting distracted by the three boxes instead of scrolling down to the features, so it's good to hear that the page is already more effective.

I love structured content

I really do. It's just the best.

Our list of research features is now powered by structured content. This has two notable advantages: it's more visually consistent and significantly easier to update. All we need to add a new item is a headline, a description, a link and a 596px by 390px image. Fill in the right fields in the CMS and the page is good to go - no more digging around in the source code required.

Follow the leader

The content jumble on the previous version has been replaced with a clear hierarchy on all devices. The first item in the list will always be the most prominent, while those later in the list will fall into line behind it.

A better experience on all devices
A better experience on all devices

The new consistency of the format also means it's easier to rearrange the boxes as required. If we want to highlight one story, we just change its order in the list.

Improved links

Each featured story now also has a visible category (like Energy) which links through to more features from that section. Seeing all the different categories up front also illustrates the breadth of our research. The microcopy on the three link lists also received an overhaul, because content needs iteration too.

Watch and learn

We're confident the new layout will improve engagement with the page and introduce more users to some of the fantastic research going on at the University. However, that doesn't mean the page is immune to improvements. As always, we'll be keeping an eye on the new page to make sure it's getting the job done - and find out how we can make it even more effective.

Posted in: Content design, Design, Development