Patient Education Website
Vaginal birth explained, an interactive website for what patients need to know and what to expect.
Visual Design
UI
3D
Project Overview
Client: TVASurg, University Health Network
Content Advisors: Dr. Sebastian Hobson, Dr. Eliane Shore, Dr. Mara Sobel
Supervisors: Albert Fung, Paul Kelly, Joy Qu, Lesia Szyca
Industry: patient education, healthcare
Audience: general lay audience
Type: web-based eLearning
Tools: HTML, CSS, Cinema 4D, Adobe Creative Cloud
Timeline: 5 months (2022)
Role: Project Developer
This interactive patient education website developed with the Toronto Video Atlas of Surgery (TVASurg) teaches general audiences about vaginal birth, including the anatomy, indications, and risks associated with the procedure. Collaborating obstetrician-gynecologists from the University Health Network, the website includes a step-by-step guide of the patient journey in addition to an itemized checklist to help prepare for the hospital stay.
Design Solution
Concept
The website is part of an existing TVASurg initiative for creating patient education eLearning content for general audiences. As one web module in a series, it was critical to maintain design and visual consistency to support learning accessibility and navigation. This was achieved through following a previously established base HTML website template that defined the overall structure, navigation, and visual hierarchy of the learning platform. Working with this framework ensured a human-centric and user-experience focused interface while allowing for content flexibility to address the specific educational goals of the vaginal birth module.
Illustrations and 3D Models
I was provided with 3D anatomical models which I modified and edited to suit the educational needs of the project. All visual assets were rendered in Cinema4D and composited using Adobe After Effects and Illustrator. The creation of these polished images and motion elements supported the written content provided by the physician subject matter experts and enhanced the comprehension of the topic to the target audience of expecting mothers.
Web Development
While I was provided with an established HTML template as a base, I also was responsible for some front-end development of the site. I modified HTML and CSS code as needed to accommodate specific interface and content requirements. This included adjusting layout components, adding image carousels, and other interactions to add visual interest on critical learning elements. Adhering to the existing template while making specific customizations allowed the site to remain consistent with the broader platform while still meeting the needs of this particular educational topic.
Final Product
The completed website was published as part of the TVASurg patient education platform. Find the finished module linked here: Patient Education Vaginal Birth.