Designing the Donation User Flow
The main goal for this phase of the project was to ensure Beela could accept donations through their website.
Designing with limited user research
Our main obstacle was that we had limited user research to guide the designs of the donation flow. However, due to time constraints, we would have to begin working on the donation user flow before the research was complete.
Additionally, we had limited information about the payment processor that would be used and thus did not know what type of information needed to be gathered about the donor through the screens we were creating.
Reviewing user flows from similar organizations
We decided to review the donation user flows from similar organizations such as the Swedish Red Cross to begin building the user flow that would later be adjusted once user research was gathered. The Swedish Red Cross was an organization that the client shared as the type of donation page they liked.
We also made a few assumptions about the kind of information that needed to be collected while we waited on a decision about the payment processor.
Brainstorming ideas together
Half of the UX team (including me) began brainstorming wireframes for donations, while the other half worked on events. I asked everyone to bring a low or mid-fidelty wireframe to the first brainstorming session to begin discussions.
Beela provided us with some design assets such as the logo, prefferred typography, and the beginings of a design system.
I designed the wireframe below:
This an example of a wireframe designed by another designer on the team:
3 team members including me came together to discuss the pros and cons of each user flow. A few discussion topics included:
- How can we create a concise section at the top of the donation page that explains the value of donating while not taking up a lot of space?
- What method of payment should be included? What kind of information would be needed for credit card payments?
- What should be the donation amounts shown to users? Should there be monthly donations?
We had several design sessions improving on each idea through collaboration until we decided on the final user flow. During each session we discussed what we liked and didn't like about each design and then improved upon our design for the next session. Finally, we combined the best elements of everyone's design into the final userflow.
My contribution to the design was suggesting that we use reusable components from the design system to build the FAQ section and the testimonials section.
The user research arrives
Finally, the UX research team delivered user research findings. Among the main takeaways were that potential donors wanted to make sure that their funds were being used appropriately and that the organization was making an impact. The research did not impact the design but it did impact the content. The UX writing team adjusted the copy that we incorporated into the designs.
Additionally, a round of usability testing found the designs were sound. Potential donors were easily able to donate to the organization. The results provided some feedback regarding the copy on this page and with some finishing touches from the content team, we had our final design.
The new copy highlighted the impact of the program and how donors individual contribution helps with this mission.
I created the layout for the GDPR page. I used spacing and typography from the design system to ensure that users could skim the page. This text-heavy page was necessary both from a legal standpoint and to ensure Beela maintained the trust of its donors.
