Donation Page Redesign
Project Type: Website, Desktop & Mobile
Team: Orcasound UX Team
Project Brief: Designed a clean, user-friendly donation webpage for Orcasound to streamline the giving process. The goal was to make it easy for users to support both Orcasound and partner organizations within its network, increasing visibility and contributions through clear calls-to-action and intuitive navigation.
Project Overview: The project involved a comprehensive redesign of an existing webpage to address usability issues, improve visual appeal, and enhance overall user experience.
Project Outcome: Induction into the Orcasound Hacker Hall of Fame
Identifying the Problem
Creating an easy to read webpage so that users can easily donate to Orcasound's efforts, as well as to organizations within our network.
•Focus on Donation Call to Actions (CTAs)
•Bring partner organizations to the forefront
•Minimize the amount of copy
So how might we... build a digital experience that encourages users to donate to Orcasound and view our partner organizations?
•Focus on Donation Call to Actions (CTAs)
•Bring partner organizations to the forefront
•Minimize the amount of copy
So how might we... build a digital experience that encourages users to donate to Orcasound and view our partner organizations?
Establishing Project Outcomes
What are we trying to achieve?
Building a web app that encourages end-users to donate to Orcasound, as well as learning about the important work of our partners.
How do we plan to drive this?
1. Make “Donate/Support” CTAs
2. Show ways to donate to the organization
3. List our partners
4. Give brief description of our partners work
5. Allow users to discover more about our partners
2. Show ways to donate to the organization
3. List our partners
4. Give brief description of our partners work
5. Allow users to discover more about our partners
Iteration and Design Decisions
Design Decision #1
Modification of the navigation bar to allow for easier browsing.
Updating the nav bar to be more consistent with today’s best practices.
• “Support” CTA Button in menu
• Adding organization logo as a Home icon
• Shifting hamburger menu to the left
• “Support” CTA Button in menu
• Adding organization logo as a Home icon
• Shifting hamburger menu to the left
60% increase in users being able to find and access the Donate page.
Design Decision #2
Simplified CTAs
• Eliminating the “wall of text”
• Showcasing the ways to donate
• Include a Donate CTA to attract the end-user
• Eliminating the “wall of text”
• Showcasing the ways to donate
• Include a Donate CTA to attract the end-user
300% increase in users tapping the Donate CTAs
Design Decision #3
List of Partners
• Establishing typography hierarchy
• Including a summary of each organization
• Giving people a chance to visit the organization
• Establishing typography hierarchy
• Including a summary of each organization
• Giving people a chance to visit the organization
Takeaways
Simplified Process,
Increased Conversion
Increased Conversion
By streamlining the steps required to make a donation and creating a more intuitive user flow, users are more likely to complete the donation process. Removing unnecessary barriers, and providing clear calls-to-action can contribute to a more positive user experience and encourage more people to contribute to the cause.
Visual Storytelling Enhances Emotional Connections
By illustrating how contributions directly support the organization's mission, the redesigned page can foster a stronger emotional connection with visitors, motivating them to contribute and become long-term supporters.
