Masters Research Project

For my Masters Research Project at the UofT BMC program, I collaborated with Chelsea Canlas and Patricia Nguyen to design and develop a desktop web application on lower limb anatomy for undergraduate kinesiology students. The application is currently in use as part of a UofT kinesiology anatomy course taught by Dr. Judi Laprade.

This application received an Award of Excellence in the Student Interactive Media category from the Association of Medical Illustrators in their 2019 salon.

BMC Faculty Supervisors:

Michael Corrin BFA, BA, Hons BSc, MScBMC

Jodie Jenkinson BA, MScBMC, PhD

Derek Ng BSc, MScBMC, PhD

Shelley Wall AOCAD, MScBMC, PhD

Content Advisor:

Judi Laprade BA, BScPT, MSc, PhD

Date: In Development

Check out more process work on our tumblr blog.

About the Project

Kinundrum, a combination of the words “kinesiology” and “conundrum”, guides students through lower limb biomechanics case studies at increasing levels of difficulty. The case studies present animated injury scenarios, after which students solve interactive problems accompanied by 3D models, animations, and illustrations of the
affected anatomy.

Goal

To engage undergraduate kinesiology students in active learning of lower limb anatomy

Objectives

Compose questions that require users to apply their anatomy knowledge and develop critical thinking skills
Design visuals that reduce cognitive load, direct attention and facilitate formation of mental models
Design an engaging and easy to navigate UI
Incorporate features that address and adapt to individual user needs

Founded on the visual metaphor of “connecting dots to see the whole picture”, Kinundrum's logo symbolizes the systemic analysis required to solve a case study.

Roles

Together we co-designed the UX design, with Chelsea as the lead UI designer and Patricia as the lead illustrator. We worked with student developers to build the application.

As the lead 2D animator, I created the introductory case injury animations. This involved the scripts, storyboards, sound design, animatics, animations and compositing. In addition, I produced the logo animation and the character profile animations. Based on Patricia’s designs, I drew several illustrations (summary figures) featured at the end of each case study.

Chelsea Canlas

lead designer

Nati Chen

lead animator

Patricia Nguyen

lead illustrator

UI/UX Design

Case Studies

Each case study introduces an animated injury scenario, after which students solve problems accompanied by 2D illustrations, animations, or interactive 3D models.

User Achievements

There are 6 case studies, organized in 3 tiers of difficulty. Students earn badges by completing case studies.

UI/UX Design Documentation

Conceptualizing and implementing our web learning application is an iterative process that includes research, prototyping, and testing.

Here are links to files documenting these steps.

Re-Kinnect Exercises

If students answer certain exercises incorrectly, they are redirected to a “Re-Kinnect” exercise designed to review harder concepts. These include animations or sliders.

Library

After completing a case study, all its exercises are added to the Library where students can review them.

Animations

At the beginning of each case study, students watch an animated injury scenario. I strove to accurately depict the mechanism of injury, while keeping the animations fun to watch. We opted for a graphic, ‘cartoony’ style, but the movements of the characters are closely based on live action reference.

Each animation follows a consistent format. The mechanism of injury is shown in slow motion to emphasize the affected anatomy, and the injured area of the body is highlighted.