UX Case Study | Daily Miracles- Transforming Compassion and fundraising into Design
Daily Miracles explores the application of design principles in crafting a user-centered digital experience for fundraising needs under various campaigns. converting empathetic intentions into a tangible and well-crafted digital experience.
Introduction
Daily Miracles, a purpose-driven and user-centric fundraising app meticulously crafted to empower individuals in effortlessly securing financial support for personal medical needs, education loans, emergency funds, and beyond. Simultaneously, it streamlines the donation process, seamlessly connecting users with a compassionate community poised to create a lasting positive impact. This UX case study delves into the design journey of Daily Miracles, unraveling the principles and innovations.
Role
Role: UX Researcher, UX Designer
Timeline: 4 weeks approx
Context: Personal Project completed as part of Google UX Design Certification
Tool
Figma, Photoshop, Marvel
Problem Statement
In a world significant financial burdens, be it medical expenses, education costs, I envisioned a digital haven — Daily Miracles. The challenge is to create a platform that simplifies fundraising, seamlessly connects donors, and fosters a supportive community for transformative change.
Research
The research phase involves understanding the target audience, their pain points, and the existing landscape of fundraising platforms.
Double Diamond process-
In the double diamond process, there are major 4 distinct steps e.g, discover, define, develop and deliver. Further have been explained in the diagram below with references as per our app.
Surveys and User Interviews:
After conducting interviews with potential users, aiming to comprehend their experiences, challenges, and expectations regarding fundraising for medical expenses, education, and other life-changing events. Explored user feedback to understand common pain points and areas for improvement.
The major insights that I gained during the research phase are,
Users often face significant financial burdens, especially related to medical expenses and education costs.
Trust in online fundraising platforms is a significant concern. Users want reassurance regarding the secure handling of their personal and financial information.
A mobile-friendly platform is essential for accessibility, especially considering that not all users are tech-savvy. A comprehensive guide is crucial to assist them in navigating and utilizing the platform effectively.
Recognition for fundraising milestones and tangible or virtual rewards serve as strong motivators for users.
Competitor Analysis:
Examined existing fundraising platforms to identify strengths, weaknesses, and gaps in the market e.g. Ketto.
Objectives
The insights gained during research may provide a more nuanced understanding of user needs, which can lead to setting objectives to your project. So, the major objectives were as follows:
Persona Development:
Once I understood the target audience through research, further created create user personas. Personas are detailed, semi-fictional representations of the ideal users, incorporating demographic information, behaviors, goals, and pain points.
Empathy Map
For Ali’s persona, I further created an empathy map that visually represents their thoughts, feelings, needs, and behaviors. Empathy maps typically include components like- what the user says, think, does and feel.
Paper Wireframes
Following the research phase, I crafted preliminary paper wireframes with low fidelity to outline the entire process and functionalities of Daily Miracles. This exercise allowed for a tangible representation of the app’s structure and interactions, paving the way for further refinement in the design process.
Low Fidelity Wireframes
Embarking on the design journey for Daily Miracles, the creation of low-fidelity wireframes has been done. These early-stage representations lay the groundwork, offering a simplified yet essential glimpse into the user experience and interaction flow that will shape the development of this transformative fundraising platform.
Usability Testing
Following the development of low-fidelity wireframes, several rounds of usability testing were conducted. Random users were invited to perform a walkthrough of the app, providing feedback and reviews. Based on their valuable insights, several adjustments were made to enhance the user experience and address any identified usability issues.
1. Homepage
Initially, the homepage displayed a direct listing of fundraisers without a clear Call-to-Action (CTA) for starting a fundraiser, hence, introducing a prominent CTA button.
Various campaign options incorporated.
As I redesigned the fundraiser listings with UI cards (in a slider), that got me a larger area above the fold to prominently feature an additional section too.
2. Fundraiser detail page
I’ve introduced a report button on the screen, allowing users to report a fundraiser if they perceive any genuine issues or concerns.
2 buttons for donate on the same screen, so that was consolidated into one.
Documents and updates were way down on the screen, so for better navigation and easier access they have been organized into tabs.
Redesigned the share button for a more compact appearance.
Added the name of the organizer so that the system could be more transparent.
Added a section for no. of supporters for the audience to know that there are more people like you who have donated and your donation will help too.
Donate now screen
Upon clicking on the donate button, the donation screen now smoothly slides in from below, replacing the previous popup interface.
To simplify the process of determining an appropriate donation amount, I’ve incorporated preset values that users can select, streamlining the subsequent payment steps.
You can manually enter the desired amount if you prefer.
High Fidelity Mockups
Splash Screen and inital login screens —
Upon first use, you’ll encounter initial screens prompting you to register, either with your Email/Mobile Number or seamlessly sign up using your Google account or or bypass the process altogether to gain immediate access to the app.
Homepage-
Encounter a donation pocket to add funds and contribute easily, followed by the display of diverse campaigns like education, emergency etc. Engage with a prominent Call-to-Action (CTA) button to initiate a fundraiser (further screens in Fig 13 below). Explore additional UI cards for both individual fundraisers and monthly donation options.
Search-
To explore more fundraisers
Donation Page-
Access a comprehensive donation history on this page, providing detailed insights into your past contributions and displaying recurring payments for monthly donations.
To start your fundraiser-
Initiate your fundraiser by clicking the CTA button on the homepage (as depicted above). This action will lead you to the ‘Start Your Fundraiser’ page, equipped with a stepper for enhanced navigation. The stepper guides you through sections for personal details, fundraiser specifics, and bank account details, where you have to add in various required details as shown below.
Upon submission of this form, please be patient as it might take a 24-hour period for our board to review and approve your fundraiser.
Detail fundraiser page-
Clicking on any fundraiser will lead you to a detailed fundraiser page featuring the total donation amount, collected funds, organizer’s name, description, supporters, and more. Here you can see, there is a stepper at the top clearing stating overview, documents and updates from where you can check documents and verify the autheticity of donating money.
Donation pages-
To contribute to a specific fundraiser, click the “Donate Now” button. Subsequently, a screen will slide in, allowing you to choose the currency and specify the donation amount. Optionally, you can choose to keep your donation anonymous. The following stepper will guide you through selecting the payment method for the donation.
What have I learnt?
Throughout the process of developing the Daily Miracles fundraising app, several key learnings have emerged:
- User-Centric Design:
The importance of prioritizing user needs and preferences, ensuring that the app’s features and functionalities align with the expectations and experiences of the target audience. - Transparent Communication:
The significance of transparent communication, particularly in the context of fundraising apps. Clearly conveying information about donation usage, campaign details, and verification processes fosters trust among users. - Iterative Design Process:
The value of an iterative design process, incorporating user feedback at various stages. Continuous refinement of wireframes and mockups based on real-world insights contributes to an improved and more user-friendly product. Understanding that the development of a fundraising app is an ongoing process. - Community Building:
The significance of fostering a sense of community within the app. Features that showcase the number of supporters, collaborative campaigns, and transparent reporting contribute to a communal atmosphere, enhancing user engagement.
Note: This case study serves as a conceptual project completed within the framework of the Google UX Design Certificate course. It is not an actual implemented project but rather a demonstration of applied design principles and techniques for educational and illustrative purposes.
