The final prototype walkthrough
Type
Academic
Timeline
10 Weeks | 2021
Role
UX Researcher | UX Design Strategy | UI Design | UX Writer
Cascade is an app that allows Millennials to make affordable donations regularly and to connect to the causes they care about. It allows tax deductions to be automatically applied through the connection to one's CRA account. Make micro-donations through your purchases, get charitable tax receipts ,set monthly donation goals and share the causes you care about with your friends and family!
A Cascade starts with one drop of water. Every action you take makes a difference.
Discovery of Problem Space
A generation of donors that has sustained and grown health, education and social sector charitable institutions is passing away and the generations coming after them are not replacing them in number or quantum of giving.
Millennials have not developed the same habits of giving charitable donations to support the social fabric of Canadian society. Millennials may believe that their financial contributions insignificant or they may not have sufficient information on which causes to support.
When making small donations donors do not see the benefit of requesting and filing their charitable tax receipts. yet for every dollar given tax payers of all income levels receive almost 50cents on every dollar of income tax paid.
Design Thinking Process
I used the 5 step UX design thinking process in order to understand the users, challenge assumptions, re-define and test problems to create an innovative solution to prototype .
Secondary Research
What are the Challenges People Face Today?
Today, technology plays an important part in the financial and social life of Millennials. Why should charitable practices be different ? The charitable sector is one of the furthest behind in its investments in information technologies. Through my research, here are some of the challenges people face today:
Millennials don't know where to go for information on donating.
Even If Millennials are willing to donate money, a perception that their small donations don't add up to much stop them from donating.
Millennials claim to have higher cost of living prior generations of the same age. This leaves them with less disposable income.
Why is this important?
Only 55% of millennials gave to registered charities in 2018 compared to more than 80% of boomers.
Charities make Canada’s social fabric stronger. Charities depend on donations. Getting Millennials and future generations in the habit of giving is therefore important for Canadian society.
It seems that Millennials face many challenges that contribute to lower donations . This is where I want to focus on my project, and how I can help facilitate more donations from the Millenial generation .
72%
Boomers Give
55%
Millennials Give
source
"The Next Generation of Canadian Giving by the Blackaud "
Research Themes & Insights
User interview Insights
What are the Challenges Millennials Face to Donate Today?
To learn more about the common behaviours and motivations of my users, I interviewed four Millennials (ages 25-38). Here are some of the research Insights and frustrations divided into themes.
Persona Jenna Sparks
Persona
I created the persona Jenna based off the interviews pain points, motivations, goals and frustrations . This helped step out of myself and my needs and start to empathize with the user in order to create a better final product.
Customer Journey
To better understand how our customers find and interact with the service we created a Customer Journey Map. This is a strategic approach to better understand our customer expectations and needs and is crucial for optimizing their experience.
Some of the main feelings and frustrations that Jenna faces deal with her incapacity to donate large sums of money. She is contemplating where her small contributions will have the greatest impact. She wonders: is it more advantageous to support local cases or larger, but more intangible matters?
with my customer journey map complete I focused on redefining the project question
How might we make it convenient for Millennials (ages 25-38) to develop a consistent habit of giving in order to increase the financial impact for charitable causes they care about.
User Stories
Focusing on Donation interests?
Using the refined HMW statement ( project question) and considering the needs of Jenna the persona, I created a set of 30 user stories under 3 epics (subcategories) in order to help me define the function of my product.
I chose the epic small donations because of how closely it relates to my persona having to little to make big donations. It solves the pain points of how my persona having too little to make big donations.
Core Value Proposition
To facilitate micro-donations to Millennials
Core Epic
Small Donations
User stories / Chosen Epic : Small Donations
As a millennial donor I want to donate funds in small increments so that It can go to the causes i’m fighting for.
Task: User taps micro-donation on payment option page
As a millennial donor I want to make micro-donations through my purchases of goods and services so that I can afford to give.
As a millennial donor I want to see that my micro-donations add up over time so that I can feel like my donations make a difference.
As a millennial donor I want to donate change to charities so that I can still make an impact!
As a millennial donor I want to limit my donation amount so that I don’t over spend.
As a millennial donor I want to know my donations add up over time so that I
feel its worthwhile giving.
As a millennial donor I want to know that other millennials are giving to the same causes that I am so that I feel that I am apart of the community.
As a millennial donor I don't want to have collect all my small tax receipts to file with my income taxes so that I benefit from the charitable tax deduction from income tax.
Task Flow
Focusing on the user making micro-donations.
After identifying my main tasks, I developed a task flow thinking about how a user would interact with the product to complete these tasks.
This task flow below shows a Jenna(user) navigating through the app to make a micro-donation.
Sketching & Wireframes
At the beginning of my design process I created lo-fidelity wireframes for testing purposes. This helped me begin to lay down the visual foundation of the project, user interface and user experience. I had 3 iterations of each screen done on paper then I transferred the best iteration to the computer to have a more clean and precise drawing.
Sketches of wireframes done with whimsical
Results for the first usability test
USABILITY TEST: 2 ROUNDS
Understand users and discover the best experience through iterations
After going through the ideation process above for each screen, I created the first wireflow in mid-fidelity. This prototype underwent usability testing for two rounds with 5 participants in each round. Testers were given a set of 6 tasks to complete. The results from the first round of usability testing were used to inform my design changes for the next wireframe iteration.
NOTABLE CHANGES
“I want to be able to find the movements I care for !”
- 4/5 TESTERS
For the onboarding screen I thought it would be a good idea for the application to recommend. If the users is uncertain what a functionality will do, then that functionality is a mistake in the process, and in my eyes, a task flow error. With small changes, the well received product can become something that is loved and adored.
Prioritization Matrix
With the list of feedback narrowed down to the twelve most critical choices, the top being that the onboarding screen was unclear and very confusing, no iconography and back buttons.
4 out of 5 testers couldn't understand the difference when they select between micro donation and round up donations. I added more of a difference with title and description to make a notable contrast between functions.
Mid-fidelity to Hi- fidelity. Mid-fidelity to Version 2(V2) shows the progress for the onboarding screen. With version 2 users were not introduced to the app or what it is. Onboarding is a major component of user engagement . Small paragraphs and Illustrations were added to create the engagement and excitement for users.
Ui Board
UI Board
I created a UI board for the discovery phase . Clarity and minimalism - a common feature to bank applications. Clear, simple, and easily understandable designs.
Glassmomorphism for CC information page. Neumorphism can create some nice realism to some buttons. Catchy and Cool for Millennials Response: I feel that the application will feel more captivating for the users if I follow a similar dynamic approach to my design.
Moodboard
The app mood is friendly, energetic ,passionate and compassionate. My mood board is like the experience of a warm summer's day. Warm colours , the sun hitting your skin the ecstasy of life surrounding you.Colours are bright welcoming and warm.
UI colour usage
Colour & Typography
My primary brand colour is navy blue, this indicates power and authority. In my tribe “Tuaregs” of Mali, West Africa we wear large robes of navy blue. This colour is majestic and mystical. Navy represents in the logo the power of the donations.
My secondary colour is blue a colour of relaxation and peace which can be useful in rational appeals. With this association to the sea and sky, blue is considered a colour of stability and can be used to represent logic and loyalty.
Tangerine is my third colour it represents energetic, friendly , passionate and exciting which is what is going to bring in my users to donate are create some spontaneity.
I followed the iOS style guide all of my type is SF pro Text and is the standard typeface for iOS.
Cascade logo the symbolism of a small waterfall
Logo Ideation
How can a product be represented in a name?
cas·cade
a small waterfall, typically one of several that fall in stages down a steep rocky slope.
Big change happens incrementally, like a cascade it all starts with “one” drop or one action. Navy blue a colour of power... the power of change or small change becoming something bigger.
Final Prototype
UI Design
Once I tested out all usability mistakes, I started designing the final screens in Figma.
Warm ,Inviting colours and playful illustrations help bring in the user. I used behavioural design cues at the end of the flow to show a variable ( reward system ) and track their progress so that the users have to feel gratitude for there donations in order to keep them doing more of it.
UI Prototype
Marketing Website
A responsive marketing website was designed to promote Cascade application to the target audience.
Next Steps
If 100 million people downloaded Cascade it would allow more money to flow to the charitable causes, Improve climate change, feed people all around the world and do all sorts of positive things.
I would need to find a foundation to issue charitable tax receipts and a bank for the financial technology in this app
I would need to connect to the CRA to partner in this creation.
What have you learned from this project?
Looking at the work I accomplished during these 8 weeks, there were plenty of highs and lows. My biggest takeaway from the process of human-centered design is to let the users inform the design. If the design doesn’t improve user experience or meet a goal, then the design is just decorative. It is important to keep testing and keep iterating. And through this process, remember that as a designer, you are not your designs. I needed to keep an open mind during user testing and feedback, as there will always be hard moments which can lead to pivotal changes.
Being honest is a good thing, it means that you are aware of what you’re doing.