American Red Cross
The American Red Cross mobilizes the power of volunteers and the generosity of donors to prevent and alleviate human suffering in the face of emergencies. To continue successfully fulfilling its mission, they needed a mobile app that invests in the wellness of underprivileged neighborhoods.
The Problem
The organization faces a challenge to induce African American donors into clinics and blood drives for blood donation nationwide in neighborhoods that are in the utmost need.
The Goal
To reach the African American audience and inspire them to donate blood for a good cause by conceptualizing a mobile app that would make donating blood easily accessible to them.
Client: American Red Cross
Category: UX/UI Case Study
Timeframe: 2020-2021
Role: Visual Designer
Understanding the User
The Story
The African descent carries an antigen within their blood that is critical to helping others of African descent in recovery when blood transfusions are necessary. Blood donations from African Americans and others of African descent are at a critical low due to the lack of education, skepticism, and religious beliefs factoring in regards to donating blood.
Patients with rare disorders such as sickle cell disease, require blood that comes from donors that do not have C, E, and K red cell proteins. If a donor does not have these proteins on their red blood cells, their blood is reserved for transfusions for patients with sickle cell disease. Fifty-five percent of African Americans are CEK-negative, compared to less than 1% of the general population.
The Idea
The organization is currently running a campaign to raise awareness for this need. For us to expand on this awareness and reach more of our target audience, the research team came up with the idea of creating a specific app for African Americans to locate where they can donate blood.
The app will include a homepage, a map, a sponsor list, and more. I was given the task to focus on creating an intuitive map that includes data on where African American donors are lacking and thriving within different area codes.
Starting the Design
Paper Wireframes
I started the design process by sketching out wireframes which consist of four different tabs which include Home, Map, Sponsors, and More. The American Red Cross has a set of strict guidelines when it comes to creating digital products so I mainly stick with it throughout my design.
Low-fidelity Wireframes
I continued the process by transferring the ideation from the paper wireframes into digital low-fidelity wireframes as well as the prototype to make sure the user flow is consistent throughout.
Once the low-fidelity wireframe and prototypes were approved by the internal team, I started gathering the assets that I needed to start building high-fidelity mockups.
Refining the Design
High-fidelity Wireframes
Once the low-fidelity wireframes and prototype were approved, I continued refining the design and the user flow. I moved on with transforming the low-fidelity wireframe and prototype into its high-fidelity version.
Iterations
We had a few iterations in creating the interactive map as it was a challenge to visually present the information for each area code. We’ve color-coded each zip code to easily identify where the highest and lowest blood donations are. We added a legend at the bottom section of the interactive map to identify what each color represents.
The design started with a color block covering a whole area that is within a zip code, but we figured right away that this will hinder the user to see the overall map. Once the user taps on one of the color blocks, a card swipes up from the bottom section to reveal details of that area. However, the internal team suggested changing this from vague information to identifying the specific establishment or location.
Final Mockups
The approved final interface is very similar to the first few iterations with just a few design changes that are a bit more engaging and user-friendly. The color blocks were updated to scattered dots throughout the map which easily identifies the locations where African-American donors can go to donate blood. The dots still showcase the number of donors within the vicinity through colors, which can be useful when a user wants to know where the least amount of donors are to donate blood.
We’ve also updated the information cards to be more useful and helpful. The card now identifies the specific location within a neighborhood and presents data on how many donor counts there are within the African-American community. The placement of the card has also been updated to fully point where the information belongs by using a larger space within the frame to accommodate all of the details.
Takeaways
As a visual design volunteer at the American Red Cross, being part of an incredible team focused on impacting the lives of others for the better is near and dear to my heart. I learned so much collaborating with the organization’s researchers, developers, and data scientists in bringing this project to fruition.
This project also gave me the chance to experiment with some of the new Adobe XD features as well as narrowing down my creative process. Although I was not able to fully flesh out other features and designs that I wanted to within this app, due to time constraints, it’s not to say I won’t try to incorporate them in future projects down the line.