17 Nov 2023 10 min read

News

Toni

Toni

Senior UX/UI Designer, Ultimate

Chester Zoo mockup of blog donations page on an iMac.

Donations are crucial for charities. They play a vital role in supporting their mission and activities. Donations not only provide financial support, they also allow charities to reach more people and make a greater impact in their communities and globally. A key problem many of our charity clients come to Ultimate with is how to increase donations through UX.

Charities are a key sector for Ultimate, that is in our DNA. We have worked for many non-profit organisations, such as Lymphoma Action, Royal Collection Trust, The Alnwick Gardens, and Chester Zoo.

From engaging creative campaigns to usability testing or enhancing UX/UI, we innovate and improve solutions that empower charities to maximize their impact through donations.

This blog will explore a key project for one of our charity clients Chester Zoo, detailing how we were able to make an impact and increase donations through the power of UX.

 

Ticketing system for Chester Zoo

As a not for profit, Chester Zoo relies on donations to continue its mission to prevent extinction. Visitors can donate in multiple ways through their website. Chester Zoo encountered an issue when moving to a new ticketing system, whereby donations from the bookings dropped significantly. They tried to rectify this by reverting back to the original shop, however donations remained low.

Chester Zoo commissioned Ultimate to redesign a new ticketing system to increase donations across the booking process. Our first step was to understand why donations had dropped and how to resolve this.

 

 

UX REVIEW

In-depth UX analysis of the booking process

Competitor Research

We researched and analysed the user experiences of booking tickets provided by major zoos in the UK, as well as other non-profit organisations, such as museums and art galleries. The goal was to gain insights into what was working well for Chester Zoo’s competitors, as well as to identify areas for improvement.

The primary aspect of the competitor research was to analyse the conversion path of users adding donations and gift aid along with a ticket purchase. We found that London Zoo and the National History Museum used a table to incorporate the 10% donation into the individual ticket price, whereas the Tate Art Galleries added the donation to the total sum.

Other aspects that we studied during the competitor research included the interaction design of buttons, the aesthetics and the content strategy.

Screenshot of research findings from the UX of the donations journey on London Zoo's website. Screenshot of research findings from the UX of the donations journey on Tate Art's website.

Screenshot of research findings from the UX of the donations journey on National History Museum's website.

Live Data Analysis

We ran real-time monitoring and heatmap analysis to understand the user interactions on specific parts of key pages in the ticket booking journey. This live data analysis provided us with immediate insights and helped to guide improvements. Some initial insights included noticing that users didn’t spend much time reading the copy explaining the donations and that the CTAs did not appear to be clear enough as gift aid was not being added, even when the copy was stating that this was a free addition.

 

Usability testing

We also conducted usability testing to gather more insights and identify usability issues, in order to guide design improvements. Whilst the users were completing their single journey task of booking tickets, we were asking about their thought process around donations and gift aid.

The main reason that came out of this usability testing for not donating was cost. Users wanted to know how their money would be used before donating, however they would skim read or wouldn’t read the supporting information. They were confused with the gift aid and didn’t realise a donation had to be made in order to qualify for it.

Screenshot of research findings from the usability testing of the donations journey on Chester Zoo's website.

UX/UI DESIGN

Designing the new booking experience

User flows and wireframes

User Flows are the next stage to ensure we understand all aspects of the booking journey, and we cover all the insights gathered during the competitor research, live data analysis and usability testing. At this stage in the project with Chester Zoo, we defined the sequence of actions through the booking process. This was in order to identify the key interactions where the decision about donations and gift aid had to be made, and overall improve the user experience to see how we could increase donations through UX.

We created a list of actionable recommendations for design improvement based on all of our findings:

  • Use compelling language and clear CTA’s to remind users that CZ is a charity and that their donations have a huge impact.
  • Link to more information about how their donations are used.
  • Use more visuals like imagery and icons to help create a connection to the cause.
  • Visually minimise the cost increase included in the ticket price (e.g. London Zoo) rather than showing a lump sum (e.g. Tate).
  • Reminder to ask users to reconsider their choice (without frustration).
  • Create the ability to add a donation at the later stages of the journey.
  • Concise copy explaining that gift aid is free but has a big impact.
  • Clear explanation of taxpayer terms for gift aid

We also added more checkout features based on these findings:

  • More visible guest checkout
  • Alternative logins (Google and Facebook)
  • Alternative payment options – Gift cards, Paypal, Apple Pay, Google Pay
  • Auto-fill fields
  • Use delivery address as billing address –  default or selectable.

Taking into consideration the user flows and all of the above recommendations, we designed low-fidelity wireframes to visualise the skeletal framework of the full booking process.

The first low-fidelity wireframes focus on the overall structure, layout and functionality. By excluding detailed visual elements such as colours and images, we worked on the functional aspects and user interactions, such as the CTA’s to donate with gift aid and improve the functionality of the final checkout.

The wireframes evolved to mid-fidelity to include more stylistic elements such as colours to highlight buttons and CTA, and therefore improve the click rate. They also contained more refined content, so here we also replaced the placeholder text with a more compelling copy to explain the importance of the donations and gift aid.

Finally, we produce the high-fidelity wireframes or final designs, with more details on visual elements, interactions, and the full visual content, such as images and graphics to help to create a connection with the charity mission of the zoo.

 

User flow chart of the ticket purchase journey for Chester Zoo's booking system. Wireframe designs for Chester Zoo's booking system.

Prototyping

Prototypes are interactive models created before the actual development phase. We created two prototypes that emulate key functionalities and interactions to provide a realistic UX in both mobile and desktop for client sign-off.

We set up product testing by sharing these prototypes with the client and team members at Ultimate. The objective was to complete all the different possible scenarios of the ticket booking system, interacting with the navigation, button clicks and other functionalities.

This early testing allowed us to gather feedback to identify potential issues and preferences during the design process, reducing the risk of costly changes during later stages of development.

Instead of me talking about how the prototype went, why don’t you try it? Click here to test the mobile prototype.

Prototype designs for Chester Zoo's improved UX booking system

DEVELOPMENT

Building the new booking system.

Website Development

The high-fidelity designs and prototypes provided the developers with all the necessary information and assets they needed to accurately and effectively build the booking system, that hoped to bring together everything learnt during the research phase to increase donations through UX. In this final stage, our development team created both the front-end (what users see) UI components and back-end (server-side logic and databases) functionality.

We ensure that all the websites and digital experiences we create are accessible, work well and look good on modern devices and screen sizes.

 

System Integration

For this ticketing system, we also had to add extra functionality with third-party services including integration with the Access Gamma API. This modular ticketing system can provide venues, visitor attractions, museums and theme parks with a complete ticketing and booking management system to handle admissions and ticketing.

Thanks to this third-party integration we built the foundation for a ticketing system that had the ability to scale and grow. Check out how we adapted another booking system to The Alnwick Gardens and its new theme park Lilidorei.

Newsletter