Hero banner redesign

Lewis Wake
Friday 19 April 2019

We have taken feedback into consideration and optimised the hero banner used for home pages. The current hero banner has been in effect since 2015 with minor adjustments to improve accessibility over time.

Problems with the old hero banner

Old hero banner pattern on a laptop

Image selection criteria is restrictive

Only certain types of images work in the hero banner. Selecting images for hero banners has been a complex process and there are a lot of acceptance criteria that they must meet to succeed. There are a lot of great images that help showcase the University’s character, but they are often thrown aside because they do not function correctly in the limited space provided by the hero banner pattern.

Poor text contrast ratio

Back when the pattern was launched, it never included a colour overlay. White text was displayed directly over the image.

We added a colour overlay so text was more accessible for visually impaired users.

The paragraph text of the hero banner is white text on hundreds of differing hues of whatever colour has been used to overlay the image. It is near impossible for us to accurately determine the contrast ratio of the white text. This poses problems when grading the accessibility the pattern. Visually impaired users may find difficulty in using the pattern.

Character is washed out

To cater for accessibility, we had to sacrifice the prominence of the background images. Because of this image, have been reduced to background noise. They only provided vague tone of the University. As a result, there is a lack of marketing appeal.

Image is a complete after thought on mobile

The hero banner background image is completely obscured on mobile devices. It may as well not be included.

Old hero banner design on a mobile device


In order to solve this problem, we needed to focus on the following goals for improvement:

  • Feature the images, especially on mobile devices
  • Reduce complexity of image selection criteria
  • Increase contrast ratio of text
  • Get rid of the colour overlay

The new design

Enhanced focus on imagery

The new hero banner design has made imagery an equal priority to the call to action. The image is just as supportive for context as the paragraph text.

The full colour overlay has been removed to allow the colours of the image to portray character.

We have increased the height of the banner. This increases the letter box view of the pattern allowing more of the image to be featured.

Along with the removal of the colour overlay, this reduces the complexity of image selection for the hero banner pattern.

Paragraph text on white background

We have increased the contrast ratio of the paragraph text by making it dark text on a white background.

We can now use images we weren’t able to before

Due to the complexity of image selection, we were restricted from ever using close ups of people. By increasing the height and removing the colour overlay, we can now showcase student life in St Andrews from the hero banner.

Optional buttons

As a bonus, we have provided options for banners without buttons. These banners can be used to effectively communicate a brief tagline.

Featured images on mobile devices

The mobile view of the hero banner pattern now prioritises the image of the banner. This allows the full image to be displayed, rather than a letterbox view, so none of the image is obscured on mobile.

Related topics

Share this story