Donation Ux improvements
PROJECT TYPE
UX Design
MY ROLES
Art Director, Research, UX Designer
TEAM ROLES
-
Aubree Berg: UX Designer, Research, Prototyping
Collaborating Teams
-
Digital Marketing
-
Copy
Tools
-
Sketch
-
Photoshop
-
InVision
-
Flinto
BACKGROUND
Our Daily Bread Ministries is a non-profit supported primarily through individual donors. The organization does not solicit donations but simply provides the opportunity for its audience to offer financial support.
As the organization's digital presence has developed, it has been growing a digital-only segment of its audience. The only way this segment will have the opportunity to support the organization is through online giving. While the website had a traditional "Donate" button in the header, the overall experience needed to be updated around the user.
A very small team of us gathered for 2 days in a research and development style setting to focus on this issue.
The original donation experience. This contained disjointed content and messaging. It also put the impact, FAQs, and security icons on page 2.
GOALS
-
Reduce bounce rates and donation abandonment.
-
Increase trust and confidence for secure transactions.
-
Use donating as an opportunity to educate and build empathy.
RESEARCH
Our team was lead by the Senior Director of Digital Marketing. As a group we were assigned some pre-work research to complete so that we could come in to this 2-day session ready to discuss and act decisively.
In addition to the research and reading assignments, we all participated in donating through a number of other non-profit organizations while documenting the experience. We then all went through the Our Daily Bread Ministries donation experience as well.
After gathering our notes and presenting our research findings, we set to work discussing the changes that could be made to the site design and user journey. No ideas were immediately thrown out. Our goal was to get as many thoughts on the board as possible and then begin to evaluate and prioritize.
The discussion and brainstorming was a fantastic experience. We had all the right people in the room to answer strategic questions as well as speak to all the necessary areas of expertise for an improved design and communication experience.
DESIGN
During the session, initial wireframes were drawn out on whiteboards for quick demonstration and easy alterations. Once we had agreed upon wireframes, we identified all areas of copy that would need to be generated. While Aubree Berg and I began collaborating on low-fidelity designs, other members of the group started crafting the copy.
Having everyone in the room together made it easy to place copy or suggest word counts and make adjustments on the spot. It also made it easy to keep all eyes on the design as it evolved to consider aspects of the experience that may have been missed during the wire-framing process such as hint text, process feedback, and related components like follow-up emails and mailed receipts.
Within these 2 days the design team created 3 different donation experiences for review, ultimately settling on 1 design after some further modifications.
The updated experience.
The design was then prototyped through InVision and Flinto for final review and presentation. InVision allowed the team to interact with the experience and journey by navigating their way through the new design and process. Flinto allowed us to animate and demonstrate the motion interaction and UI feedback that we envisioned for the new experience.
Interaction prototypes built by Aubree Berg in Flinto.
TESTING
Because of the short time-frame our testing was done internally to validate the new designs. Individuals from the organization were asked to compare the new experience to the old and interact with the prototypes. The testing validated our research and work. There was nothing preventing us from taking the concept to the development team.
DEVELOPMENT
We met with the development team to present the new experience and answer their questions. A number of systems-related issues were brought up requiring us to walk back some features that we were hoping to implement. This was the oversight in the project. We hadn't included development up front and were designing an experience that the organization's current technology could not deliver.
After modifying the designs to function in the existing infrastructure, the development team executed them.
More testing
With the new experience developed, we A/B tested against the existing experience. We didn't want to launch the new experience without validating its effectiveness. If the test failed, we could simply turn the switch off and resume operating as if nothing had changed.
The testing went very well with actual users and proved that we had moved this experience in the right direction. The new experience increased the visitor conversion rate by 45% and increased the average donation amount by $8, all without any direct marketing or changes to visibility of the donation reference. These results were simply based on an improved user experience for users already navigating to that page.
WHAT we learned
Though the technology limitations were a setback, it was a great learning experience for everyone. We were sure to include development in future research and design sessions like this one. Development and leadership was made aware of technology limitations that were roadblocks to strategic growth plans.
We also validated these hypotheses that were derived from the initial research and conversations:
-
Switching from an immediate and complex payment form to cause-based messaging explaining ministry impact would increase conversions.
-
Providing FAQs and Security credentials on the landing page would reduce bounce rates.
-
Providing alternate donation methods on the landing page would reduce bounce rates and be a more logical information architecture.
-
Creating an environment that allowed us to test multiple messages and visuals helps keep the impact and motivation to donate fresh for the user.
The new experience allows for easy deployment of new visuals and messaging.
Results
After a year of the updated experience being active, the team was able to quantify the success of this transition through a donation rate increase of almost 70% and an annual donation amount increase of over 78%.
Follow up
After validating and fully launching the new experience, additional work has been done to update the language and design of the donate button in the header.
New communication and payment confirmation emails have been designed to coordinate with the experience and keep the user engaged in how their donation continues to make an impact.
Team Comments
"This project was a collaborative experience between key creative stakeholders from the very beginning. Jeremy's input was integral to the success of the project, as he has the unique ability to sift through lots of ideas (both good and bad) and visualize what may be most beneficial to the end user--very early on in the process. It's also helpful to have him in the room from the get-go for quick concepts for those of us who have a harder time visualizing ideas. When we got to the implementation phase, Jeremy and his team provided several options that we could test with our users and they continue to provide fresh designs for this project to keep it fresh."
– Anne Bauman, Digital Engagement Manager