The American Red Cross prevents and alleviates human suffering in the face of emergencies by mobilizing the power of volunteers.
The American Red Cross, through its strong network of volunteers, donors, & partners, is always there in times of need. We aspire to turn compassion into action.
Digging deeper into the problem we discover that only 13% of the American population donates blood.
the ratio has stayed consistent from 2001 to 2020
Our journey to help America Red cross began here. We started with a list of assumptions based on the problem space during our research period to solidify the direction we wanted to take during the project’s first phase.
We performed a decontextualized method to conduct the interviews. We wrote an interview guide to collect qualitative data to ensure we were prepared with thoughtful and relevant questions. While conducting research interviews, we hoped to discover common pain points, motivations, and behaviors among users so that I could find opportunities for design intervention.
After the interviews were conducted, We went back into the transcripts to find key data such as pain points, motivations, and behaviors. For each participant, we organized the categories and extracted Insights.
Armed with primary and secondary research findings, we ask a question to help guide us through this problem and keep the focus on our goal.
After reviewing all the insights from the interviews, we were able to create a primary persona that represents and personifies the core attributes of an identified target user. This gave us a clear picture of different users’ expectations, pain points, and needs, and how they would potentially use a product solution.
On the Ui board, we did some competitive research as we got the UI inspirations. We gathered all the ideas that we liked.
For example: encouraging new donors with a super-friendly and clean interface
we looked at the current American cross-app and the largest issues were:after booking an appointment, the app redirects the user to a call page in order to obtain the confirmation which is very inconvenient
Referencing our UI inspiration Board, we began sketching the preliminary layout and interface. For exploratory sketches, We used the crazy 8 methods to produce a wide variety of exploratory sketches
In 8 minutes we produced 32 sketches.
Based on our UI inspiration board we sketched many variations of screens. We brainstorm about what our user needs and then we create user low-fi wireframes.
Now that we had a working prototype, We wanted to test our design and functionality so far.
User testing allowed me to gather real-time feedback in an unbiased environment so we could implement changes to my prototype that enhance the user experience.
We plotted the most pressing changes in the priority matrix using the feedback we got from the usability test with the lo-fi.
The biggest change of all was with the appointment section. as you can see on our low fi, the number of time slots and info was overwhelming. We have collapsed all that the time slots will only appear when you select a date.
Let’s get to making those appointments. You can follow along too!
If you’ve got the Figma mirroring app, feel free to scan the QR code or click on the link above.
After implementing all those steps from the low-fi all the way to Hi-fi and implementing all the feedback collected from the usability test phase, we have gone forward with our website marketing.
Now is the time to show you our design system. We created a small design system (Library) that would not only build consistency but also save time for the client as they build new features. This will improve the overall process and experience for the App.
I'm Enrique Magno — a designer who works pushing creative boundaries.