Charity fundraising app UX design
Reducing user friction and support dependency through clearer navigation and onboarding flows.
A selection of screens of the final output from this project
Background
idonate provides tools for both charities and fundraisers to help them raise vital funds. idonate operates primarily as an online fundraising platform, where users can create their own page to promote their fundraising event, allowing family and friends to donate directly to their chosen charities.
idonate also provides a number of SaaS products and hosted fundraising solutions, such as their Virtual Fundraising Events that became so important during the COVID-19 lockdown and an Online Raffle Creator. Idonate allows charities to collect fundraising revenue through the idonate platform or directly through their own websites also.
I was approached by the founders of idonate to help them to reduce the large volume of support calls they were receiving from users, create a simplified navigation and site architecture to encapsulate the various additional products that they now offer under the idonate brand and create a fresh, new visual identity for idonate (including a logo design and new brand identity).
idonate needed help in reducing the large number of support calls they were receiving by creating a simplified navigation and site architecture.
Role
UX research
UX design
UI design
Motion design
Graphic design
I served as the sole UX and UI designer on the project, with full management of the project from the very beginning.
I undertook all of the UX research with input from sample users and stakeholders and worked as the sole UI designer from conception to completion before handing over annotated high-fidelity wireframes and video walkthroughs to the development team.
Research
Scroll map data captured from HotJar integration
Metric analysis
Data from integrated site analytics were studied and analysed to gain an understanding of the user demographics, behaviours and flows through the existing website.
Using the tool Hotjar, I took a snapshot of screen recordings of user interactions and collected data from click and scroll heatmaps.
This data highlighted some initial potential pain points around site navigation, inconsistencies in labelling and jargon. It also showed how users tended to interact with different elements on the site.
Competitive benchmarking exercise
Competitive benchmarking
A full competitive benchmarking exercise was undertaken to gather a better understanding of the industry standard, potential user pain points, defined user mental models and opportunities to create a better user experience and use design as a competitive advantage over other fundraising platforms in use in Ireland.
I looked at the overall user experience in detail for each competitor, but focused extensively on the positives, neutrals and pain points involved in:
- Homepage Layout and Content
- Navigation & Information Architecture
- User Account & Dashboard – Editing a Fundraising Page
- Checkout – Donating to Somebody’s Cause
The main findings from this exercise were that most competitors focused on a very simple, step-by-step onboarding setup, asking only for the absolutely essential information from their users. Account management varied from app to app, but provided great insight into opportunities for improvement and to gain a competitive advantage.
Remote usability testing session
Usability testing & depth interviews
- Determining the main source of user pain points
- Identifying areas that cause confusion with users, especially around site architecture
- Where any negative experience may cause user drop-off during onboarding
- Evaluating the user experience of the donation process to spot any potential improvements or sources of user frustration
Based on these goals, I developed a series of tasks for the users to complete, including setting up a fundraising page for a sample charity, making some basic edits and updates to their fundraising page, promoting their page on social media and making a donation to another fundraiser using the search function.
The users were carefully chosen to give a range of computer literacy, age and device-preference. The testing sessions themselves were a mixture of in-person sessions and remote sessions. All sessions involved a depth interview afterwards to probe further into the pain points and mental models of the users.
The findings were invaluable. Serious pain points became evident around basic site navigation, onboarding and especially around the user dashboard and edit page functionality. User frustration was very high around these areas and depth interviews with the users brought about clear issues that needed addressing.
Serious pain points became evident around basic site navigation, onboarding and especially around the user dashboard and edit page functionality.
Analysis
User journey map for “Create a fundraiser” flow
User journey maps
To analyse my research data more effectively, I created user journey maps to visualise key pain points, behaviors, context and goals of users interacting with the idonate application. These maps helped translate insights into actionable design decisions, ensuring the final experience was intuitive, engaging, and aligned with user needs.
User flow map of “Create a fundraiser” process
User flow maps
One of the biggest pain points that arose from the initial stakeholder interviews, user testing and depth interviews was that of the problematic and unintuitive site architecture of the existing site.
User flow maps were created for a number of scenarios and personas flowing through the idonate site. This was conducted as an exercise to visualise the existing user flow on both idonate and their sister-site ifundraise (which was now being incorporated into idonate with this redesign), and to improve the flow based on the data collected and by analysing the flow maps and user journey maps side-by-side.
User pain points identified
Users have difficulty navigating the site
Pain Point:
All test users had a great deal of difficulty and frustration trying to find the option to create a fundraising page. The text copy and multiple different options presented seemed to cause this confusion. In reality, most of these options would have brought them to their desired result, but because of a lack of consistency in the text presented to them (button labels, text copy, etc.), the user was unsure of the function of each of these options and it took a long time and frustration before they could find the most important option on the website.
Opportunity: Revised Site Architecture & Navigation
Simplify the options presented to the user: one option to “Create a Fundraiser” for all users, which focuses on the primary user and not edge case users, but still providing a clear path for all users to take.
Remove confusing jargon and keep consistency with terminology and reduce the number of options presented to the user to three primary areas: “Create a fundraising page”, “Search for a fundraiser” and “Login”.
Confusion during onboarding
Pain Point:
The user is expected to search for the event they are fundraising through by date, but this is not made fully clear, and because of this the user cannot find the event they are searching for and end up entering it manually. It takes the user a substanial amount of time and frustration before getting to their desired result.
Opportunity: Simplify the Event selection process
Remove the date-picker option and instead present the user with a simple search bar where they have control to search by event name, location or date.
Give clear feedback on what to do next if the desired event does not appear in search results: manually enter event details, but only visible after searching.
Dashboard and Edit Page is overly complicated
Pain Point:
When it comes to editing their page, the array of options overwhelms and confounds the user. The Edit Page section assumes the user will go through each step sequentially, rather than jump straight to the section they wish to edit. Presenting options “Next” and “Save and Exit” cause confusion with the users, and because each step needs to be saved before moving to the next often ends with them not saving their changes. The users are unsure of what options they are changing and where these changes or updates will appear on their page.
Opportunity: Simplified Dashboard Options and a Visual Page Editor
Nesting options under headings has caused much of the problem, so by giving each option it’s own defined section, the user should find what they want easily. User guides beside each option to help any user who gets stuck, reducing support calls.
Remove the Edit Page section and replace it with a visual page editor (using the Facebook mental model), where the user can edit sections visually on their page, seeing exactly what they are changing and updating without any confusion.
Donation process causes issues with confidence
Pain Point:
The user is asked at the beginning of the donation checkout form to select a payment type (Credit Card, Apple Pay or Google Pay). Credit Card is selected by default, but users are still clicking on it and when nothing changes, they are thinking that it isn’t working and contacting support for help.
A lot of users are also wary of adding their contact phone number and address, which is a requirement of the credit card transaction provider, thinking that it is being shared with the charity that they are donating to. They are losing confidence in the security of their personal details and not finishing their transactions.
Opportunity: Chunk the donation process into three steps
By splitting the donation process into three separate steps, all of the pain points can be addressed.
1. The user selects a payment type and moves on to the next step.
2. The user fills in their donation amount and a message to the fundraiser and charity.
3. The user fills in their payment details. By keeping the payment details contained and separate to Step 2, the user doesn’t feel like their details are being shared with the charity, but for verification needs, using their mental models from other sites’ checkout process.
The site lacks "celebration" or "joy"
Pain Point:
Many users commented on the lack of encouragement and joy throughout the site. Being a charity fundraising platform where users are essentially doing good deeds to help good causes, they expect to see more success stories and more joy, celebration and enthusiasm throughout the site.
Opportunity: Show Success Stories and Celebration
Showing success stories on the homepage front-and-center will remind users of the reason behind what they are signing up for.
Giving users a celebratory “well done” and using joyful, colourful animations throughout the onboarding and donation process will help to bring joy and enthusiasm to the site.
One of the biggest pain points that arose during research was that of the problematic and unintuitive site architecture of the existing site.
Design
Some wireframe sketch explorations
Sketching
I always like to sketch a design out on paper first. This allows me to quickly explore ideas, iterate freely, and focus on core usability before committing to digital wireframes.
A low-fidelity wireframe of the idonate homepage
Low-fidelity wireframes
Low-fidelity wireframes and concepts can be fleshed out very quickly and tested before moving on to more high-fidelity prototyping and polished designs.
This low-fidelity approach helps me refine layouts, interactions, and hierarchy early on, ensuring a strong foundation for the final design.
Motion design
It was discovered during user testing and depth interviews that joy, celebration and visual interest was greatly missing throughout the site.
This was especially the case during the process of creation of a new fundraising project. UX research showed the biggest pain points were around the cognitive overload involved in the complex process of creating a fundraiser.
To combat this issue, I created a number of animations to add visual interest and visual representation of each step of the process. These icons were created in Adobe Illustrator, imported to After Effects as shape layers, where they were animated. They were then exported to the Lottie format, using the Bodymovin’ plugin and integrated into the site as lightweight, efficient and effective animated graphics, helping to improve the overall user experience.
A low-fidelity wireframe of the idonate homepage
Logo design and brand identity
As part of a larger UX redesign of their platform, also give their brand identity a refresh, communicating the values and mission of the organisation in a visual manner.
This low-fidelity approach helps me refine layouts, interactions, and hierarchy early on, ensuring a strong foundation for the final design.
Validation
Prototyping
Clickable prototypes were created for all pages, and user validation testing was conducted on the Create a Fundraising Page process, Donation process and User Account and Edit Page functions.
User validation testing using interactive prototype
User validation testing
User validation testing brought about some tweaking that was needed, particularly around the Edit Page designs. Users weren’t immediately understanding the visual page editor and needed to be given a visual prompt. The solution came with a simple banner at the top of the page, that informed the user that they were editing their page, which in turn prompted them to look for the changes they wanted to make. Testing with clickable prototypes allowed for a quick iteration through the design process before moving on to higher quality wireframe devilerables.
Testing with prototypes allowed for a quick iteration through the design process before moving on to higher quality wireframe devilerables.
Design delivery
High-fidelity wireframes
High-fidelity, fully annotated wireframes for each page were designed. Design deliverables included a full design system, interactive annotated wireframes with downloadable assets and style guides, and for each flow I also delivered an instructional video demonstrating and showcasing each element on each page.
I find that the video demos can help greatly in communicating a design to large teams of developers, like we were dealing with here, and can help to reduce confusion or misinterpretations of design elements (especially dynamic and interactive elements).
Conclusion
Thoughts & learning
idonate highlighted the importance of simplication in user flow – simplifying the jargon, breaking onboarding tasks into smaller steps helped to create a more user-friendly experience.
Drawing on established user mental models and moving from a set of overly-complicated forms to a visual page editor helped users understand the changes they were making to their fundraising pages, increasing the likelihood of more user engagement.
The scale of the project was much vaster than originally conceived. Upon reflection, I think a more agile approach towards the project would have made the project more manageable and would have allowed for faster development, with more user testing. However, user test validation from clickable prototypes and iterating back through the design process was still a speedy and effective process.
Feedback and results
"From day 1 it was clear Alan’s approach and thinking would bring idonate to a new level. What we found most useful was his approach in explaining his thinking behind the design theory and providing videos to back up his explanation. This allowed us to make very clear decisions. Alan also took on the full UX testing before his redesign and this has clearly resulted in a much more user friendly platform. We look forward to working with Alan further."
Alan Coyne
Founder, idonate
"UX Designer Alan Travers has crafted a clean, user-friendly platform that will significantly raise the profile of the business as it grows and expands into new regions."
All-Ireland Business Foundation
review of