< Back

Case Study

HelpUkraine Donation Website Design

Design a donation flow for a humanitarian cause to support

The project is a part of Google UX Design Professional Certification Program

Role in the Project

UX Designer designing a donation website for HelpUkraine from conception to delivery.

The product

Help Ukraine is a charitable non-profit organization. The typical user is between 25-60 years old, and most users are career professionals with monthly income. Help Ukraine’s goal is to make donation process fast, easily and securely for all types of users.


Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.

Project duration

February - March 2022

Project Overview

The problem

Many people around the world want to help and support Ukraine against Russian Aggression. A lot of the donation websites are crowded with information and programs that can confuse and doesn't have easy access to donate fast and easy for Ukraine.

The goal

Design Help Ukraine website to be user friendly, easily, secure and fast donate money for Ukrainian people.


User research

I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs.

I discovered that many target users usually donate for charity through websites, especcially now. Many of them want easier and faster ways to donate. However, many charity websites are overwhelming and confusing to navigate and payment process, and not all of them they could trust, which frustrated many target users.

Pain Points


Charity website designs are often busy, which results in confusing navigation

2 Banking systems

Coudn’t find right banking system options for donation.


Too many steps to complete donation process

Persona: John

Problem statement

John is a busy business owner, who needs to easily, secure and fast donate money for Ukrainian people because he wants to help people from Ukraine to survive the war.

Persona: John

User journey map

Goal: transfer money fast, easily, and securely to help Ukrainian people as soon as possible


Create sitemap

Difficulty with website navigation and donation process were the primary pain points for users, so I used that knowledge to create a sitemap.

My goal here was to make strategic information architecture decisions that would improve overall website navigation and user flow. The structure I chose was designed to make things simple and easy.


Paper wireframes

Next, I sketched out paper wireframes for each screen in my app, keeping the user pain points about navigation, banking systems, and checkout flow in mind. The home screen paper wireframe variations to the right focus on optimizing the browsing experience for users.

Digital wireframes

base screen design

Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy.

Digital wireframes - mobile design

Low-fidelity prototype

To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of moving between pages, sign in /sign up pages, creating a profile page and editing it, and donation page with 3 steps of the donation process.

View the HelpUkraine low-fidelity prototype.

Usability study: parameters

1 Study type:

Unmoderated usability study


United States, remote

3 Participants:

5 participants

4 Length:

20-30 minutes

Usability study: findings

These were the main findings uncovered by the usability study:

Create account

Users need faster way to register account

Donation flow

Users were confused about choosing and navigating banking system icons.


Users need multiple language options to choose their language for better understanding and user experience


Refining the design

To make the donation flow faster for users, I added the most popular banking system icons with text bigger.


Refining the design

Based on the insights from the usability study, I made changes to improve the site’s accessibility and add multiple language options. This allows users all around the world to use this site and understand the content of the site.


Refining the design

To make creating an account faster for users, I added the SIGN UP WITH FACEBOOK button

Mockups: Original screen size

Desktop High-fidelity prototype

My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study.

View the HelpUkraine high-fidelity prototype for desktop

Mockups: Mobile Design

Mobile High-fidelity prototype

My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study.

View the HelpUkraine high-fidelity prototype for mobile devices

Accessibility considerations

1 I used headings with different sized text for clear visual hierarchy

2 I used landmarks to help users navigate the site, including users who rely on assistive technologies

3 I designed the site with alt text available on each page for smooth screen reader access



Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.

What I learned

I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.

Next Steps

1 Conduct follow-up usability testing on the new website

2 Identify any additional areas of need and ideate on new features