TreeDeep is an interactive scrollytelling experience designed to teach undergraduate biology students how to read phylogenetic trees. Students then put this knowledge to action as they explore a tree of life within the context of deep time. Users then gain a better understanding of evolution as a whole.
The Problem.
Phylogenetic trees are diagrams used to represent hypothesized evolutionary relationships. These trees are used throughout many branches of biology. Despite this, they are poorly understood by undergraduate biology students. Existing biases, such as reading order and the gestalt principles of good continuation and spatial proximity, make it difficult for students to understand phylogenetic trees. A lack of proper instruction on how to read trees, a prevalent problem throughout textbooks and other educational material, also contributes to their difficulty. Many studies have explored the computational differences between different formats and orientations of trees, and it is clear there is a disconnect between the designer and the target audience. Despite evidence of students’ preference for certain formats and orientations, it seems trees are almost purposefully depicted in a way students struggle to understand. Inherent biases, a lack of instruction, and uninformed design all cause and reinforce existing misconceptions about phylogenetic trees, and therefore, evolution as a whole.
The Solution.
Interactive media has been shown to increase memory retention and decrease teaching time for students. Scrollytelling is a form of interactive media that allows users to control the pace of a story with their scrolling. Benefits of a scrollytelling medium include increased memory retention, self-guided learning, and its unique interactivity. This research project will produce a scrollytelling tree of life. It will picture a phylogenetic tree containing higher level taxa. As the user moves along the tree, they will be guided through how to interpret the tree, and how to avoid common misconceptions. A special emphasis will be put on placing this tree in the context of deep time. The amount of scrolling the user does will be proportional to the history of life on earth.
Research: Subject matter and existing media were reviewed and studied. Potential solutions were discussed and presented to the committee. Finally, a research proposal was written to outline the research findings and the intended solution.
The Design Process
Empathise/Define: Define the target audience and objectives. A user persona was created in order to understand the target audience’s struggles, priorities, and needs.
The Target Audience: The target audience is second-year undergraduate biology students. These students will already have had experience with phylogenetic trees, and will continue to in future years.
Objectives:
Identify notable misconceptions undergraduate students face when reading and understanding trees.
Create an interactive media that allows undergraduate students to explore evolutionary relationships alongside deep time, with considerations made about the common misconceptions previously identified.
Provide a structured framework within the interactive medium for undergraduate students to explore and learn about phylogenetic trees.
Design: Ideate and Prototype - Exploration of potential solutions, and create representative low fidelity prototypes. Below pictures draft wireframes, a draft storyboard, and the version of the style guide.
The colours used in the style guide presented some difficulty and had to undergo multiple rounds of revision. The geologic timescale has standard colour codes that were limiting given my style guide and intended aesthetic. In order to honour the colour codes, but make it more aesthetically pleasing, I desaturated and lightened many of the colours. These changes can be seen below.
Build/Implement: Creation of the visual solution.
Tree of Life: Significant higher level taxa were identified to be included on the tree of life. I used a online phylogenetic tree creator, TimeTree, to create a draft tree.
The tree then needed to be scaled accordingly. This resulted in a 19000 pixel long artboard on illustrator.
Next, all assets were created. All assets were created using Adobe Illustrator. Below a catalogue of all assets are attached.
Finally, TreeDeep was built in Webflow. With limited development experience, this was a challenge. Many tests and prototypes were created to ensure Webflow could achieve all technical requirements.
Of note, the phylogenetic tree was so large that it needed to be animated moving left and right in order for each node to be on screen. A custom scrollbar indicating where the user was in deep time was also added.
