CFCC: The Donation Journey

Educational interactive storyboard on Figma to gamify the donation process and retain donor interest while explaining the core goals and initiatives of the CFCC charity

Comment

Inspiration

Our team was inspired to create a gamified donation process and storyline for CFCC when we thought about how we could make charity donations memorable and exciting. Thinking back, we all struggled to remember which charities our families had donated to and which of those we consistently supported. The ones we did remember had either a significant and easily relatable cause for donation or we had fun in the donation process. For example, World Vision has you choose specific initiatives to support, and that made donating funds to a cause more impactful to us because the problem became more personally relevant and we could imagine the impact of our actions. We wanted to emulate this with CFCC.

What it does

Our storyboard educates donors on CFCC initiatives and goals in an easily consumable, engaging storyline. Viewers get to immerse themselves in establishing a Community Food Center (CFC) and its impacts on individuals in that community in a vibrant, exciting illustrative journey. Throughout the story, users enter their donation and contact information. In the end, they are met with a happy ending for the community and a map of Canada with the next CFC destination. Each time a user chooses to donate, they get an interactive infographic on a new CFC and its community impact.

How we built it

We first sketched out our storyboard based on research from CFCC's website. We picked one of their first CFCs to be the initial donor story. Then, we flushed out our ideas for each page and started bringing the vision to light with Figma. From a change to the website's main page to interactive games, we gamified the donation process in a bright, engaging illustrative infographic.

Challenges we ran into

Our biggest challenges were with the more complex features in Figma to make the infographic interactive. For example, we wanted an interactive text box on our demo page to show the entering of personal information, which took significant time and experimentation to accomplish. Additionally, we wanted to be able to use buttons to change the frames for the user to move at their own pace.

Accomplishments that we're proud of

Firstly, we are proud of finishing the storyboard donation process! Our team feels that it accurately represents CFCC in a method of presentation that makes it exciting to learn about the charity and easily memorable. We were also able to maintain a healthy balance between working, attending workshops, and having fun. Our team was made from the team-formation channel in Discord, so it has been great getting to know everyone and we are proud of that, too.

What we learned

Our first learning was that Hackathons don't always have to be super technical. When looking at the prompts, our team immediately began trying to find ways to force code into our ideas. After putting that thought process aside, though, we came up with some really cool ways to re-imagine the donation process! Although we did not launch a website or code an app, we still all got to learn new Figma skills throughout the process of our hack. Some of the most exciting new tools we learned to use were prototyping, where we created flows and mapped out the user journey, text input fields for user entry, and buttons with overlays to direct users to the appropriate webpage. In the end, we had multiple iterations before arriving at our final product, and the prototyping allowed us to gather user feedback to pivot our approach.

What's next for CFCC: The Donation Journey

The storyboard we built for this hack is just the beginning of what we imagined as a solution for the donation process. We'd love to have more exciting storyboards featuring all the CFCs in Canada, each one unlocked after a donation to keep donors returning.

Built With

  • figma
Share this project:

Updates