BloodLoad
A mobile app that helps find a donation near you.
Overview
When I first think of blood donation, I immediately want think that I will not have time to do a donation. As a person that works in the medical field, it has come to my attention that blood donations are crucial.
The Problem
As a medical worker, I have seen that not enough people are donating blood. This puts many people that need blood at risk for survival. Many donors do not know where to start with their donation or make time for a donation.
The Solution
Bloodload is a mobile app solution that is a resource for finding blood donation locations as well as streamlining the process of becoming a donor.
Duration
6 weeks
Tools
Figma
Miro
Invision
Google Suites
Otter.ai
Role
UX Research, UX Design, UI Design
Process
Research
Ideation
Sketch
UI Design & Prototype
Usability Test & Synthesize
Redesign
1.1 Secondary Research
Through my secondary research, I realize that many people are afraid to donate their blood due to other people’s experiences. Not many people have the knowledge they need to feel comfortable with their donation. Red Cross has many policies that discriminate against certain people. According to an informational page by the University of Maryland Medical Center, the number one reason why people do not want to donate is because of the fear of needles. People that have fear of needles have a higher chance of passing out during donation.
1.2 Screener Survey
After my secondary research, I wanted to recruit interviewees to learn more about how they feel about donating something that is part of them. I turned to social media, sent out a screener survey, and got 30 pieces of valuable feedback. The purpose of the screener survey was to talk to people that have stopped donating. The surveys helped me determine what was stopping someone from donating.
1.3 Interviews
From the 30 responses, I interviewed 5 people about their attitudes towards donating blood. I used Zoom to conduct these interviews remotely. One common thing found during the interview was that many did not have the time to donate.
2.1 Affinity Map
I generated the affinity map from the interviews. Some keyword I found is that people do not know how to make time for a donation. This is what made it difficult for someone to donate blood. Not many people were educated on how life-saving the donation will be for someone.
2.3 Empathy Mapping
I was able to wrap people’s thoughts around what is stopping them from donating. This helped me create one persona. I was trying to identify why people do not become regular donors.
2.4 Personas
After a deeper look into my empathy maps, I was able to create one persona. This persona's name is Nora. She is an MA while attending nursing school. She does like to help her community and wants to make a change. Her Blood type is O- and her blood is rich at Red Cross due to her protein spike.
3.1 Ideation
All the research and synthesis provided me with enough insights to start sketching to generate ideas and tackle users’ problems.
3.2 Site Map
I identified and mapped out the key features that my app needed to include. The sitemap made sure all information, function, features, and screens were in line. The site map helped me see what key features my app needed to include. This helped me follow every function a user might use during the interaction.
3.3 User Flows
I created three essential red routes that were the most important to my app because users would use these paths frequently. User flows help me see how users can achieve their intended goals.
3.3 Sketches
Sketching helped me explore different approaches for users. I want to make the app user-friendly. By referring to my user flow chart I was able to focus on how to make this app straightforward to use.
3.4 Wireframe
I started to create wireframes based on my sketching to see how everything plans out. This helped me prioritize what information goes where. I used greyscale to help me keep an easy eye on my work.
4.1 Brand Platform
I wanted to maintain a calming, adaptable, brave, helpful feel so that the user can have a better experience during their donation.
Company/Product Name
Bloodload
Mission/Vision
Everyone should feel safe when wanting to donate blood. They should have access to the right resources and ask for the right help.
4.2 MoodBoard
I then created this MoodBoard that fits my Brand Platform. I primarily want Bloodload to be cheerful and approachable, and I want it to reflect users’ real lives. This step helped me to envision the aesthetic and colors of my final design.
4.3 Style Guide
Here I chose fonts that had good visibility, colors that had good contrast in addition to a clear call to action buttons for clear and easy navigation.
4.4 High Fidelity Screens
This ties back with my brand platform because it is adaptable for many users. As well the app is helpful and will help donors get the information they need to become amazing donors. I did not want to reinvent the wheel so I tried to keep it user-friendly like every other app.
5.1 Prototype
I created a clickable, interactive prototype in inVision using my hi-fidelity screens. I assembled the 3 red routes and tested them myself before using them in usability tests. I made sure the testers could navigate through all the red routes easily and intuitively.
5.2 User Testing
Test Parameters:
Type: Unmoderated
Location: Remote
Duration: 20 min
Number of Participants: 5
Task:
How can you find the nearest blood bank that is closest to you?
Usability Testing Round 1 Findings:
Some issues that occurred during the usability testing were trying to go back home and being able to see information about a location. Users could still navigate during the testing but it took them time to figure out how to get home. Users also had trouble getting more information about a place because it was a tap feature and not a swipe-up feature. Many maps apps do not have a tap feature, they have a swipe-up feature to see more information.
Usability Testing Round 1 Findings:
Some issues that occurred during the usability testing were trying to go back home and being able to see information about a location. Users could still navigate during the testing but it took them time to figure out how to get home. Users also had trouble getting more information about a place because it was a tap feature and not a swipe-up feature. Many maps apps do not have a tap feature, they have a swipe-up feature to see more information.
Key Learnings:
I used Miro to categorize the user feedback, this helped me organize them. Many of the users were able to get to the task they needed. The only task that users were having trouble with was going back to the home page. The “home” tab was named “personal”. It was easier for the users to navigate back if the tab was named “home”.
Redesign
I gathered the feedback I received from the usability testing and after careful analysis, I made relevant improvements to reach my final UI design.
Solution
I have changed the "personal" tab to a "home" tab to make it easier for the user. This will help the user get home by knowing which one is the home tab.
6.1 Takeaways
Impact:
The app makes users feel more personal about their donations.
User-friendly and beginner-friendly allows all types of users to experience and join the application.
One quote from peer feedback: " I love how simple it is to make a donation appointment. I can see myself making more donations."
What I learned:
I learned about the importance of research and iteration and how my initial designs can transform with any feedback I can receive.
Next Steps:
Conduct an additional usability study to gauge if user needs have been met.
Revisit visual elements and see if there is room for improvement in both design and accessibility.
Conduct additional usability studies to see if there are more needs to be met.