Interactive Patient Education Website
Craniosynostosis Care
Project Overview
This project is an interactive patient education resource, developed from patient surveys. This project was created to address critical gaps in craniosynostosis resources and explores how thoughtful design may improve understanding, reduce anxiety, and enhance the caregiver experience during complex pediatric care journeys.
I wanted to create a simple and comprehensive journey, prioritizing with user experience and choice. I wanted to create an accessible and warm-toned resource to reassure and inform parents during an unimaginably stressful situation.
Audience
Client
Parents of children with craniosynostosis
Dr. Christopher R. Forrest
Plastics and Reconstructive Paediatric surgeon and Medical Director
Clip of user navigating the Cranial Vault surgical pathway
What is Craniosynostosis? Video
Demo Reel for Craniosynostosis Care
Process
RESEARCH
I started this project with observations in the hospital and informal needs assessments for patient education materials.
Key Takeaways:
Lack in comprehensive step-by-step explanations of the diagnostic journey
Lack of simplified non-graphic visuals of surgery
PRE-PRODUCTION
I conducted a literature review and media audit before wireframing some ideas for the website and creating the script for the resource with the help of our content expert and healthcare workers. We re-iterated on this wireframe with each round of feedback, where we were able to improve navigation ease through user-centered design principles.
UX Challenge:
One of our goals for this resource was the ease of switching between two surgical journeys for parents to compare their surgical options. I trialed a few different versions of when the journey would split off so it was still intuitive to users. This was integral to the underlying structure in the code folders that allowed for simple swapping between the two surgery paths. And ultimately had a great impact on navigation design and the assets needed for guiding users.
Solution: Creating a page that was specific to choosing a path, popups when users want to skip around the journey, and colour coding and labelling each page so users always know which journey they are on.
ANIMATION
I wrote and reiterated on the script many times with my content expert before we began storyboarding. Then we continued to refine the plan for animation as I began to create custom 3D models for the the purposes of our animation. After anatomical accuracy checks we went on to use the 3d models and my prepared illustrations to create the “What is Craniosynostosis?“ animation you can watch above.
PRODUCTION
ILLUSTRATIONS
Due to our vigorous wireframing and detailed pre-production work, I was able to efficiently create the illustrations needed for the unique pages of the surgical pathways and other non pathway sections.
Baby count: 16 unique babies!
CODING
I coded the HTML, CSS, and Javascript needed for all the navigation and interactions.
Research
For this project, user input was essential to optimizing the resource. I received Research Ethics Board approval to conduct surveys and analyze qualitative and quantitative user data. I was able to use the data to iterate on the design and improve the content and style of the final product.