Brick River (BR) Donation Product Design
Project: Brick River Technologies Donation Product Design & Front-End Development
Description: As a dedicated team member at Brick River Technologies, I played a pivotal role in the development of BR Donations, a cutting-edge donation management system designed to revolutionize the way nonprofits engage with donors and manage contributions. This project involved extensive collaboration, numerous early mornings, and late nights to bring a powerful, user-friendly tool to life that integrates seamlessly with existing nonprofit databases.
Software: Figma, Visual Studio, Git, Google Analytics, Stripe API, HTML, CSS, Javascript
Design Question: How can we create an intuitive donation experience that maximizes both one-time and recurring contributions, while ensuring simplicity for users of all technical skill levels?
User Personas
Design Requirements
From research analysis and the user personas, 5 design requirements were identified:
Engaging and Impactful Storytelling
Design: Use impactful community images and feature success stories for each donation amount.
Reason: Donors are inspired by seeing real-world results and connecting emotionally with the cause.
Easy and Accessible Donation Process
Design: Implement a simple form with multiple payment options like cards, Stripe, Google, and Apple Pay.
Reason: An easy process with diverse payment methods encourages more contributions.
Visualize Donation Impact
Design: Use infographics and progress bars to show donation use and fundraising goals.
Reason: Donors are more likely to contribute when they can see the impact of their donations.
Recurring Donations and Management
Design Element: Provide easy setup for recurring donations.
Reason: Recurring donations ensure steady funds and appeal to long-term supporters.
Trust and Credibility Features
Design: Include testimonials, contributor comments, and relevant news or blog posts.
Reason: Building trust encourages donations by showing that contributions make a real difference.
Donation Page Figma Designs
Everything from the donation page elements, form error messages, to the confirmation page.
Donation Page Figma Design
Donation Form Prototype
Below is the prototype for a streamlined, user-friendly donation form. Designed with the least number of form fields possible and labels placed above the input fields in order to maximize donor engagement.
Development
With the designs finalized, I transitioned to the Front-End Development phase. Collaborating closely with a team of developers, we utilized Git for version control, ensuring a streamlined and organized workflow. I implemented the designs using Tailwind CSS for styling and JavaScript for functionality, bringing the prototype to life with interactive, responsive elements. The development process spanned several weeks, focusing on refining the user experience to create a polished and intuitive interface for our nonprofit clients.
Key Technologies Used:
Tailwind CSS: Enabled rapid UI development with a utility-first approach, ensuring a consistent and responsive design.
JavaScript: Facilitated dynamic functionality and interactivity, enhancing user engagement and form usability.
Git: Used for source code management and collaboration, ensuring version control and smooth integration of code changes.
Challenge
During the development phase, we encountered a significant challenge. As we progressed, the project scope expanded to include additional custom fields in the donation form, as well as mandatory fields required for the new payment processing system. This extension led to an overly long form that no longer fit within the initial layout designed in the prototype, causing usability and aesthetic issues.
Solution
To address this challenge, I undertook a redesign of the form layout to better accommodate the expanded content. Here’s how I resolved the issue:
Column-Based Layout Redesign:
Revised Structure: I restructured the page layout so the form occupies its own dedicated column, providing more space and reducing the visual clutter caused by overlapping content.
Enhanced Readability: This adjustment improved the form's readability and usability, ensuring users could easily navigate and complete the form without confusion.
Form Step Segmentation:
Added a Fourth Step: Introduced a fourth step to break payment processing and fees into separate, digestible sections, making the form more user-friendly and manageable.
Streamlined Experience: This step-by-step approach avoids overwhelming users, enhancing satisfaction by guiding them through the process smoothly.
The Final Product
A donation system that offers a seamless and thoughtfully designed user experience from start to finish. Whether managing donations through the centralized donation management center, crafting custom donation pages, or sending personalized confirmation emails, every aspect of the system is optimized to meet the needs of nonprofits and their donors.
The donation system allows users to:
Tell the story of their cause in a clean, easy-to-build webpage.
Allow donors to donate by "cause" (funds, churches, camps, etc.).
Allow donors to make recurring donations (monthly, yearly, weekly).
Seamlessly accept donations on their website via Stripe, Apple or Google Pay, and ACH.
Connect multiple Stripe accounts, so you can send money directly to the right account.
Easily communicate, cultivate and track donors in your database.
Receive more donations than before.
Applications of the Donation System:
Offering an online giving option for nonprofits to accept tithes and offerings. Connect their Stripe account, and send the money straight to them.
One-time giving opportunities, like #GivingTuesday or after a disaster.
Ongoing campaigns, like regular donations to camping ministries, UMCOR, Special Olympics, etc.
Key Features:
Dedicated Stripe Connections: Each cause can have its own Stripe account, allowing for precise and effective fund management.
Diverse Payment Options: Donors can choose from a variety of payment methods, including credit cards, Google Pay, Apple Pay, and ACH.
Hub Collections: Organize related donation pages into hubs, making it easy to manage and link to multiple causes.
Direct Links: Easily share direct links to hubs or specific fundraising pages, suitable for websites, emails, or printed materials.
Comprehensive Reporting: Access powerful reporting tools to generate detailed insights into donation activities and trends.
Powerful Reporting
Conclusion
The BR Donations system is more than just a donation tool; it’s a comprehensive solution that empowers nonprofits to tell their stories, engage donors, and streamline the entire donation process. By combining robust functionality with an intuitive user interface, we have created a platform that not only meets but exceeds the expectations of nonprofit professionals, helping them to achieve their mission more effectively.