World Vision Canada

UI Designer

2024

To design an emergency response product that gives real-time updates and speeds up the donation process during a crisis.
Emergency Response Home screen
Emergency Response Home screen

The big challenge

World Vision Canada faced challenges with their emergency appeal system, which required improvements to enhance user engagement and streamline the donation process. This caused them to miss critical moments to connect with donors during emergencies.
Their goal was to put donors at the heart of their strategy, speed up the emergency appeal process, and maximise their reach. I was tasked with designing a completely new appeal page and donation flow that could be quickly updated with emergency information and easily receive donations.
Map with location pins
Map with location pins
Map with location pins
World Vision in action
World Vision in action
World Vision in action

The approach

Key insights from the research and discovery phases were found, learning how different audiences respond to emergencies. We identified two key observations - those preferring numbers and data, and others connecting more deeply with personal stories and imagery. These insights helped shape the strategy, ensuring the platform could engage donors on an emotional and practical level.
Following these observations, I developed visual concepts and tested these on users to see why they might or might not work. To validate the approach further, I created a prototype to demonstrate the Minimum Viable Product (MVP) to illustrate the entire donor journey, from initial engagement to the final donation.
We tested this prototype with real users, gathering feedback to refine and perfect the experience, ensuring it was intuitive, and would provide optimum donor conversion.

How did it look?

I was tasked with developing a new digital design system, which involved a brand refresh. We kept the original logo but revisited all typography, colour and icons. Echoing the logo of sharp corners with rounded edges, new icons and badges components were designed. A fully tokenised entire design system was then set in place.

The outcome

By streamlining the emergency appeal process, I helped World Vision Canada become more agile in their response to humanitarian crises.
  • Steps in the donation: journey simplified from 5 steps to 3, making it quicker for donors to contribute.
  • Time to market for the online appeal page: reduced from 6 days to 3 hours.
  • Mandatory fields in the checkout process: reduced from 14 to 8, lowering friction and improving user experience.
  • People involved in launching an appeal: cut from 23 to 7 people, speeding up internal approval processes and reducing overheads to deliver.

Lumen

To guarantee that all components and patterns remain aligned at all times, Lumen’s Figma design system file is in-sync with the Zero Height documentation

Home screen

I also worked on the redesign of certain parts of the main website. For ease I will only show you sections of the home and topics page.
Interchangeable stats and facts component cards help World Vision Canada create adaptable content. These elements were designed so they can be used interchangeably depending on the information being conveyed. Different containers were also designed for the interchangeable cards.

Topics screen

Topic cards present details about a single topic, making it easy for users to quickly find important information and take action. The entire card is clickable. I designed the topic page to use cards with a hug height which depends on the content, thus creating a Masonry grid for visual effect.
The topic pie chart is a container to show topic popularity. Individual topic emblems were designed to visualise different messages relating to each topic.

Lumen

I worked on creating a comprehensive design system called Lumen. It’s a single source of truth that aligns all World Vision Canada’s digital products. This is a living system and evolves as World Vision Canada’s digital products grow. It’s all documented in Zero Heights
Industry
Charity
Platforms
Web
Role
Design Direction
UI Designer
Prototyping