The British Trust for Ornithology (BTO) is a UK charity focusing on the understanding of birds and why populations are changing. It harnesses the skills and passions of thousands of volunteers through bird surveys and schemes.
BTO needed a partner to reorganise and redesign its ageing website. The old site had become outdated in its design look and feel, needed to better illustrate the aims of the organisation and offered a poor experience to mobile users.
“Headscape demonstrated the most considered approach as how to get the most value out of our budget, and were fully capable of integrating meaningfully with an internal process that had already begun. We valued their pragmatic approach to replacing our complex old site with something that would better serve BTO’s aims and the needs of our supporters. They did a great job at this and went on to do a great job of designing a stunning new site that will provide fantastic user experiences for our diverse audiences. Headscape then developed beautifully crafted front-end code, delivered as a library of patterns ready for us to integrate with our Drupal website. Throughout the project, Headscape’s team has been accommodating, insightful and creative and I’ve been particularly impressed by their attention to detail. The process felt very collaborative and grounded. Headscape offer reassuring expertise that we wouldn’t hesitate to recommend.”
William Skellorn, BTO.
Creating a representative design
One of the key challenges we faced involved translating BTO’s brand and character online. The design needed to be big and bold and provide differentiation between important content categories such as appeals, publications, blog etc.
We led sessions in the project kick-off workshop where the focus was on collaboratively creating mood boards that represented different aspects of the BTO brand.
After the workshops, we continued the process by providing further look and feel ideas in the form of “mood pages” specifically targeting main landing page components.
Structure and IA
Reshaping the site structure and information architecture was another major facet of the project scope.
We developed an extensive representation of the new site in the form of a wireframe prototype.
The prototype was used to carry out usability testing and the iteration of structure and functionality ideas.
Pattern library development
We needed to create front-end code for the new design to be integrated into Drupal by BTO’s development team.
We decided that the most useful deliverable would be a pattern library documenting different design components and providing examples of how they should be used.
We elected to use the Fractal system to deliver the pattern library. Fractal follows “Atomic Design” principles where the simplest, fundamental elements are at the Atom level, basic patterns comprised of a few atoms at the Molecule level, and more complex components made up of collections of smaller elements at the Organism level.
Pattern libraries also include example page types to demonstrate how all of the elements work together.
