Bone Bio

Purpose
To provide Forensic Anthropology students with a supplemental bone biology learning tool to use after the ANT334H bone biology lecture. The overall goal of the tool is to help students understand the relationships between bony structures of various scales, as well as transfer this knowledge to histological image examination.

Click here to access the functional prototype!

(Password: bone)

Client
Dr. Tracy Rogers

Supervisors
Marc Dryer
Michael Corrin

Roles
Researcher, Writer, UI/UX designer, 2D/3D artist, Unity developer

Date
May 2021 — July 2022

Target Media
Website + Worksheet

Tools
Figma, Procreate, Adobe Photoshop, Zbrush, Maya, Unity

Primary Audience
Forensic Anthropology students enrolled in ANT334H

 
 

Media Audit & Research

This project originated due to a need for a bone biology supplemental learning tool in ANT334H at U of T, a 3rd-year human osteology course taught by Dr. Tracy Rogers. Over the years, students have had difficulty with this section of the course, noting that students showed difficulty understanding the relationships between bony structures at different scales, as well as difficulty drawing these structures. I began the project by assessing the materials that were currently available to students, which included videos and websites. An issue that was seen across these media was that they often did not cover the content to the degree of detail needed by Dr. Rogers, as well as some images mislead the viewer to think that certain structures were in incorrect locations. During this media audit, I discovered that there were no interactive learning tools for bone biology that were openly available to students.

 

Click on the pages above to see the detailed results!

User Research

Although the instructor of the course saw a clear need for a novel learning resource, I wanted to hear directly from students. I sent out an anonymous questionnaire asking about their learning experience during the bone biology lecture and the learning challenges that the students faced when studying at home. From this questionnaire, I found that:

  • Students needed additional visual resources

  • First-time learners are overall not very confident with the topics presented in class

  • Students are not very confident with histological examination and do not feel confident enough to draw these structures without a reference image

  • Students want to see practice questions and histological image comparison in the future bone biology tool

“Personally, it felt rushed. I would have liked more time to process the information in order to better understand how this information fits in to the bigger scheme of what we are learning in this class.”

“I like the pictures presented in the lecture, but when they are taken out from the posted outline, I have nothing to reference and struggle to find my own, or find correct pictures matching to the information I need”

 
 

Solution:
An interactive tool that utilizes animation to maintain orientation between scales + a physical worksheet

To help students study after lecture, I came up with the idea of creating a web-based bone biology visualization tool that utilizes animation to transition between different scales of bone. From my media audit, one key strength of animated videos was that they helped keep the viewer oriented by zooming in and out of structures; however, bone biology is a complex topic, and the content can only be covered very superficially by a 3-5 minute long video. By tying together sections of an interactive tool with animations, it would help to maintain orientation between the scales, while also allowing students to take their time to learn about all of the structures at their own pace. This tool paired alongside a physical worksheet would allow students to test their knowledge by drawing, labeling, etc., and would be an optimal format for the instructor to change over time, rather than changing practice questions in the tool.

 
 

User Journey

The topic of bone biology was broken down into 4 main sections for the visualization tool. This allowed me to create a user journey that would help get a better sense of how I would go about tying together these sections.

 

Visual Inspiration

When thinking of the look and feel for Bone Bio, I was heavily inspired by simple UIs, low-poly models, and inviting colours.

 

Overall Design

At this stage I mocked up what the UI would look like for the tool, incorporating placeholder illustrations for where the models would later be added. The design was kept clean and simple, with minimal colour as to not take away from the full-colour models that will be implemented during development.

 

Module List Screen

The main interface that a user encounters in Bone Bio is a module overview that contains a list of clickable structures on the model. Users can interact with the model on the right, rotating and zooming in as needed, and can hover and click on specific structures. If the users are having difficulty, they can either click on a structure within the list to bring up the description and show them where it is, or toggle on the labels at the top right. When users go between sections, either using the back and next buttons or the navigation bar, the model and the module title change.

 

Structure Description Screen

Once a structure is clicked, the left side panel changes to a description of the structure. Once they exit out of the description panel, they’ll see that that the list item they clicked on is greyed out so that they know that they’ve already looked at that structure.

 
 

Flow Diagram & Interactive Mockup

After all of the wireframes were complete, a flow diagram was created as well as an interactive mockup which you can watch here:

 

Bone Bio has just been developed
— more process work is coming soon!