Case Study: “Light the lamp” for charity
This UX design case study outlines the process I went through with my team at Red Academy to develop an adaptive donation and storytelling website for a youth charity.
Client: Hockey4Youth™
Project Length: Three week sprint
Team: Kevin John-Baptiste, Colin Laycock, Kiersten P. Mosley
Challenge & Opportunity: Gettin’ drafted.
Hockey4Youth provides new Canadians ages 13 to 18 with the opportunity to play hockey by removing the social and economic barriers and develop life skills through their T.E.A.C.H. program. The participants are from less affluent areas of Toronto and Montreal and the program basically runs on donations and volunteers. This year’s goal is to raise $200K to continue the program and grow its reach .
The current site is easily accessed through search engines and has a clear site structure, however the minimal content, basic navigation and low brand awareness is not generating the donations the charity needs.
A redesigned adaptive website with more relevant information for donors, stakeholders and volunteers and an optimized donation process will provide an improved user experience, influence donation behaviour, decrease cost and increase brand awareness for Hockey4Youth.
Research & Insight: Directing the puck.
After meeting and conversing with our clients to understand Hockey4Youth and its business requirements, we divided to conquer. We performed extensive domain research, reviewed white papers, performed a competitive/comparative analysis and an heuristic evaluation.
On review, there was an obvious insight — place the donation button in the top right-hand corner to increase clicks. Not so obvious — remove unnecessary menus and visuals from the donation process to reduce distraction and increase task completion.
In the search to increase average donation spend, we also incorporated proven strategies used by successful charities:
- Change the processing supplier — use Stripe for a 0.6–2% savings in fees and potential for greater through volume discounts
- Reduce the “chaos of choice” with a preset amount at a higher price point, reduce form fields and remove Securities
- Provide the ability to target donations
We were able to confirm through surveys and white papers, the client was correct using stories of those who benefit as it’s important to donors and creates social proof. However, it is second to how money is used by a charity.
Planning: A power play.
Before moving onto the design phase, we needed to identify the Hockey4Youth website user(s) and the existing and potential donors. We did not identify any participants as users; only volunteers and donors.
Donors in general are in all age categories. To pinpoint those for Hockey4Youth, we took the generational breakdown and overlaid the preferred causes, motivations to donate, and preferred methods of donating. We discovered that the primary users are Millennials and Boomers that donate money, however both wanted the ability to donate time and goods.
The secondary users were Volunteers from both GenX and Boomer generations.
To create the information architecture and user flow, we focused on our Website Importance Rankings and how to meet the goals, reduce the frustrations and include the social media preferences of our personas.
Design, Prototype & Test: She shoots…
We used whiteboarding initially for the app’s wireframing, information architecture and user flow and then evolved to a paper prototype and testing. After the first usability tests, we knew we were headed in the right direction. We produced mid-fidelities, performed A/B testing and tweaked again. Overall, usability proved our research findings and the revisions were small.
“I like this. It’s important. There’s a [charity donation site] and it was buried at the bottom — awful.” ~positive feedback on Give Once and Monthly on the same screen and at the top when in the donation process
“Ya, that’s exactly what I wanted.” ~preference for the Fundraising Goal infographic instead of stats on the home page
Lastly, we created a mid-fidelity desktop website, which proved successful on testing. We shared the app and desktop sketch files with Colin so he could apply his User Interface and newly designed Hockey4Youth logo.
Results & Considerations: She scores!
“That’s awful — $3,700.” ~reaction to what a family would have to spend for one youth to play hockey for one year
That’s steep to play a Canadian sport. Hopefully, the cost will be mitigated when the redesigned website and new adaptive app launch and positively influence donation behaviour by:
- meeting user expectation of content,
- improved user experience through easy navigation,
- increased brand awareness,
- and providing social proof.
Through our research, we also compiled a list of future considerations for Hockey4Youth to increase their donations and donor retention:
- Run a December campaign
- Continue to participate in November’s #GivingTuesday
- Engage donors through personalized Thank You and email updates
My Role: Head coach.
This project tapped into my organizational skills and ability to engage in crucial conversations.
To get our team acquainted, I initiated a round table on work styles, strengths and weaknesses. It went smoothly and everyone divided to conquer — building Trello boards, creating slack channels, organizing google drives and starting research. We had decided on a hybrid approach of waterfall, followed by agile, and it worked — for awhile.
After a couple days, I noticed disengagement, so I inquired and worked to resolve the issue.
Then, I noticed tasks falling behind, so I reiterate the project scope, lead regular scrums and provided hard and soft copies of everyone’s deliverables.
There were crucial conversations, escalations, negotiations and compromise.
Summary: A hat trick.
At the end of the three weeks, we are three designers that get along and have happy clients that want to pursue working with us. Hopefully, the result will be Hockey4Youth generating donations that surpass the $200K goal line.
