Personas
Overview
Problem
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.
Task
To design an app that will make the blood donating process easier and help patients find blood donors
Client
Ukrainian Blood Donation organization DonorUA
Users and audience
DonorHelp was created specifically for Ukraine. It targets people who want to donate blood or need blood donations.
My role
UX designer leading the app and responsive website design from conception to delivery.
Illustrations and images: starline, rawpixel.com, unsplash.com
Project duration
February 21 - March 28, 2022
Methodologies
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.
Constraints
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.
Tools
Figma, Jamboard, Maze
My process
Research
Secondary research
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.
Primary 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.
Pain points
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.
Problem statement
Dmytro is a software engineer who needs an easy way to schedule blood donations regularly because he wants to save lives and help people.
Problem Statement
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.
User journey map for a donor
User journey map for a recipient
Ideation
Creating paper wireframes
Refined sketches on paper
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.
Low-fidelity prototype
Low-fidelity prototype
To prepare for usability testing I created a low-fidelity prototype that connected the user flows of scheduling blood donation and finding a donor.
Usability testing
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.
UI kit for DonorHelp app
UI kit
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 for DonorHelp
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.
Accessibility considerations
1
All colors were checked for accessibility and correspond to WCAG AA standards.
2
The initial focus of the home screen on main CTAs defines the primary task or action for the user
3
Clear labels for interactive elements that can be read by screen readers
Responsive design
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.
Sitemap for DonorHelp responsive website
Sitemap
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.
Responsive website
Responsive designs
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.
Final solution
Outcomes, lessons, and next steps
Impact
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”
Lessons
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.
Next steps
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.
Let's connect!
Do you need a designer or have a product idea?