Research  /  Enzyme Kinetics Tutorial

Details  |  Timeline  |  Design  |  Production

BIOMINT Enzyme Kinetics Tutorial




Tools used:

Prof. Derek Ng¹, Prof. Jodie Jenkinson¹, Dr. Stavroula Andreopoulos²

Undergraduate biochemistry students, lecturers

Apr. 2017 - Aug. 2018

Adobe Illustrator, Adobe Photoshop, Adobe Captivate, MAXON Cinema4D, Javascript

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

Project Timeline


Meeting 3

& Sign-off



















Meeting 1

Assembly & Deployment

  • Content Implementation

  • Debugging

  • Final Refinements

  • Documentation (ongoing)

  • Deployment

Content Production

  • Textual Content

  • 2D Visualizations

  • 3D Animations


  • Interactive Prototype Development

  • Functional Coding

  • Usability Testing

UI / UX Development

  • Feature Elucidation

  • Iterative Wireframing

  • Iterative UI Design

Project Conceptualization

  • Project Ideation

  • Background Research

  • Media Audit

  • Research Proposal






Meeting 2

Design Process
Design Principles

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.

3. Modularity

Modular approach across processes: in design, programming and asset production, to enhance project development pacing and content consistency.

Information Design

Information architecture

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:


  • Topic,

  • Chapter,

  • Section,

  • Content Page, follow seamlessly along their curriculum.

Page Types

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:


  • Interactive Simulations

  • Leaflets

  • Comparative Summaries

  • Multiple-Choice Questions


Navigation design

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.

Layout Design

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.

Design Document

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.

Content Development

2D Content

  • 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 Content

  • 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

  • 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.