Refreshing the homepage

Over the coming weeks you will begin to notice a number of design updates to our University homepage

3 min read

A modular approach

Every webpage on our site is built by adding different content modules to a standard page template in our CMS – we call these feature panels. 

This modular design approach allows us to reuse and combine these feature panels in various ways across our website. It's a bit like Lego, adding one brick to another to create a wall – or in our case, a page.

A modular approach is especially beneficial for large organisations with multiple audiences, where anticipating the content needs of every page requires considered thought. 

Page design is always content-led. Content drives page design because every piece of content should be matched with a design to best serve the page goal.

<p>Development work on new article group styles from pre-production CMS</p>

Updating feature panels: example of developing the Article Groups style

 

A seamless approach

A major deliverable is to develop features and modifications for a new homepage design. As business as usual is 24/7, we were not in the position to close the site and launch a brand new one. We have simultaneously met BAU demands and improved existing feature panels and tools to refresh appearance and functionality, in a timely and cost-effective manner.

A staging site and the power of our current CMS ensures we can develop, test and deploy updated feature panel elements in the least disruptive way to our end users and stakeholders. 

We follow a smart approach based on clever iterations of existing features – adding extra functionality and aesthetic updates to an already solid working product – much like downloading the latest video game patch and receiving new level designs and character skins.

<p>Screenshot showing demo of how updated news list function.</p>

Staging: developing a new version of News List functionality in pre-production

 

An agile approach

At the heart of the website refresh project is our agile approach. Agile is a timeboxed, iterative approach to delivery that builds software incrementally from the start of the project, instead of trying to deliver it all at once.

In an agile project, an iteration is a period of time during which specific developments takes place. Often called a sprint, the duration of each iteration may vary from project to project, usually between one and four weeks.

Some of the benefits of an iterative model are that it is more flexible and less costly to change scope and requirements. It's easier to test and manage risk, puts a focus on the user and business needs, as well as being a real-time and transparent way to measure milestones in Pivotal Tracker.

<p>Demonstrating opaque hero images.</p>

Inside a sprint: demoing how hero text can appear on an opaque background

 

What's new for the homepage?

A number of existing feature panels now have the option for CMS super users to select a different design for homepage inclusion.

So far these include updated:

  • Text and Image feature panels
  • Case Study feature panels
  • Article Groups feature panels
  • News and Events List feature panels – includes option to show thumbnail images for each item in list
  • Gallery feature panels.

Other updates include:

  • new top-level website navigation (sitewide)
  • multiple style options for title and summary – including option for a hero image call to action (homepage only)
  • option to have opaque hero title blocks for text over hero image (homepage only)
  • five new colour page themes have been added (homepage only)
  • option to make pull quotes part of a page's theme colour (homepage only)
  • higher quality full-width hero images (sitewide)
  • a new Hero Images tab in the CMS, where up to 5 images, with or without links, can be added (homepage only)
  • option to view available hero images on a page as a user – images cycle through after each page refresh (homepage only)

  • several presentation options for imagery and text with links to information (homepage only)
  • removal of grey gap between feature panels and text sections of pages (sitewide)
  • fullscreen playback on embedded YouTube videos (sitewide)
  • changes to Call to Action (CTA) format (sitewide)
  • social media integration (sitewide)
  • new design style for accreditations (homepage only)

<p>Screenshot demoing option to have more than on hero image</p>

Demonstrating the option to cycle through hero images for the homepage

 

Website Refresh Project 2020

The University's external website is undergoing a refresh to update certain design elements, functionality and content, as part of a project ending on 31 July 2020. 

Keep up to date with everything that's happening – from the latest new content design features, to the next developments on the horizon

<p>Post-it notes used for Agile planning.<br></p>