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.