Whiteknights Trees website

  • Client: University of Reading
  • Project duration: 2025
  • View website
Whiteknights Trees website

Project requirements

The University of Reading approached us to design and build a new version of the existing Whiteknights Trees website. The original website had been running for a number of years and contained a large catalogue of the individual trees on the University campus.

The website was not accessible on mobile devices, which made it difficult to walk around campus and try and identify a tree you are looking at.

The catalogue of trees was managed via a bespoke system, which was not easy to update without certain technical skills. By moving to a Content Management System, the catalogue could be maintained by a wider range of people.

What we did

We started by spending time udnerstanding how the existing website data was organised, and what information was held for an individual tree. These investigations allowed us to plan out a new website styructure, that would be easier for the user to navigate.

Luckily all the trees had geolocation data, which was essential to allow us to plot them on a map, and also use location services on a mobile device. We built some geolocation protoypes and tested them on our mobile devices, to show 'trees near me', a key requirement of the project brief.

We did not need to use the University of Reading brand guidelines for this project, and could develop our own designs. We delivered some design proposals of key screens to the client, using a Figma clickable prototype. This allowed all stakeholders to understand how the website would work in practice.

For the CMS we went with WordPress, and built a bespoke responsive theme from the agreed design visuals. We also built a custom importer to take the original dataset, and import it into WordPress as custom posts. This involved scripting via the WordPress CLI.

Example 1 of the new Whiteknights Trees website
Tree species page
Example 2 of the new Whiteknights Trees website
Individual tree page

Outcomes

Using the new responsive version of the website, with the geo-location tools we built, allows users to easily 'find trees near me'. It brings the wonderful catalogue of trees on campus, into the real world.

The management of the tree catalogue is now easier, and also allows the grounds team to update records if needed (i.e. if a tree has fallen over or needed to be removed).

New Mobile Version
Mobile view of tree species page
New Mobile Version
Mobile view of individual tree page

See more of our responsive design projects or explore other work we have done.