CBS Playable Advertisement


Timeline

May-Aug 2020

Role

UI/UX Designer, Animator

Teammates

YiHsin Feng, Jaymie Pizarro, Senhung Wong,Farhan Kassam, Amber Yuan, ShyenYi Low

Client

Canadian Blood Services(CBS)


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 specific segment, specifically 17 to 35 year old men from ethnically diverse backgrounds.

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.


Solution


A playable advertisement was developed to educate users about stem cell donation through an interactive mobile experience. For this project, Facebook was chosen as the pilot platform to gain access to the target market because 89% of 18-34 year old male Canadians used Facebook as their social media platform. A lead in video for the playable ad was also developed according to Facebook specifications.


User Journey


We designed this user journey based on a variety of user tests, data analysis, qualitative interviews, and observation. We understand our target users are internet and social media users. There are eleven steps that the user will go through, each step will be described comprehensively.




Features


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.




Technical Requirements


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.



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.





Prototype Demo