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
Outcome:
A visually cohesive interface that enhances donor trust and provides a seamless transition between pages.
Streamlining Navigation
Outcome:
Reduced friction points, leading to a smoother donation process and potentially higher conversion rates.
Upgrading Campaign Management Tools
Outcome:
Empowered the team to manage multiple campaigns efficiently and effectively.
Introducing Multi-Step Forms
Outcome:
Reduced form abandonment rates and increased donor retention.
Challenges
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.
Conclusion
Enhancing Accessibility
Outcome:
An accessible website that accommodates users with various needs, ensuring inclusivity.
Implementing Responsive Design
Outcome:
Increased accessibility, leading to a wider reach of potential donors.
Existing
Design
Final
Design
API
Integration
Strategy
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.
Tokenisation:
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.
Deliver
Define
Discover
Design
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
