School Website Homepage Design – our top 3 picks

Over the past 19 years, we’ve been fortunate enough to work with hundreds of schools to energise, refresh and sometimes completely revolutionise their school website homepage design.

As 2019 is now well and truly underway, we thought it would be a great opportunity to share some of the interesting and challenging projects we’ve worked on recently, in case you’re considering sprucing up your own school website this year.

Project One

School Website: St George’s Church of England Foundation School

http://www.stgeorges-school.org.uk/

Launched: March 2018

The Brief:

St George’s Church of England Foundation School tasked us with creating a website homepage that would present a far stronger visual appeal to visitors. Their previous website was quite busy and cluttered, with a need for better quality images and a clear user journey. They challenged Cleverbox to find a solution!

 

Previous School Website Homepage:

St George's CoE Foundation school website

 

NEW School Website Homepage:

St George's CoE Foundation school

Key Features:

Interactive homepage header

St George's CoE Foundation school website homepage design

The school’s vision and values appear interactively as soon as you land on the homepage. Hovering over one of these values with your mouse arrow illuminates the text, making it appear temptingly clickable. On click of the text, you’re directed to more information about that value and what it means to pupils.

This is such a great way of encouraging parents to engage with the school and get to know more about them, with a simple click of the mouse or a tap of the finger.

Clean and simple design

St George's CoE Foundation school website homepage design

We approached the design of the school website much like a virtual journey around the school. It offers a clear and considered path around the key bits of information that a potential parent or new member of staff needs to know. At the same time, the site is designed with existing parents in mind, giving them updates and details in a clear, accessible format.

Best of all, this simple and uncluttered design works extremely well when the site is viewed on a mobile phone. The sections adapt seamlessly to a mobile device, so none of the content is lost – in fact, it’s optimised.

Sticky Footer with key points of interest

St George's CoE Foundation school website homepage design sticky footer

Another highly effective feature of the homepage is the ‘sticky footer’. This includes the four key areas of the school; ‘Primary’ ‘Secondary’ ‘Sixth Form’ and ‘Community life’ that remain visible as you scroll down the homepage. The sticky footer makes it so easy to jump into the relevant area at any time, giving context and value to a prospective parent. Best of all, it offers a more personalised experience, as a parent need only view the section that is relevant to them based on their child’s age and interests.

The Result:

  • Over 30,000 page views on the homepage per month
  • Over 5 minutes spent on the homepage per visit

We strived to deliver a school website homepage design that felt organised and functional, allowing pupils and parents to navigate the website with ease. For the homepage we used visually striking photography of current students alongside the school’s vision and values of ‘hope, forgiveness, compassion, friendship, wisdom’ to ensure parents are able to experience and understand the school’s ethos as soon as they land on the website.

 

Project Two:

School Website: St Bernard’s Catholic School

http://www.st-bernards.slough.sch.uk/

Launched: September 2018

The Brief:

St Bernard’s Catholic Grammar School set us the challenge of portraying their faith values through a re-designed website. Through art-directed photography, simple section headings and a clever notification tool, we designed a homepage that conveys the essential information that pupils, parents and staff need to know. The rest of the website presents a clear and considered navigation menu, with quick links to popular sections.

 

Previous School Website Homepage:

St Bernard's Catholic Grammar School old school website homepage design

 

NEW School Website Homepage:

St Bernard's Catholic Grammar School website homepage design

Key Features:

Interactive image gallery, managed from within the CMS

St Bernard's Catholic Grammar School website homepage design carousel

So simple but incredibly effective. That’s the best way we can describe the interactive image gallery on the homepage.

The gallery rotates images automatically, so as soon as a parent lands on the homepage, the website comes to life right in front of their eyes. And yet, sitting behind this richly visual experience, is a very simple set up in the content management system. CMS users can add as many images as they like and tick up to 10 that they’d like to appear in the gallery. The technology does the rest.

Pop up notifications

St Bernard's Catholic Grammar School website homepage design notification

For existing parents, the school needed a platform to make important announcements about dates, pupil activities and time sensitive information. The pop-up notification is easy to set in the CMS and appears prominently on the homepage. Once a parent has read the message, they can minimise the pop-up so it doesn’t interfere with their experience on the homepage. This is such a handy tool for making announcements and getting the message out quickly.

Clear, visual and useful

St Bernard's Catholic Grammar School website homepage design clear and visual

The main objective of the homepage, other than looking good, is to provide useful information quickly. Parents, pupils, prospective staff and existing teachers are all offered relevant information, without needing to click through multiple layers of navigation to find it. With a clear and simple set of headings at the top of the homepage, anyone can find the details they need, with one simple click or tap.

The Result:

Through professional art-directed photography and a simple, focused approach to the school website homepage design, we worked closely with the team at St Bernard’s to deliver a website that keeps the school’s audience front of mind.  The website homepage is striking, presenting a clean and functional appearance that immediately captures the user’s attention as they land on the page. The website is fully responsive and caters to all visitors. It optimises beautifully when viewed on mobile phones, desktops and tablets. The notification tab on the website homepage is a simple and powerful tool to get messages out quickly. Not only is the feature attention grabbing and generates excellent interaction, but it allows the school an excellent communication channel with pupils and parents. Sometimes simplicity is the most powerful tool.

Project Three:

School Website: University Schools Trust

https://www.ust.london/

Launched: September 2018

The Brief:

As a relatively new schools Trust, it was extremely important to UST that their Trust website reflected three key elements:

  • Uniqueness as a Trust
  • Maturity and strength of their brand
  • Unity, with one website platform for all of their schools

 

The NEW Trust website:

University Schools Trust website homepage design

Key features

School website homepage design wow factor:

University Schools Trust website homepage design

At Cleverbox, we have worked on a LOT of school websites. But the UST website really pushed us to deliver something completely new and different. The conceptual homepage is a feast for the eyes, with interactive features, illuminating buttons, bold colours and clear links to all the schools within the UST network.

Less is more

University Schools Trust website homepage design twitter feed

It takes a great deal of restraint to avoid adding reams and reams of content to your homepage. The UST homepage is proof that sticking to essential information, with prominent signposts to other relevant sections of the website, can be very effective.

Consistent design for member schools

University Schools Trust website homepage design member schools

The key to establishing a strong brand for a trust is to ensure there is a consistent feel across the trust network and its member schools. The UST website achieves this by presenting a unified design on the homepage of the trust website and member academy sites. The user experience across member school websites is also consistent, but critically the unique identity of each school is communicated and celebrated on each site.

The Result:

  • A very low drop out rate from the homepage, just 21%
  • Over 4 pages viewed per visit to the website

UST and Cleverbox are now working together to add all of their schools to the Trust website platform. This will make it easy to manage updates from an admin perspective. It will also ensure that all member schools present a consistent look and feel across their websites, which is so critical to continue strengthening the UST brand.

 

If you are interested in working with Cleverbox to develop an innovative and responsive school website or if you’d like to hear about new ways of refreshing your school website homepage design, email our team today at [email protected], call us on 0208 466 7222 or Tweet us @cleverbox.