Bristol Zoo Gardens and Wild Place Project website improvements
UX work on Bristol Zoological Society's web presence
- Role: designer
- Stakeholder: Bristol Zoological Society
- Sectors: charity (conservation and education)
- Deliverables: accessibility audit and recommendations, qualitative user survey, website prototype (WordPress), updated webpage content and design
The internal Digital Team carried out extensive UX and accessibility work to improve the content and structure of Bristol Zoological Society's two attraction websites.
This work was part of a larger transformation project to prepare for the rebrand and merger of the Society's separate web- and microsites for Bristol Zoo Gardens and Wild Place Project.
- Accessibility
- Content design
- HTML & CSS
- Information architecture
- Prototyping
- Web design
- WordPress
The UX work spanned a variety of projects and ran for about two years. It included an accessibility audit, user interviews, content design and web design work.
I was part of a small internal digital team, and during the course of the project my responsibilities were to lead an accessibility audit, to review and improve the content on high-traffic webpages, to collaboratively plan and run user surveys, and to build a prototype based on the survey findings. Parallel to our internal work we also collaborated as a team with an external agency on a larger UX review and a complex CMS migration.
Accessibility audit of Bristol Zoo Gardens website
I initiated and carried out an accessibility audit of the 5x highest-traffic pages of the Bristol Zoo Gardens website.
Using the WCAG 2.1 standards and a variety of browser tools I reviewed the pages and divided the findings into high, mid and low priorities. I then presented the findings to the Commercial Director and was able to work with our external agency on implementing improvements within budget.
Following on I also prepared and held a presentation for the internal team to increase awareness, as a lot of accessibility issues are related to content, such as descriptive links and image alt text.
Bristol Zoo Gardens animal pages
I initiated and carried out the review and improvement of both content and structure of the animal section on the Bristol Zoo Gardens website.
This project started due to increasing internal dissatisfaction with this particular section. Staff complained about not being able to find content and that information was missing or outdated. On top of those issues the navigation was clunky with space wasted and unnecessary clicks needed in return for a very small amount of valuable content. Images were repeated and appeared squashed or stretched due to a confusingly high number of container sizes.
I started with an internal staff survey and talked with animal keepers and Heads of Sections to gain better understanding of their perspective as specialists. Those findings I then combined in a few wireframe examples and pitched the project to the Head of Marketing, defining impact and effort, content changes (in-house) and structural changes (external agency).
The main project goal was to make the content valuable and findable as well as more evergreen to take pressure off the small web team.
The prototype merged 4 subpages into one page, turning links into anchors and adding information on where each animal can be found on-site.
Once I received the go-ahead I started working with each animal section and the education team to update the content, adding a world map and the standardised IUCN conservation status bar to each species. When the new template was set up and tested on a staging server, I populated the pages with the new content and the improved section was put live.
User testing of Wild Place Project website
As a small digital team of three we planned and carried out face-to-face user testing sessions of the Wild Place project website.
We already knew from quantitative user surveys that users were struggling to find certain information online, and that navigation and structure of the site could be improved.
In order to understand users' main pain points we prepared a task list that focussed on the booking journey and on planning a visit. As we held the interviews with visitors on-site, we knew they had already bought tickets and travelled to the zoo, so we started each interview with a more general and friendly warm-up chat, asking whether they used the website and, if so, on what type of device.
We then asked them to take us through their booking journey and to talk out loud about their experience. We followed this up with a couple of small tasks related to planning a visit, such as finding opening hours and location/travel details for different transport types.
The findings from these interviews confirmed that there were issues with some parts of the website's navigation (ambiguous) and the structure (cluttered).
Based on the feedback gained I designed an amended hierarchy with categories and menu labels for a remote tree testing session. Using the same questions from the original interviews we tested whether the new structure and labelling had helped to improved the user's booking journey. Although we could not compare the outcomes one-to-one due to the methods being so different, we did see a clear improvement as users tended to find the necessary information much quicker.
Prototype of interim Wild Place Project website (WordPress)
Based on the outcomes of the user interviews and tree testing I built a fast iteration of the website using WordPress.
As we knew that the site would be running as an interim until the rebrand, the WordPress iteration gave us the option to test the new navigation, structure and accessibility. We also used the opportunity to improve and restructure the content on the animal and horticulture pages to bring the content more in-line with the Bristol Zoo website.