Revamping the FOUR PAWS Donation Page

Project Background

Whats the Problem?

Duration: 4 weeks

Budget: $10,000

The existing donation page for FOUR PAWS was functional but lacked certain features that would enhance the user experience and improve donation efficiency.

The project aimed to revamp this page by focusing on visual cohesion, responsive design, streamlined navigation, accessibility, multi-step forms, and campaign management tools.

The donation page serves its fundamental purpose but falls short in several critical areas. The existing design appears disjointed and somewhat suspicious to potential donors, creating a significant deterrent for contributions.

This inefficiency in the design undermines the organisation's noble cause by impeding the donation process.

without donations - the organisation can not achieve its purpose of the protection of animals

The Aim

Establishing Visual Cohesion


A visually cohesive interface that enhances donor trust and provides a seamless transition between pages.

Streamlining Navigation


Reduced friction points, leading to a smoother donation process and potentially higher conversion rates.

Upgrading Campaign Management Tools

Empowered the team to manage multiple campaigns efficiently and effectively.

Introducing Multi-Step Forms


Reduced form abandonment rates and increased donor retention.


Technical Limitations:

Integrating the new design system with existing infrastructure posed some technical challenges.

User Adaptation:

Ensuring that long-time donors adapt comfortably to the new design.

Accessibility Compliance:

Meeting all WCAG 2.1 AA standards required meticulous attention to detail.

The overhaul of the FOUR PAWS donation page demonstrates the impact of user-centered design in non-profit organizations. By focusing on visual cohesion, responsive design, streamlined navigation, accessibility, multi-step forms, and campaign management tools, FOUR PAWS has set a new standard for online donation experiences.


Enhancing Accessibility


An accessible website that accommodates users with various needs, ensuring inclusivity.

Implementing Responsive Design


Increased accessibility, leading to a wider reach of potential donors.








The integration of the new donation page design with back-end third-party payment gateway APIs is a critical aspect of the redesign project. Here's how this integration will be managed to ensure a seamless, secure, and efficient donation process:

Secure Data Handling

Encryption and Compliance:

All sensitive data, like credit card information, will be encrypted and handled according to the Payment Card Industry Data Security Standard (PCI DSS). The design will ensure that sensitive data is directly submitted to the payment gateway APIs, reducing the risk of data breaches.


Wherever possible, the system will use tokenisation. This process involves substituting sensitive data with non-sensitive equivalents (tokens) that have no exploitable value. This reduces the risk of sensitive data exposure.

User Experience and Feedback Real-Time Validation:

The design will include real-time validation of input fields. This feature, integrated with the API, will alert users to errors before form submission, improving the overall user experience and reducing failed transactions.

Transaction Status Feedback:

Post-submission, the design will interact with the payment API to receive transaction statuses (success, failure, pending) and display appropriate messages to the user. This feedback is crucial for a transparent and reassuring donation process.

Understanding API Specifications:

Before any design or development work, it's essential to thoroughly understand the API documentation provided by the third-party payment gateways. This includes understanding the API endpoints, required parameters, authentication methods, and data formats.

Seamless Design Integration:

The new design will be developed with placeholders for API integration. This means creating user interface elements like form fields, buttons, and confirmation messages that can dynamically interact with the payment gateway APIs.





Accessibility Design

User Testing

Implementation and Integration

Iteration and Feedback

The Process

User Research

Usability Analysis

Information Architecture

User Flow Mapping

Visual Design

My Role UX / UI / Service Design / Business Analysts

Location: Sydney, Australia

Let’s Connect.