The SciStory Laboratory
Master’s Research Project: Scrollytelling Website and Exercise Book
How can we help undergraduate life science students become better storytellers and visual communicators for sharing their research?
For my Master’s Research Project (MRP) at the University of Toronto Biomedical Communications Program, I developed an high-fidelity website prototype and exercise book to teach visual storytelling skills to undergraduate life science students.
Using detailed questionnaires and focus groups, I co-created The SciStory Laboratory with undergraduate science students and faculty at University of Toronto Mississauga, ensuring it met the needs and preferences of stakeholders who would be closely involved in this science communication journey.
These resources fill a critical gap in undergraduate science education – formal education in science communication.
BMC Supervisors
Jodie Jenkinson, Professor
Nicholas Woolridge, Associate Professor
Amy Zhang, PhD Candidate
Content Advisors:
Susan Keen, Professor (UC Davis Biology)
Gael McGill, Professor & Director
(Harvard, Molecular Visualization at the Center for Molecular and Cellular Dynamics)
Tools
Vev, Adobe After Effects, Adobe Illustrator, Procreate
Date
Aug 2024
Stage 1: Audience Research
Background Research
I performed a thorough literature review and media audit to gain an initial understanding of scientific storytelling and visual communication education at the undergraduate level.
🔎 Key findings
- No formal training in storytelling and visual communication skills, leading to an ad hoc approach to learning
- Existing resources lack critical engagement factors and focus mainly on oral storytelling
- Instructors are not given a clear framework from the literature on how to teach these skills
Survey, Focus Groups, and
Persona Building
To validate this high-level understanding, I surveyed research faculty and current undergraduate students in life science programs, and held focus groups with students who answered my survey.
My goal was to characterize bright spots and pain points in the learning process for undergraduate students, while also understanding what a successful learning resource looks like for them. I distilled insights into a user persona to guide design.
☀️Bright Spots
- Goal-oriented mindset; excited by opportunities to learn new skills in favour of professional development
- Deep desire to tell stories about their research and excite / educate those with less knowledge on their chosen science topic
🌦️ Pain Points
- Limited time to build skills and meet with research supervisors and mentors to provide feedback on storytelling materials
- Unsure of “where to start” when preparing their research story and accompanying visuals, and struggle to develop a logical sequence of talking points.
- Difficulty relating to existing resources, as they feel largely removed from their short-term, student-specific science communication contexts (i.e. thesis presentation, conference posters)
Brainstorming Key Functions
I decided to explore 3 major features to increase engagement based on my analysis of the insights.
Scrollytelling with 2D lottie animations
Introduces content (visuals, text) in a piecemeal manner, at a pace controlled by the user’s scrolling behaviour
Case studies
Anchors students to a real-world, tangible research example for each storytelling step
Printable exercise workbook
Provides students with a space to practice skills introduced in The SciStory Laboratory
Stage 2: Co-creative Pre-Production
Case Study Development & Copywriting
We decided to focus learning content around 2 aspects of poster presentations – a storytelling context that would be immediately relevant to undergraduate life science students:
- Narrative building: developing a logical, engaging sequence of information
- Visual communication: bringing the verbal / text-based sequence to life through poster-specific visual communication principles
After, I prepared a master script for The SciStory Laboratory that contained all assets and copywriting that would serve as learning content for students.
Within this script, I developed 3 main case studies. These case studies build upon the Science Stories “shapes” framework (Green et al, 2018), centering and characterizing a particular “kind” of challenge that research aims to overcome. I modelled these case studies after real-world research examples.
Curiosity (Why does it happen?)
Aims to understand the underlying reason or mechanism for a phenomenon.
Rescue (How might we improve?)
Aims to better humanity or the environment via direct application.
Investigation (How does it work?)
Elucidates part of the mechanism driving a phenomenon, driving understanding forward.
Website Architecture, Wireframes,
and Storyboarding
I prepared a website architecture flow diagram to visualize the high-level organization of the website and the specific workflow that students would follow.
Later, I developed wireframes of the user experience and storyboarded scrollytelling animations. These underwent 3 iterations that incorporated feedback from my supervisory committee and referenced audience research.
Stage 3: Production
Animation Style Guide
I established a style guide for UI elements and animations to ensure a consistent aesthetic throughout.
Asset Creation & Animation
From sketches on Procreate, I used Adobe Illustrator to create clean vector assets that I later brought into Adobe After effects to animate according to the storyboard.
Website Development
After, I brought my animation files into Vev, a no-code website builder optimized for scrollytelling, and combined with text animations and interactive elements to assemble the final high-fidelity prototype.
