Research / Enzyme Kinetics Tutorial
BIOMINT Enzyme Kinetics Tutorial
Prof. Derek Ng¹, Prof. Jodie Jenkinson¹, Dr. Stavroula Andreopoulos²
Undergraduate biochemistry students, lecturers
Apr. 2017 - Aug. 2018
Enzyme kinetics is the study of rates of enzyme-catalyzed reactions, many of which drive essential pathways in biological systems. This topic is first taught to undergraduate life science students as a set of threshold concepts, laying the foundations for advanced disciplines such as pharmacology and molecular biology. However, courses introducing enzyme kinetics are typically limited to abstract mathematical approaches, in stark contrast to other biochemistry topics which tend to be more grounded in molecular structure and behaviour. This can lead to poor association with existing mental models of molecular phenomena, resulting in reduced learning interest, poorer understanding, and ultimately failure in knowledge retention.
Through BIOMINT: Enzyme Kinetics tutorial, students will be able to freely associate and bridge their mathematical and molecular understanding of enzyme kinetics, in the hopes of applying these threshold concepts for their future scientific endeavours.
¹1Biomedical Communications, University of Toronto, ²Department of Biochemistry, University of Toronto
Assembly & Deployment
Interactive Prototype Development
UI / UX Development
Iterative UI Design
1. Knowledge Integration
Content design to facilitate user bridging between different conceptual layers, achieved through creation and integration of content across various knowledge modalities: 2D visualizations, 3D animations, graph plots, arithmetics, and text.
2. Scaffolded Interactivity
Intentionally constrained UI / UX design to minimize interactive ambiguity and distraction, achieved through clear, state-based primary interactions, nesting toggle-based secondary interactions.
Modular approach across processes: in design, programming and asset production, to enhance project development pacing and content consistency.
BIOMINT: Enzyme Kinetics tutorial is designed for ease of navigation, and a clear hierarchical content structure in mind.
Users will be able to progress within the tutorial in the context of:
...to follow seamlessly along their curriculum.
A variety of modular pagetypes are implemented to appropriately organize learning content, based on their nature and relation to other concepts.
Users will be able to learn in a variety of ways through a combination of the following page types:
UI / UX
To provide users with clarity while navigating the tutorial, navigation elements are designed with the hierarchical tutorial information architecture in mind. This is inferred in the designs of Table of Contents, page breadcrumbs, chapter selection menu, and section navigation bar.
To minimize cognitive load on users during tutorial use, many navigational redundancies are in place, for progressing / backtracking between pages, skipping between sections and chapters, as well as returning to the homepage. Navigational redundancy is also applied in designing page content.
To provide users a clear sense of progression during tutorial learning, chapters are capped by Preface and Closure pages; these indicate to the users their progression in the scope of the topic, as well as learning goals.
BIOMINT: Enzyme Kinetics tutorial is designed to be viewed in web browsers at modern desktop / laptop screen resolutions. The viewport is fixed at 1366 px by 768 px in dimensions.
Deriving from modern UI design, BIOMINT tutorial content is always populated on top of Card elements. Each card is a rounded rectangle with 6 px corners and 1 px border. Gutter width between any adjacent cards is 7 px. Each pagetype uses its own Card arrangement within the confines of the content region.
The brand name is BIOMINT, an acronym for "Biomolecular Interactive Tutorials". The logo takse on a vibrant, minty teal as its accent colour. The very same teal accent is also used throughout the tutorial content to highlight interactivity, key terms, and visual focus.
The minimalistic iconography of the BIOMINT logo focuses on its letter "O", which hints toward interaction between a larger and a smaller molecule.
For design specifications in typography, colour, microinteractions, and elaborations on other design aspects of the project, and for a detailed wireframe walk-through, please check out the project Design Document.
2D visualization themes were inferred by tutorial textual content; thumbnails were drafted on paper
Rough 2D visualization drafts were illustrated digitally, and crude labels / UI elements were added
Drafts were consulted for feedback and iterated
2D visualizations were refined in rendering, labelling and UI design, and reformatted to be ready for implementation
3D molecular animation themes were inferred through ideation and discussion, and 2D animatic mockups are generated in Adobe After Effects
3D assets to be created are designed on paper, and modelled in Pixologic ZBrush
Molecular scenes are established in MAXON Cinema4D, preconfigured for molecular motion, trajectories, lighting, and rendering specifications
Animations are rendered, and used for sound design and data visualization production
Final 3D molecular animations are compiled in Adobe After Effects, integrating rendered 3D, animated 2D, textual, and audio elements.
Textual content skeleton was inferred by the structure of the course curriculum and consultation from course instructor Dr. Stavroula Andreopoulos. It was generated in a modular fashion, corresponding to different tutorial pagetypes.
Rough textual content production was carried out in collaboration with Dr. Andreopoulos.
Content was refined for grammatical errors and typos, and condensed to fit predetermined character count limits.
Ainsworth, S. (1999). The functions of multiple representations. Computers & Education 33, 131-152.
Chang, H. Y., & Linn, M. C. (2013). Scaffolding learning from molecular visualizations. Journal of Research in Science Teaching, 50(7), 858–886.
Fang, N., & Guo, Y. (2016). Interactive computer simulation and animation for improving student learning of particle kinetics. Journal of Computer Assisted Learning, 32(5), 443–455.
Fund, Z. (2007). The effects of scaffolded computerized science problem-solving on achievement outcomes: a comparative study of support programs. Journal of Computer Assisted Learning, 23(5), 410–424.
Hegarty, M. (2004). Dynamic visualizations and learning: Getting to the difficult questions. Learning and Instruction. 14(3), 343-351.
Hinckley, G. (2012). A method for teaching enzyme kinetics to nonscience majors. Journal of Chemical Education, 89(9), 1213–1214.
Orgill, M., Bussey, T. J., & Bodner, G. M. (2015). Biochemistry instructors perceptions of analogies and their classroom use. Chem. Educ. Res. Pract.,16(4), 731-746.
Rutten, N., Van Joolingen, W. R., & Van Der Veen, J. T. (2012). The learning effects of computer simulations in science education. Computers and Education, 58(1), 136–153.
Trey, L., & Khan, S. (2008). How science students can learn about unobservable phenomena using computer-based analogies. Computers and Education, 51(2), 519–529.
Wichmann, A., & Timpe, S. (2015). Can Dynamic Visualizations with Variable Control Enhance the Acquisition of Intuitive Knowledge? Journal of Science Education and Technology, 24(5), 709–720.
White, B. Y., & Frederiksen, J. R. (1998). Inquiry, Modeling, and Metacognition: Making Science Accessible to All Students. Cognition and Instruction, 16(1), 3–118.
Woolner, P. (2004). A Comparison of a Visual-Spatial Approach and a Verbal Approach to Teaching Mathematics. International Group for the Psychology of Mathematics Education, 28th, Bergen, Norway.