"Donations save lives!"
Blood donation app and responsive website
Ukrainian blood banks provide patients in hospitals with free blood transfusions but oblige them to find donors and replenish blood donations in blood banks. It is quite hard to find blood donors, so many people turn first of all to their friends and relatives asking to donate blood for themselves or their family members, which is not always possible, especially if multiple blood transfusions are needed. At the same time, people who would like to donate blood often face difficulties and frustrations in scheduling their visits to blood centers.
To design an app that will make the blood donating process easier and help patients find blood donors
Users and audience
DonorHelp was created specifically for Ukraine. It targets people who want to donate blood or need blood donations.
February 21 - March 28, 2022
User interviews, personas, user journey maps, user flows, paper and digital wireframing, low and high-fidelity prototyping, usability studies, affinity diagrams, data synthesizing, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
The primary challenge for this project was time constraints and limited resources. It started during the war in Ukraine, and at the same time I had to urgently evacuate from Kyiv. That's why I had very limited time and often didn't have the necessary resources like a working place, electricity, and stable internet to continue working on the project.
Figma, Jamboard, Maze
I started my work from secondary research. I searched for information on the internet and learned about the process of blood donation in Ukraine, eligibility requirements for donors, as well as the stages and procedures connected with blood donation and transfusions. Because of the time constraints, instead of conducting a competitive audit later in the process, I searched and analyzed the competitors' websites and apps and read user reviews as a part of secondary research.
After the secondary research, I used the data from it to develop interview questions, which were then used for qualitative research. I recruited and interviewed 5 users aged from 18 to 65 who have experience of blood donating or have looked for blood donations (for themselves or helped someone to find donors) in the past.
Most of the users expressed their desire to continue donating and saving lives but at the same time complained about the complicated and inconvenient process of scheduling appointments by phone, unclear procedures, and lack of information. The users who have been looking for blood donations in the past emphasized difficulties in finding blood donors, lack of transparency of the process as well as fears and high levels of anxiety connected with blood donating.
Based on research I was able to distill major pain points:
For donors: No specialized app for donating; no reminders, when it's time to donate again; no history records; hard to find convenient time slots; no personal connection with recipients; lack of information and encouragement.
For recipients: No direct access to blood donors when needed; lack of information and transparency about the process; lack of information on the quality of blood.
Personas and problem statements
Based on the interviews I set up two personas. I referred to them throughout the entire product development process.
Dmytro is a software engineer who needs an easy way to schedule blood donations regularly because he wants to save lives and help people.
Olesia is a teacher and mother of two kids, who needs an easy and quick way to find blood donors for her sick relative because they need blood donations regularly.
User journey maps
I mapped out the users’ steps to see how I could simplify their journey to help them reach their goals with the product.
Creating paper wireframes
I usually start creating wireframes from sketches on paper. It allows me to iterate quickly on many design ideas. I sketched out paper wireframes for each screen in the main user flow in my mobile app. The crazy 8 technique helped me to refine my ideas for each screen on paper.
Moving from sketches to digital wireframes
After creating paper wireframes I turned them into digital wireframes. I made sure that the designs of my wireframes were based on the data obtained during primary user research and that they addressed major pain points of users.
To prepare for usability testing I created a low-fidelity prototype that connected the user flows of scheduling blood donation and finding a donor.
Testing low-fidelity prototype
To test my early concepts, I recruited 10 participants and conducted a remote unmoderated usability study.
The usability study allowed me to gain a deeper understanding of how users felt about my app. I came out of it with several valuable insights:
Changing texts on CTA buttons from “Sign in” to “Sign up” on the registration page is necessary.
More information (reviews, working hours, closest blood center from current location, rating) about the blood centers should be added.
The return button should be added to the registration pages.
Users want to be able to have two accounts – donor's and recipient's – and switch between them easily. View the Usability Study presentation.
Mockups and high-fidelity prototypes
Based on the insights of the usability studies I applied design changes like correcting texts and CTA buttons on the registration page, adding more information about blood centers, and return buttons on the registration pages.
Additional design changes included adding the ability to create two accounts – donor’s and recipient’s – and switch between them easily.
To keep consistency throughout all my designs, I created a UI kit identifying different types of UI elements and styles used in the mockups.
High fidelity prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study. View the high-fidelity prototype.
All colors were checked for accessibility and correspond to WCAG AA standards.
The initial focus of the home screen on main CTAs defines the primary task or action for the user
Clear labels for interactive elements that can be read by screen readers
Working on different screen size variations
To provide an accessible and equitable user experience for all users, I started to work on a responsive website to fit screens of different sizes.
With the app’s designs completed, I started working on a responsive website. I used the DonorHelp sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
The designs for screen size variations included mobile, tablet, and desktop. I optimized designs to fit the specific user needs of each device and screen size.
The users shared that the design was intuitive to navigate through, engaging, easy to use, and demonstrated a clear visual hierarchy.
“Very easy to use”
"Everything worked the way it should”
“Easy and straightforward!”
“It is easy and appropriate. Nothing to change”
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.
Another important lesson for me is that it is very important to be flexible and adapt your working process to the needs of the project and time or budget constraints.
I also learned that thorough planning and prioritizing sometimes can help overcome or ease such challenges as limited time and resources.
Conduct research on how successful DonorHelp is in reaching the goal to make blood donating and looking for blood donors easier.
Conduct follow-up usability testing for the app and responsive website.
Test and Iterate for accessibility for different user groups.
Ideate new features in the app and responsive website.