3D Metabolism

An open-source WebVR
cell visualization tool

3D Metabolism is an open-source interactive tool that will be used to visualize the information contained in the metabolic network of a cell. This project was kick-started by Dr. Lindsay Rogers, who wanted to build a tool that could address a learning need in the sphere of biochemistry undergraduate education and research. As a staff designer for an exciting cross-collaboration project, I helped lead design in 3D modelling, UX/UI design, product thinking, narrative storytelling, while also mentoring students and acting as a communication bridge between art and science.
‍
This project will be published on desktop and mobile platforms, and will eventually expand into a VR experience using Google Cardboard to allow for a more immersive experience. It will serve as a visual aid and educational tool for undergraduate students, researchers, and lay audiences.

Roles

UX/UI Design
3D Modelling
Narrative/Storytelling
Information Architecture

Year

2023

Worked With

Dr. Lindsay Rogers / Primary Investigator
Michael Sider / Producer
Dante Cerron / Software Developer
... and many students!

Agencies

UBC Studios
UBC Emerging Media Lab

The Problem Sphere

The metabolic processes of the cell is a famously difficult learning area for biochemistry students and researchers, involving many chemical processes and mechanisms. In order to understand the pain points in user knowledge, I conducted literature reviews alongside our primary investigator, Dr. Lindsay Rogers. I also co-facilitated extensive student interviews, and supported the crafting of user personas to help us understand the learning needs of our broad target audience - students, researchers, and even the general public.

Solutions

The project solutions for this project as a response to user pain points were proposed:

1. Create a WebVR experience that allows the user to zoom in and out of a cell
2. Allow the user to select multiple pathways in the cell and view them in both a 2D and 3D.
3. If time and resources allow, produce 3D animation explainer videos of these molecular processes.

Building a Design System

As the sole staff designer starting out, I became responsible for producing the branding guideline as well as building out the design system for the user-interface.

Rapid Prototyping With
Web-Responsive Design

I co-facilitated and led white boarding design sessions with our diverse team of software engineers, students, and content experts to assess the user flow of our information architecture. As a scientific visualization specialist with some background in biochemistry, I acted as the communication bridge between science content, design, and technical jargon.

I worked closely with our staff software engineer, Dante Cerron, to create a front end information architecture system that would work in tandem with the logic of how the code would be implemented in the back end of our system in Unity. I also set a main goal for us to adhere to the most web-responsive design practices available to Figma at the time in order to ensure the longevity and cross-functionality of this product.

A screenshot of the detailed design notes I would compile for our project collaborators and software engineering team after each collaborative design session. Detailed and clear design documentation are an essential component of the process, ensuring project efficiency and reducing any potential design redundancy.

An Agile Workflow Iterating on Designs and Team Mentoring

What I enjoyed the most about this work was being able to lead agile workflows while also mentoring and managing students along the way. UBC Emerging Media Lab is a unique collaborative academic space that also invests in its students.

Every term I would lead a prototyping workshop for the work-learn students, and would regularly work with them to iterate the design on a weekly basis. During my time on this project I was able to run multiple successful workshops and train up to 15 students with our small core staff team.

Leading 2D/3D Visual Development

I was also in charge of leading the design of the 2D and 3D visual development of the project. Below you can find some snapshots of my design progress developing the visuals for the mitochondria, also humorously known as the powerhouse of the cell in popular culture.
‍
This visual development also extended to the 3D animations that are in development for this project.

Closing Notes

3D Metabolism is a high-impact project in the field of experimental and immersive education for biochemistry research, and I look forward to seeing what the students and team at the Emerging Media Lab will do with the design foundation I helped create.