All PROJECTS
UI/UX, Branding, Webflow Development
2021
Child holing a phone watching a maths lesson

Danegrove

Danegrove Primary School Website

The Brief

The old Danegrove website was dated, difficult to navigate, and extremely cluttered. We were tasked with the complete revamp of the website, starting from the ground up.

The Solution

The current website was used by teachers, pupils, governors and parents, so we wanted to completely restructure and organise the content so that information is easy to locate and navigate for all of its users.

Deliverables

A dynamic scalable website, where multiple members of staff had log-in access and were able to update and maintain the site without the need of a developer.

White mack-book pro and iPhone showing the Danegrove Primary School website.

Workflow

//1

Site Map

With so much content, it was critical to figure out what was relevant and what wasn't. We then categorised this in sections that would best fit our user groups and began to build the new architecture of the site.

//2

Wireframing

stemming from the site-map, we started wire-framing some of these pages to get a better understanding of exactly what was going to sit on each page.

//3

Design

We worked up four potential design options and discussed thoroughly what worked best for Danegrove. This included colour, photography, typography and graphic explorations. Once happy with a style, we went and created a full final design before moving into development.

//4

Development

Using Webflow, we were able to address all of the project deliverables without compromising any of the design.

Besixth business cards falling through the air.
School children waving at the camera standing in front of a climbing equiptment.
School boys playing in the school playground
School boys in primary school playing in the playground
School girls playing in the playground looking at the camera
School boys in PE lesson jumping in air on the astro turf
Children at school holding their lunchboxes
School girl looking at the camera

Photoshoot

It was a priority to get quality photography for the project, which is why we organised for a professional photographer to spend the day at the school, going into classrooms and lessons, encapsulating what it really means to be a pupil at the school.

A white desktop, mac-book pro, iPad and iPhone sowing different pages of the Danegrove Primary School website

UI

Design

We built out a colour palette around the schools core yellow and blue colours. This paired with the playful graphics and bespoke photography created a fun and vibrant feel, suitable for all it's users. Due to the vast amount of content on the site, we tried to keep things as modular as possible, enabling quick edits and familiarities between design components.

Requirements

A school website is at the heart of everything it does and a valuable tool for getting information out there quickly. This is why we focused on ensuring the website was responsive, quick and extremely easy to navigate, especially on mobile devices.

UI designs for Danegrove Primary SchoolUI designs for Danegrove Primary SchoolUI designs for Danegrove Primary SchoolUI designs for Danegrove Primary School landing page
UI designs for Danegrove Primary School homepage

Site Management

We spent a lot of time ensuring that once complete, the website could be predominantly maintained and managed by the school. To smooth this process out, we made a 10 part video series, explaining in detail how to get the most out of the new website.

CMS

We used Webflow's powerful CMS system to create several dynamic pages that allowed staff to quickly and easily make changes to the site. Those dynamic content included; newsletter uploads, policy uploads, members of staff, maths videos, blogs, announcement boards and homework sheet uploads.

Danegrove primary school website homepage displayed on a white iPhoneDanegrove primary school website homepage navigation displayed on a white iPhoneDanegrove primary school website homepage section on a white iPhoneDanegrove primary school website displayed on a white iPhoneDanegrove primary school website 'meet our staff' page displayed on a white iPhoneDanegrove primary school website 'downlaod' page displayed on a white iPhoneDanegrove primary school website navigation menu UI displayed on a white iPhoneDanegrove primary school website 'FAQ' page displayed on a white iPhone.Danegrove primary school website 'Maths Hub' page displayed on a white iPhone.Danegrove primary school website 'Contact' page displayed on a white iPhone.Danegrove primary school website 'About me Navigation UI'  page displayed on a white iPhone.Danegrove primary school website 'Blog' page displayed on a white iPhone.

Mobile Accessibility

We were aware that not every child had access to a laptop, which was why we developing the 'hub' year group pages. Here, pupils can download worksheets and homework, straight to a smartphone device. This proved to be a vital lifeline as pupils have undertaken home learning for the past year.

Danegrove primary school website Homepage displayed on a white mac-book pro.Danegrove primary school website Homepage grid displayed on a white mac-book pro.Danegrove primary school website 'about' pages displayed on a white mac-book pro.Danegrove primary school website 'FAQ's' page displayed on a white mac-book pro.Danegrove primary school website 'contact' page displayed on a white mac-book pro.Danegrove primary school website 'Match Hub' page displayed on a white mac-book pro.Danegrove primary school website 'Match Hub video' page displayed on a white mac-book pro.Danegrove primary school website 'Year group hub video' page displayed on a white mac-book pro.Danegrove primary school website homepage section displayed on a white mac-book pro.Danegrove primary school website 'Policy Download' page displayed on a white mac-book pro.Danegrove primary school website 'Meet our Staff' page displayed on a white mac-book pro.Danegrove primary school website 'FAQ's' page displayed on a white mac-book pro.

Maths Hub

Danegrove has been making interactive video content for pupils to enjoy over the past year, so it seemed fitting to collate all of this and create the 'Maths Hub'. There are over 50 different videos, covering an assortment of different topics and languages, and is without a doubt one of the most popular pages of the website. As with everything, all videos can be added and edited through the Webflow CMS system.

Multiple mobile phones on a green background displaying various pages on the Danegrove Primary School Website.
"Rob was at all times polite, helpful, resourceful and engaging. He was able to provide his own artistic expertise and remains available for any additional resources needed."
Deborah Metcalf
HEADTEACHER
View Website

Get in Touch

Got a new project or business venture in mind? Send us an email today and let's bring your idea to life!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.