Mobile Interactive Experience for Stem Cell Donation


Project Duration

5 Months

Role

Product Designer/Product Owner

Team Involved

Developers, UX Designers, Artists, Animators, Marketing Strategist, PM

Client

Canadian Blood Services(CBS)

Contribution

Communicated with clients and stakeholders, led primary and secondary research, conducted interviews and prototype tests, created empathy map, persona, user stories, competitor analysis, user flow, created prototype iterations, animations, created video, business model and SWOT.


Project Overview


Problem

Stem cells, specifically blood stem cells, are immature cells that can develop into any cell present in the bloodstream. Stem cell transplants can treat over 80 diseases and disorders.

Primary Problem: CBS stem cell registry lacks donors from a target segment, 17 to 35 year old men from ethnically diverse backgrounds, to match the needs of stem cell patients.

Secondary Problem: It may take months or years for a successful match between a donor and patient. By the time a match is made, the donor has lost interest or cannot be located.


Abstract

A interactive mobile experience was developed for Canadian Blood Services to educate users about stem cell donation through. This interactive experience (playable ad), which aims to increase awareness and drive recruitment of 17 to 35 year old male stem cell donors from ethnically diverse backgrounds, may be utilized for multiple platforms. For this project, Facebook was chosen as the pilot platform to gain access to the target market. A lead in video for the playable ad was also developed according to Facebook specifications.


Agile Statement

FOR Canadian Blood Services
WHO wants to recruit more ethnically diverse male stem cell donors between 17 to 35 years old
THE playable advertisement is a mobile interactive experience
THAT educates the user about stem cell donation in an engaging way on his most preferred platform
UNLIKE traditional and online advertisements that only allow for passive viewing
OUR PRODUCT enables awareness and drives recruitment for stem cell donation.


Discovery


CBS Research

According to the resources provided by CBS, we got to know more about different types of stem cell donation and the processes, CBS's current system diagram and existing promoting methods.


Primary Research

In order to better understand the pain points of users, we interviewed 20 potential and current donors. Also, a survey was conducted with 48 male participants aged 18-35, with 90% of them from ethnically diverse backgrounds.

Goals
• Emphasize potential users' perception of stem cell donation
• Understand what will/not motivate them to donate(benefits, setbacks)
• Know what they want to see to be educated and encouraged
• Understand mediums of interaction and information absorption
• Know the main sources that affect their actions
• Get to know users' preferred social media platforms

I took all users' insights and quotes, tried to find like trends together, and put it together within an affinity map. Based on that, An empathy map was created based on that.


Empathy Map
User Survey
Takeaways

Perception: They know little about stem cell donation, and they want to receive more credible (long term) data.

Motivation: As they get older with more experience and injuries, they can empathize more with patients, so they are willing to donate if confitions perimt. But they want to build a connection with the patients and get updates of their recorvery and treatment process. A reward/recognition mechanism could also be a motivation.

Concerns: Pain, side effects, costs (time & money), process risks, surgery & chemical injected, and making existing medical condition worse.

Entertainment:They are active daily social media users, and this is the primary source that could affect their actions. Additionally, they are highly engaged with video & gaming experiences.


User Journey Map

User Segmentation

Non-registered 17 to 35 years old male from the following minor ethnic groups:

South Asian, Chinese, Indigenous, Black, Filipino, Arab, Latin American, Southeast Asian, West Asian, Korean and Japanese
Registered stem cell donor:
- first time donor who hasn't finished donation
- second time donor who is waiting for the second time donation


Objectives

After discussing with CBS marketing team(client), and according to CBS previous promotion experience, we realized that it’s going to be really hard to ask users to sign up as a donor directly, we can start with something that asks for small actions. Even raising awareness is pretty helpful. Also, we all agreed on moving forward with the social media direction. So we summarized the objectives for this project:

• To increase awareness and recruitment of CBS stem cell registry to 17-35 years old men from ethnic minorities in Canada(Conversion)

• To increase registered donors’ loyalty and commitment(Retention)

• Add more digital components to this project


User Stories

Secondary Research

Since this space of donation, no matter for money or blood, has been mature, our secondary research was conducted by analyzing existing successful digital solutions on the market to see what was successful and what could be improved. Furthermore, research was conducted to consolidate our assumption of users' preferred social media platforms. The two considered options were in-app/in-game playable ads or playable ads embedded into social media platforms.


Product Development


Solution & Reasons

A playable advertisement was shosen as the solution to educate users about stem cell donation through an interactive mobile experience. It aims to increase awareness, loyalty and drive recruitment of 17 to 35 year old male stem cell donors from ethnically diverse backgrounds, may be utilized for multiple platforms.

The main reasons are as follows:

Interactive & Engaging
• Allows users to interact without making a hard commitment.
• Has 47% more viewing time than a non-interactive ad.

Scalable and can reach the target group
• Majority of playable ads respondents are in the 17 – 35 age group.
• Can easily be implemented in various social media or game platforms.

Higher conversion & memorable
Conversion rates up to 7X higher than video ads.
• Even if viewers don’t click on an online video, just having the option to interact makes the ad 32% more memorable than non-interactive ads.

Technically Doable
• Social Platforms allows embedded interactive ads.
• Can be implemented with React.js library in a short time.


Platform Research

Once the team and stakeholders aligned on the solution, I did a a market research of the platform. However, there are only three social media platforms support embedded ads: Wechat, Facebook and Instagram. After taking all constraints into consideration, Facebook seems to be the most appropriate solution for now. Therefore, Facebook was chosen as the pilot platform to gain access to the target market. A lead in video for the playable ad was also developed according to Facebook specifications.


Competitor Analysis

And then, a competitor analysis of playable ads from the UX and content perspective, and got some useful insights:

Educational but minimal narration • Give users instant feedback • Users might resonate with the story morality with emotional storytelling
Sound effects provide immediate feedback and more immersive • Making it challenging attracts audience
• The suitable time length for the lead-in video is less than 15 seconds, and 3 - 4 minutes for the interactive experience, so audiences are more likely to watch until the end.


Script

After discussing with clients, there are 7 key points we wanted to emphasize in the product and we are going to make them into interactions for a better engagement and knowledge digestion.
• Only 25% of people will find donor their family
• Stem cells can be collected more in male’s body
Differences between regular cells and stem cells
Two ways of stem cell donation
• The process of donation
How much(if choose blood) can a person donate?
• Donation matching requirements

Then we started to brainstorm how to put them in a story as a team, converted them into clickable prototypes for testing. After two rounds of user tests, we got to know our users' preferred story styles and ways of interations.


Major Decisions

Some major changes were made to the content after 2 rounds of user tests and clients' suggestions from these aspects:

Storyline: Make it more clear and straightforward. Move forward with education story, add family elements

Interaction: Keep the interactivity. Improve the interactive quetsions and make it more emotion-provoking

Education: Include stem cells in the dialogues. Make content less childish and more appropriate to target age group.


Technical Implementation

After some research, we know that Facebook only accepts HTML and Javascript as the scripting language for playable ads and it also limits the product's size to 5 MB including assets. This restriction throws out Unity and other popular game engines because they cannot compile the pure javascript and they usually have a large build size. Finally we decided to use React.js as the UI library which allows us to reuse components, manage DOM efficiently, and develop in TypeScript. We use Framer Motion for page transition and element animation.


UX Design


User Flow

Testing & Improvements

For the lead-in video

For the interactive experience


Future Additions

Narration:
Reasons: Based on the users’ feedback, the voice of the narrator that explains each interaction is not needed. According to the speed of the user’s behaviour while using the app, the narrator’s explanation is hardly coherent. Sometimes, it may even result in an unpleasant experience. However, considering accessibility for blind people and other friends from the disabled community, this would be a friendly feature to include.
Recommendation:Add a voice control that can turn the narrator’s voice on or off for blind people and have a recognizable button displayed on the screen for others to have an option to switch it on and off.

Platform:
This prototype is based on the Facebook format due to our research, user tests, budget, and interviews. However, the playable ad is a relatively new concept to engage with the audience. There is enormous potential to explore this methodology and iterate upon the content on different platforms to hit other target segments. We see our prototype as a pilot example and encourage the next development team to implement the content based on the final deliverable on different social media platforms for future development.

Reward/Recognition:
Based on user interviews, having a rewarding machanism would be a great motivation for users to donate, same for this experience. Adding this mechanism and making it sharable will definitely raise awareness and increase conversion rate.


Product Strategy


Business Model

SWOT

Final Product

Captivating Lead-in Video

A brief lead-in video designed for Facebook was designed to evoke an emotional response from the user and invite him to tap on the video to access the full playable ad. Here are several iterations of that.




Final Lead-in Video




Creative Art Style

Clear and Simple User Interface

Engagement, interactivity, and commitment are the key to this prototype. We follow the CBS brand guideline to keep the entire user interface simple and intuitive for the user.




Various Interactions

A short introduction creates a smooth transition from the lead in video to the playable ad. There are seven interactions in the playable ad. Each interaction educates the user about stem cell donation in an engaging and entertaining manner. A hand cursor appears where the user is invited to click during an interaction. Simple gestures, such as tapping, swiping and scribbling, make for a fun mobile experience.





Back to Top