Vida Loose
Background:
We were tasked with designing for a social enterprise in order to promote and improve its impact on the world's most pressing challenges.
We chose to focus on our local place (a space or location imbued with meaning that has unique physical and human characteristics), due to our knowledge and connection.
The greater Vancouver and Lower Mainland area is home to some of the most incredible nature and outdoor sports, and as advocates of connecting and accessing this nature our team decided to pick the Climb & Conquer charity. This charity's focus is providing counseling and climbing education to low-income and disadvantaged youth (5-18yr).
From this, our goal was to improve web usability thereby increasing donations so that there are more resources for youth to gain access and education to outdoor recreation.
Methodology
Design Sprint
A design sprint allowed us to gather a shared knowledge base across all participants, define specific contexts and desired outcomes, generate ideas, determine a solution, prototype and gather feedback. Moving quickly and efficiently as a team to generate value.
Understand
Secondary Research
In 2020, there was a 21% growth in online donations, demonstrating a growing market (QGiv).
75% of young donors are turned-off by out of date websites, which suggests the need for better design to encourage giving (QGiv).
Studies indicated a 12% increase in average donation amounts when donors were subject to giving levels, due to social influence (FrontStream)
It seemed clear: the need for a well designed, easy to navigate user experience for charitable organizations.
Our Goal:
This led us to our goal - to improve usability thereby increasing donations so that there are more resources for youth to gain access and education to outdoor recreation.
Target Demographic:
Participants: charitable donors
Age: 18+yrs
Location: Living in the Lower Mainland and Sea to Sky Area
Primary Research:
Now that we had a baseline understanding of the problem space and issues at play, it was time to conduct our own research. We needed to gather data directly from participants to find out how and why people choose to donate.
We created an online survey and were able to gather insights from 13 respondents who met our demographic criteria
Insights:
There were three key themes which we extracted from the surveys:
Connection: the majority of participants donate when they are feeling emotionally connected
Transparency: donors want to know where their money goes
Accessibility: donors want an easy transaction process
Connection was the most reoccurring theme amongst our interviews, therefore we decided to focus on developing that theme which led us to our key insight and moment: When users feel connected to an organization by exploring the website, they are more likely to donate.
After analyzing our findings, we decided to formulate a question to be explored:
How might we...
provide connection and transparency to donors in the Lower Mainland and Sea to Sky area when making contributions so that we can increase accessibility to the outdoors for low-income youth?
User Persona:
We decided to build a persona as a reference tool to help us align ourselves with user interviews while we continued through the design process.
Storyboarding & Key Moment:
We decided to create a storyboard to map out the contexts Candice might encounter at various stages of the donation and interaction process. Our key moment is “making a connection”, where Candice feels an emotional connection with the values and mission of the charity.
Design Decisions:
Since climb and conquer was founded in 2011, it has built its brand image and brand loyalty. We decided to keep some of the assets such as colors and fonts to maintain brand consistency.
UI Inspiration
We drew inspiration from various charitable websites, specifically we liked the landing pages with photos of the people or initiative the charity is meant to assist, which is helpful to arouse empathy and build connection. We also liked the designs that show the impact of donating different amounts of money, increasing transparency and encourage users to donate more.
Solution Sketches
Based on the inspiration we gathered from other charitable websites, we began sketching our own ideas for what we wanted our final landing page and donation flow to look like.
Prototype V1
We then converted our solution sketches our prototype version 1.
User Testing
In order to evaluate my prototype and ensure a strong design centered around the user, we conducted user testing of our prototype. We standardized the approach through a user test plan and script, ensuring consistency for each test session.
With our initial prototype, we conducted five user tests and found that users responded well to the clear and concise design and the straightforward donation process. Some of their feedback centered around the states of the buttons (active/disabled/etc.) and confusion around the location of the error on the donation flow. Therefore we implemented design changes to target the feedback from our testing sessions.
Update 1
We decided to change the Continue button to gray to show a disabled state before being able to continue in the donation flow. As well, we also made the field for the other donation amount smaller as feedback indicated it was unnecessarily large.
Update 2
Here on the Error page, we added more information to the Error notification to indicate better where the Error was. The Continue button at the bottom was also updated to the disabled state.
And on our Confirmation page, we added a button to return Home as our user testers wanted to move off the page after confirming they had completed their donation.
Key Learnings & Next Steps
Connection and transparency is key for users to want to make a donation and complete the process online and a straightforward, minimal donation process prevents user fatigue or abandonment of the donation.
As a group, we learned that Usability is greater than Style. Some of our user tests suggested elements that were nice to have but didn’t actually impact the user experience.
Next steps would be to send the Follow Up emails to donors for added transparency - adding like, follow, and share buttons and pair donors with kids for one-on-one sponsorship to foster further connection and community.
.png)