Portfolio About Contact

Product Design

Vaccine Chat with Dr. Joy

An Interactive Solution to Public Vaccine Hesitancy

Project Type

Academic
MSC2006H, MScBMC
University of Toronto

Duration

March 2021 - June 2021

Target Audience

Vaccine hesitant lay audience

My Roles

Web developer
Copy editor
UX designer

Team

Project members
Chloe Xiaoyi Ma
Yuxiang Ren

Supervisors
Prof. Brendan Polley, MScBMC

Dr. Shelley Wall, PhD
MScBMC, University of Toronto

Introduction

The rollout of COVID-19 vaccines has brought with it a wave of questions. In a time of overstrained healthcare systems and scattered news sources, it can be difficult to find the answers to these questions and hesitations.

Vaccine Chat with Dr. Joy is an interactive, browser-based chatbot experience designed to simulate a natural conversation with a healthcare worker to help educate users about the COVID-19 vaccine.

Problem

An influx of information about the COVID-19 vaccines makes finding credible sources with answers to specific questions an overwhelming process. Sources are scattered across the internet and often filled with dense walls of scientific jargon.

For a lay audience member with lower tech literacy and minimum scientific background, this can make otherwise empowering knowledge about the COVID-19 vaccine completely inaccessible.

Solution

Core Concepts

Familiar and easy to use interface

Mobile chat platforms are one of the most universal modern experiences. Hosting the experience within a website instead of an app allows for easy access just a link away, removing the need for users to navigate mobile app stores.

Trustworthy and curated information

By consolidating information from curated sources within a single browser-based experience, we can lower the barrier to accessing relevant information. Links to all sources of information used can be found at the end of the experience.

Welcoming visuals and language

A character portraying a health care worker and the addition of charming yet accurate visuals adds a layer of approachability. Lay terms are used when possible, and clickable definitions help clarify more specific terms within the experience itself.

Check out our visualization document here.

Process

Pre-Production

Media Research

Initially, we didn't approach the project with the specific idea of a "chatbot experience" in mind. I performed a media audit of interactive informational online media in general.

I found that:
  • Many experiences took the form of a traditional article with more interactive audiovisual media.
  • Some online experiences directly addressed the user.
  • Some experiences had optional user participation, while others made users click on certain buttons or enter certain information to continue.

We wanted to actively engage users with our project. With this goal and these findings in mind, the chatbot direction was chosen.

Ideation

Content and Affinity Map

I researched and brainstormed the main "actors" and "interactions" in the content we were trying to explain. Together, we mapped out their overall flow.

I then brainstormed potential goals in the form of "How Might We's." We combined and categorized our individual ideas, and voted for the goals we found most important.

Idea Sketches and Impact Map

I sketched out our ideas of features and design aspects to include.

After grouping together, we mapped our ideas based on the effort it would take to implement them versus how much they would impact the final experience.

Task List and User Personas

We brainstormed potential user task lists together and mapped them as well, based on the level of uncertainty in each task versus their impact on the final user experience.

I then created and formalized user personas based on our project goals and proposed user tasks.

Mockups and Prototypes

I helped create a low-fidelity mockup with placeholder visuals. Due to time constraints of the project, we forgoed the traditional wireframe and directly worked off our idea sketches and idea mappings to create this mockup.

Lo-fi mockup created by Ren and Willow. Clipart from Irasutoya

A mockup with updated UI was created. To maintain a low tech-literacy threshold, we opted for a simpler, non-distracting design with rounded corners and limited colors.

UI and style sheet designed by Chloe. Clipart in third frame from Irasutoya.

I developed a live browser-based demo of Vaccine Chat using the BotUI framework. This way, I could implement the entirety of the extensive research done by and content created by Ren and Chloe.

Though there were certain UI design limitations using this framework, I was able to achieve a working chatbot experience within the project timespan of the academic semester.

User Testing

User testing sessions were performed by Ren and Chloe.

Zoom interviews with 5 individuals of diverse background and age were conducted for preference and performance data. Overall, users found Vaccine Chat easy to use and the content helpful.

Conclusion

Deliverables

The final deliverable is a proof of concept that we plan to pitch to others to develop further vaccine confidence building projects.

Live Lo-Fi Demo

The live demo allows users to try out the basic functionality of our project, with written content branching through the whole range of our reseasrch.

Check out our live lo-fi demo here.

Hi-Fi Prototype

The high-fidelity prototype was created based on user feedback to the live demo. Though shorter in content, it features revised and more natural dialogue, more balanced sit back vs lean forward pacing, and updates to the images and UI.

Hi-fi prototype created by Ren. Final UX design collaborated upon by the team.

Challenges

The main challenge of this project was the rapid evolution of the source material. Information about the vaccines themselves continued to evolve quickly, with some project research becoming outdated the week after we implemented it. The simple goal of "engaging the user with user choices" created a spiderweb of branching script to maintain and follow through.

Lessons Learned

We've learned to be more realistic with our project scope in the future by not only taking into account time constraints, but also any sudden changes to data from the "client" side. This puts a different perspective on what we as product designers and biomedical communicators should aim for, to put our own skills to the best use possible.

References

How to Stop Misinformation

  1. #ScienceExplained. (2021, March 1). Retrieved Feb 16, 2021, from https://covid19resources.ca/explained.html
  2. Changing the covid conversation. (2021). Retrieved Feb 06, 2021, from https://www.debeaumont.org/changing-the-covid-conversation/
  3. Eskola, J., Liang, X., Reingold, A., Chaudhuri, M., Dubé, E., Gellin, B., . . . Zhou, Y. (2014, November 12). REPORT OF THE SAGE WORKING GROUP ON VACCINE HESITANCY. Retrieved from https://www.who.int/immunization/sage/meetings/2014/october/SAGE_working_group_revised_report_vaccine_hesitancy.pdf?ua=1
  4. Gallo, C. (2020, December 11). The virologist who created a 'swiss cheese' metaphor to explain the pandemic has a message for educators. Retrieved March 2, 2021, from https://www.forbes.com/sites/carminegallo/2020/12/10/the-virologist-who-created-a-swiss-cheese-metaphor-to-explain-the-pandemic-has-a-message-for-educators/?sh=4e06d3666335
  5. Kim, J. H., Marks, F., & Clemens, J. D. (2021, January 19). Looking beyond COVID-19 vaccine phase 3 trials. Retrieved from https://www.nature.com/articles/s41591-021-01230-y
  6. Meeting the challenge of vaccination hesitancy. (2020, December 23). Retrieved March 1, 2021, from https://www.sabin.org/updates/resources/meeting-challenge-vaccination-hesitancy
  7. Misinformation alerts. (2021, January 12). Retrieved Feb 17, 2021, from https://publichealthcollaborative.org/misinformation-alerts/
  8. The psychology of misinformation: Why it's so hard to correct. (2020, September 18). Retrieved Feb 9, 2021, from https://firstdraftnews.org/latest/the-psychology-of-misinformation-why-its-so-hard-to-correct/
  9. The psychology of misinformation: Why we're vulnerable. (2020, November 06). Retrieved Feb 11, 2021, from https://firstdraftnews.org/latest/the-psychology-of-misinformation-why-were-vulnerable/
  10. Vaccine trials are leaving misinformation in their wake. (2020, December 08). Retrieved Feb12, 2021, from https://firstdraftnews.org/latest/vaccine-trials-are-leaving-misinformation-in-their-wake/
  11. Vaccines and misinformation: Get the support you need. (2021, March 1). Retrieved Feb 9, 2021, from https://firstdraftnews.org/project/vaccines-and-misinformation-get-the-support-you-need/

COVID-19 Vaccine Information

  1. Are covid-19 vaccines a rush job? Explaining the speed of vaccine development. (2021). Retrieved March 2, 2021, from https://covid19resources.ca/2021/01/06/are-covid-19-vaccines-a-rush-job-explaining-the-speed-of-vaccine-development/
  2. Badiani, A., Patel, J., Ziolkowski, K., & Nielsen, F. (2020, November). Pfizer: The miracle vaccine for COVID-19? Retrieved February 26, 2021, from https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7754880/
  3. Benefits of getting a covid-19 vaccine. (2021). Retrieved March 3, 2021, from https://www.cdc.gov/coronavirus/2019-ncov/vaccines/vaccine-benefits.html
  4. Canada, H. (2020, September 09). Government of Canada. Retrieved February 22, 2021, from https://www.canada.ca/en/health-canada/services/drugs-health-products/biologics-radiopharmaceuticals-genetic-therapies/activities/fact-sheets/regulation-vaccines-human-canada.html
  5. Canada, H. (2020). Government of Canada. Retrieved February 16, 2021, from https://www.canada.ca/en/health-canada/services/drugs-health-products/covid19-industry/drugs-vaccines-treatments/vaccines/type-mrna.html
  6. Canada, H. (2021, January 08). Government of Canada. Retrieved February 17, 2021, from https://www.canada.ca/en/health-canada/services/drugs-health-products/covid19-industry/drugs-vaccines-treatments/vaccines/pfizer-biontech.html#a1.1
  7. Canada, P. (2021, March 22). Government of Canada. Retrieved February 26, 2021, from https://www.canada.ca/en/public-health/services/diseases/2019-novel-coronavirus-infection/prevention-risks/covid-19-vaccine-treatment.html
  8. Canada, P. (2021,). Government of Canada. Retrieved March 4 2021, from https://www.canada.ca/en/public-health/services/immunization/national-advisory-committee-on-immunization-naci/recommendations-use-covid-19-vaccines.html
  9. Canada, P. (2021). Government of Canada. Retrieved March 4, 2021, from https://www.canada.ca/en/public-health/services/diseases/2019-novel-coronavirus-infection/prevention-risks/covid-19-vaccine-treatment/vaccine-rollout.html
  10. Center for Biologics Evaluation and Research. (2020). Emergency use authorization for vaccines explained. Retrieved February 26, 2021, from https://www.fda.gov/vaccines-blood-biologics/vaccines/emergency-use-authorization-vaccines-explained
  11. Government of Canada. (2021, April 01). Retrieved February 26, 2021, from https://www.canada.ca/en/public-health/services/vaccination-children/safety-concerns-side-effects.html
  12. Janssen investigational Covid-19 Vaccine: Interim analysis of Phase 3 clinical data released. (2021, January 29). Retrieved March 2, 2021, from https://www.nih.gov/news-events/news-releases/janssen-investigational-covid-19-vaccine-interim-analysis-phase-3-clinical-data-released
  13. Long term complications of covid. (2021, March 11). Retrieved February 22, 2021, from https://covid19resources.ca/2020/12/15/long-term-complications-of-covid/
  14. Polack, F., Al., E., For the C4591001 Clinical Trial Group*, Author AffiliationsFrom Fundacion INFANT (F.P.P.) and iTrials-Hospital Militar Central (G.P.M.), Longo, E., Others, J., . . . K. G. Blumenthal and Others. (2020, December 31). Safety and efficacy of the BNT162b2 Mrna Covid-19 Vaccine: NEJM. Retrieved February 26, 2021, from https://www.nejm.org/doi/full/10.1056/NEJMoa2034577
  15. Ritchie, R. (2021). Coronavirus (covid-19) VACCINATIONS - statistics and research. Retrieved March 2, 2021, from https://ourworldindata.org/covid-vaccinations
  16. Understanding and explaining mrna covid-19 vaccines. (2021). Retrieved February 22, 2021, from https://www.cdc.gov/vaccines/covid-19/hcp/mrna-vaccine-basics.html
  17. Understanding and explaining viral vector covid-19 vaccines. (2021, February 17). Retrieved March 1, 2021, from https://www.cdc.gov/vaccines/covid-19/hcp/viral-vector-vaccine-basics.html
  18. Vasileiou, E., Simpson, C., Robertson, C., Shi, T., Kerr, S., Agrawal, U., . . . Sheikh, A. (2021, February 19). Effectiveness of first dose of COVID-19 vaccines AGAINST hospital admissions in scotland: NATIONAL prospective cohort study of 5.4 million people. Retrieved March 5, 2021.