Bloodworks Northwest - Mobile App Design 

 
ROLE

UX Researcher/Designer

TEAM MEMBERS

Michelle Chen

Yuqi Feng

Yi Hu

Yifan Wu

DURATION

5 months (January - May 2019)

DELIVERABLES

By the end of this project, I had produced the following deliverables:

  • SWOT analysis and presentation at Bloodworks

  • Survey (2 forms)

  • Interview (3 sessions)

  • Wireframes Sketches

  • Wireframes (Figma)

  • Interactive high-fidelity mockups (Figma)

  • Usability testing (3 studies, multiple sessions)

  • Project Presentation at Bloodworks

  • Bloodworks Consulting Project Report

Context

As part of the Young Leaders Program under the Greater Seattle Chinese Chamber of Commerce, I participated in an internship project with Bloodworks Northwest, an independent, non-profit organization that provides blood supply to more than 90 Northwest hospitals. I worked in an interdisciplinary team, and our goal was to create a digital product to encourage blood donations in Seattle's local Chinese community (article). With my UX background, I led the user research phase in the team.

The Problem

According to Pew Research Center and Bloodworks Northwest Market Research Data, there are about 119,000 ethnically Chinese individuals in Seattle. Despite their strong population presence, only less than 0.05 percent donated their blood in 2017. Blood donation from the Chinese community is insufficient, and Bloodworks wants to attract more young audiences to donate in the Greater Seattle Area. Our goal is to understand young Chinese people’s perception of blood donation and create a digital solution to help encourage donations. We choose to focus on college students because they have a longer donation span and are more open to learning about blood donation.

Our design question is:

- How can we raise awareness about blood donation in the college student population and encourage donations in the Chinese Community?

Approach

I focused on designing the mobile eligibility check. To come to these solutions, I suggested our team to utilize  the User-Centered Design process, which enabled us to understand user needs and provide design recommendations and guidelines based on what we found from user research.

General Research

Background Research (SWOT Analysis)
In our product, we also responded to company needs by conducting the SWOT analyses on the company's background. To understand the current efforts and challenges Bloodworks is facing, I discovered findings of the company in the SWOT categories (strength, weakness, opportunity, and threat) and ranked them based on how well they aligned with the goals, priorities, and concerns of the Chinese community. 

Overall Findings

SWOT on the Company Brand

Bloodworks Northwest is the sole provider of blood to most hospitals in the Greater Seattle area and has built a large network of volunteers. As the company expands with a higher demand for blood, it faces challenges in the lack of brand awareness and donor diversity

 

SWOT on the Mobile App

Bloodworks’ current mobile app allows blood donors to schedule/remind an appointment at a blood drive location, as well as providing a community tracking/competing system to encourage donation. However, the app is not widely used and contains technical problems that can prevent users from completing the above tasks. Additionally, most features on this mobile app are not intended for new donors

Conference Meeting

Additionally, I had the opportunity to represent my team and discuss our team’s SWOT findings with leaders from Bloodworks. I also learned about the company’s current efforts in promoting blood donation in the Chinese community, which helped us to have a better understanding of the community we are working with. 

User Research

We conducted user research within the University of Washington in Seattle, collecting information about both the local Chinese Americans as well as international students who are native Chinese speakers.

Survey

I outlined a survey (received 57 responses in total) that aims to understand Chinese college students’ motivation, experience, and knowledge in blood donation.

Key Findings

Among the 57 responses, the highest voted reasons for not donating blood are “not eligible due to status” (32.6%), “no time to donate” (32.6%), and “security/trust concerns” (26.1%).

Interview

From our survey findings, I outlined the overall structure of the interviews (semi-structured) and conducted 3 interviews to learn more about individuals’ blood donation experience. The interviews helped us gain a deeper understanding of Chinese students’ knowledge and experience relating to blood donation.

 

Key findings

77.8% (7/9) were unsure about their eligibility. Many of our interviewees were international students, and some of them assumed they are not eligible to donate due to their identity/status, and never thought about donating or seeking out relevant information about donation.

 

“I know that my health condition meets the requirement of donating blood, but I don’t know if I can donate in the U.S due to my status as a Chinese citizen.” – Participant 5.

 

Additionally, participants were unable to find out about their eligibility prior to donation. Online information is insufficient for them to determine whether they are eligible to donate immediately. One of our interviewees commented:

 “When I arrived at the Bloodworks donation center, they told me I couldn’t because I was in a country that is at risk of Malaria. I wish I had known about it before I arrived there.” – Participant 8

Design Requirements

Overall, taking from our survey and interviews, we discussed during team meetings and came up with two design requirements for our digital solution: educating people about blood donation, as well as addressing people’s uncertainty about their eligibility.

Ideation

We held brainstorm sessions to come up with as many concepts as we could for our design:

Raise Awareness - How might we encourage students to think about donating blood?

Provide Access - How might we provide an easier way for students to learn about their eligibility?

Improve Efficiency - How might we reduce the time to find out about eligibility information?

Encourage Transparency - How might we promote a transparent blood donation process?

Educate - How might we clarify misconceptions about blood donation?

Enhance Autonomy - How might we empower students to learn about blood donation on their own?

Facilitate Tech Adaptation - How might we make the technology easy to adapt and use?

The above concepts culminated in a pre-donation eligibility check feature to be implemented on the current website. The main function is enabling users to check their donation eligibility online and learn about it in advance, before arriving at the donation center. 

Meeting with our PM

Sketches

We decided to focus on designing a mobile version to improve accessibility and mobility of this service. In my sketches, I brainstormed an intuitive, engaging process that asks questions about donor eligibility and would help clarify confusion and provide important information regarding blood donation requirements.

Initial sketches

Wireframes

Wireframes were helpful for mapping out the overall flow of the eligibility check. The check begins with demographic questions for narrowing down to a specific set of questions applicable to the user. I included the progress bar at the top of the screen to provide users guidance. After answering all questions, the user will be directed to a page explicating the details of their result/eligibility status.

Wireframe tracking the simple flow of screens and different results

Usability Testing

After our first iteration of the design, we hosted 3 usability testing sessions for the eligibility check. We encouraged participants to think aloud while performing the tasks so that we understand what part they were struggling with or what steps were confusing. After debriefing with participants, we refined our wireframe design based on the feedback.

 

Key changes from usability testing:
 

  • Explain unfamiliar terms

  • Provide more detailed reasoning for the eligibility result at the end

  • Improve terminology to be more descriptive

Design

High-fidelity Mockups

The team and I created high-fidelity interactive mockups, which would simulate what the real experience would be like in finding out about one's eligibility.

High-fidelity screens on Figma

Here are 4 unique features about this eligibility check. 

1. In the first screen, we are showing the impact and importance of blood donation. This intends to educate our users about the power of blood donation and encourage them to make an impact.

 

2. This screener page collects basic demographic/biological information about the user, such as age, gender, and weight, which can be used to filter out questions that are not applicable to the user. This feature would shorten/simplify the overall process.

3. The questionnaire page includes a question about the country of travel within the past three years. This design addresses the issue that students were unsure about their eligibility due to their travels. The input country(s) will be assessed on its risk to Malaria, a major eligibility requirement.

4. The last screen demonstrates a feature that clarifies and explains unfamiliar terms, including a Chinese translation implemented throughout the test to help users understand the term better and answer questions confidently and efficiently as they go through the questionnaire. 

In our final design, we included three possible result scenarios:

 

1. The user meets all the donation requirements and the design would inform the eligibility to donate, providing links to donation services.

2. The user does not qualify as a donor by the provided information, and the design would provide reasons and suggest actions to take for the person to become eligible. Besides, the design would recommend other actions that the user can take to help support the blood donation effort.  

 

3. The eligibility check cannot determine the user’s eligibility due to complicated or unknown conditions, (such as countries with unknown risk to Malaria). The design would provide the user methods to contact Bloodworks for more eligibility details, and offer other services that would help support blood donation efforts.

Three results of the eligibility test

Having this convenient pre-donation eligibility check helps save the potential donors’ time on the day of donation, which would improve the overall donating experience. It also avoids unnecessary trips to the donation center if the potential donor ends up not being eligible to donate. Users would be able to learn about eligibility requirements using this feature. Moreover, with the debrief and suggested actions, they are encouraged to seek out ways to become eligible donors.

Reflection and Next Steps

Our team presented our 5-month internship project at the Bloodworks Northwest Research Institute. We shared potential solutions backed by our research data for engaging this population as well as improving donor diversity overall. I presented the final deliverable of the pre-donation eligibility check and explained our design concept and key features. Overall, we received great responses from the company leadership as they were impressed with our design. 

From this project, I learned that it is crucial to provide sufficient context in our design, so users would be able to navigate on their own when completing tasks. Usability studies, in this case, were extremely helpful to let us learn about which areas needed improvement on descriptiveness or clarity. We learned to prepare for cases where users may be confused, and provide them with immediate feedback and/or guidance.

I presented our design at the Bloodworks Northwest Research Institute

Next Steps

If we have more time, I would:

  • Design the process after the “eligible to donate” result to encourage actions in donating blood, such as showing the steps it would take to save lives

  • Possibly reorganize the set of questions asked to be more intuitive for the user

  • Add more definitions of unfamiliar terms/refine and improve terminology

  • Improve the visual design and the font hierarchy, such as by increasing font size and reducing the number of questions on each page

  • Conduct more usability testing on the final design to see how the process can be improved