Case Study 1 - e-Learning Module

Screenshot of Clinical Anatomy’s module interface featuring biomedical illustrations as well as navigation and interactivity features

Capstone project

Partners

UBC’s Hackspace for Innovation and Visualization in Education (HIVE) team

Dr. Valerie O’Loughlin, Professor of Anatomy, Cell Biology and Physiology, Indiana University School of Medicine

Student designers from UBC’s Biomedical Visualization and Communication program: Bonnie Wang, Robyn Cunningham-Dunlop and Carmen Chen

Roles

In collaboration with student and instructional design teams:

• Graphic designer and colourist

• Biomedical illustrator and 2D animator

• Accessibility and inclusivity designer

• User experience designer

• Poster designer

Tools

• Adobe Creative Suite (Illustrator, Photoshop, Animate, Acrobat)

• Microsoft 365 (PowerPoint, Word, Teams)

• Miro (for project management, work flow and prototyping)

Design challenge

To develop an accessible online interactive learning module about the embryonic development of the genital system for upper undergrad and first-year medical students. The goal is to promote accurate, inclusive and safer health care through redesigned embryology education with learners at the centre of the module design.

Example of a button interactivity element on Clinical Anatomy: highlight of the anatomical structure (i.e. the embryonic neural groove) in high-contrast colour when clicked

Solution

The team implemented Mayer's principles of multimedia learning to support learner understanding of complex concepts through simplified graphics, clear text and visual alignment, a guiding timeline for overall narrative context, segmented information, as well as introductory and summary pages.

Biomedical illustration of the transverse cross section of an embryo highlighting the anatomical structures of the urogenital ridge

The learning experience was optimized through interactivity with elements such as click-through animations, button-dependent colour highlights of anatomical structures, an accessible navigation menu, and a ‘choose your own adventure’ structure including deeper dive opportunities throughout the module.

Accessible and inclusive design priorities were established through language, colour and visualization choices (i.e. ‘XX and XY individuals’; higher contrast elements) with content arrangement into Articulate Storyline guided by the Web Content Accessibility Guidelines.

Animation frame from Clinical Anatomy’s e-learning module on the development of mesonephric ducts in an XY individual