Using scrollytelling to better support placenta previa patients.
Using scrollytelling to better support placenta previa patients.
Using scrolly-telling to better support placenta previa patients.
I re-scoped this student project and self-led it to demonstrate how we can modernize patient education booklets to better meet patient needs — via an accessible, interactive scrollytelling webpage. In the end, 100% of testers preferred this to traditional pamphlets, describing it as “easy-to-follow”, “reassuring”, and "engaging".
I re-scoped this student project and self-led it to demonstrate how we can modernize patient education booklets to better meet patient needs — via an accessible, interactive scrollytelling webpage. In the end, 100% of testers preferred this to traditional pamphlets, describing it as “easy-to-follow”, “reassuring”, and "engaging".
Role
Researcher
Product Designer
No-Code Developer
Project
Started as a student project; independently pivoted post-course.
Duration
3 months (part-time)
Mentors
Dr. Shay Saharan (design)
Dr. John Wang (medical)
Outcome
1 responsive, interactive web-based article
Tools
Figma, Framer, Illustrator, ChatGPT
I re-scoped this student project and self-led it to demonstrate how we can modernize patient education booklets to better meet patient needs — via an accessible, interactive scrollytelling webpage. In the end, 100% of testers preferred this to traditional pamphlets, describing it as “easy-to-follow”, “reassuring”, and "engaging".
Role
Researcher
Product Designer
No-Code Developer
Researcher, Product Designer,
No-Code Developer
Duration
3 months (part-time)
Mentors
Dr. Shay Saharan (design)
Dr. John Wang (medical)
Dr. Shay Saharan (design),
Dr. John Wang (medical)
Project
Started as a student project; independently expanded post-course.
Started as a student project; independently pivoted post-course.
Started as a student project; independently pivoted post-course.
Outcome
1 responsive, interactive web-based article
1 interactive web-based article
Tools
Figma, Framer, Illustrator, ChatGPT
I interviewed 3 women, ages 21 to 42, distilling a persona: Emilia — a placenta previa patient overwhelmed by prospects of heavy bleeding and an early C-section.
I interviewed 3 women, ages 21 to 42, distilling a persona: Emilia — a placenta previa patient overwhelmed by prospects of heavy bleeding and an early C-section.
"I could barely process my diagnosis during my appointment. I have so many concerns I don't even know where to start."
— Emilia, 36, mother-to-be with placenta previa
Could doctors better support Emilia by providing medical clarity via a QR-code-linked, Q&A-based, take-home interactive article that allows self-paced learning?
Could doctors better support Emilia by providing medical clarity via a QR-code-linked, Q&A-based, take-home interactive article that allows self-paced learning?
Could doctors better support Emilia by providing medical clarity via a QR-code-linked, Q&A-based, take-home interactive article that allows self-paced learning?
platform strategy
My research found that users favored mobile over traditional printouts for ease of access, interactivity, progressive disclosure, and sustainability.
My research found that users favored mobile over traditional printouts for ease of access, interactivity, progressive disclosure, and sustainability.
Competitive analysis
Analysis of existing resources revealed dense text, heavy use of medical jargon, and poor mobile optimization.
Analysis of existing resources revealed dense text, heavy use of medical jargon, and poor mobile optimization.
I conducted guerrilla testing that validated strategies to optimize clarity, skimmability, credibility, and inclusivity.
I conducted guerrilla testing that validated strategies to optimize clarity, skimmability, credibility, and inclusivity.
I conducted guerrilla testing that validated strategies to optimize clarity, skimmability, credibility, and inclusivity.
visual reinforcement
The hero illustration updates with scroll, providing context-aware visuals that maintains anatomical context to reduce friction across diverse health literacy levels.
The hero illustration updates with scroll, providing context-aware visuals that maintains anatomical context to reduce friction across diverse health literacy levels.
Mental parity
Interviews revealed several key questions from patients. So instead of conventional sections like "Risk Factors", I organized information to match interviewees' mental model.
Interviews revealed several key questions from patients. So instead of conventional sections like "Risk Factors", I organized information to match interviewees' mental model.
Conventional Sections
Conventional Sections
Diagnosis
Diagnosis
Risk Factors
Risk Factors
Treatment
Treatment
Prognosis
Prognosis
Pathophysiology
Pathophysiology
Reframed by Patient Questions
What Is It?
What Is It?
Why Did This Happen?
Why Did This Happen?
What Happens Next?
What Happens Next?
What Can I Do?
What Can I Do?
When Should I Seek Help?
When Should
I Seek Help?
When Should
I Seek Help?
Leaning on my experience in complex technical environments, I researched the science independently and card-sorted the content into these sections. The contents were verified by pathologist Dr. John Wang.
Accessibility
Leveraging ChatGPT, I ensured that all copy was at 6th-grade reading level.
Leveraging ChatGPT, I ensured that all copy was at 6th-grade reading level.
Skimmability
Conventional pamphlets are often tossed or forgotten for being “wordy” and “too medical”, so I integrated summary headings for skimming.
Conventional pamphlets are often tossed or forgotten for being “wordy” and “too medical”, so I integrated summary headings for skimming.
Credibility
To enhance trust, I dated the article and provided further readings of publications from reputable journals.
To enhance trust, I dated the article and provided further readings of publications from reputable journals.
Inclusivity
The layout adapts smoothly to smaller screens, supporting a polished UX across devices.
The layout adapts smoothly to smaller screens, supporting a polished UX across devices.
I tested up to iPhone SE dimensions (375x667) to ensure readability and layout integrity.
All 5 testers preferred the interactive web article over traditional printouts, citing its clarity, emotional tone, and engagement.
All 5 testers favored the interactive web article over traditional printouts, citing its clarity, emotional tone, and engagement.
All 5 testers preferred the interactive web article over traditional printouts, citing its clarity, emotional tone, and engagement.
100% of summative testers said they’d recommend it to a newly diagnosed friend
No users stumbled during summative testing
Testers cited it as "reassuring", "easy to follow", and "engaging".
Pathologist confirmed medical accuracy, describing it as "thoroughly and well-researched"
100% of summative testers said they’d recommend it to a newly diagnosed friend
No users stumbled during summative testing
Testers cited it as "reassuring", "easy to follow", and "engaging".
Pathologist confirmed medical accuracy, describing it as "thoroughly and well-researched"
what I would do next
what I'd do next
With more time and resources, I’d co-design with OB-GYNs and patients and expand the scope of this product to support the pregnancy journey in a more profoundly interactive and personalized capacity.
With more time and resources, I’d co-design with OB-GYNs and patients and expand the scope of this product to support the pregnancy journey in a more profoundly interactive and personalized capacity.
Key Learnings
Users Over Convention
User insights challenged conventional content structure, improving content clarity.
Diverse Tools for Efficiency
Leveraging the latest technologies (Figma, Framer, and ChatGPT) as needed enhanced level of polish.
Systematizing Design
Determining a coherent visual and language system helped to build a consistent UX efficiently.
Designed with love by Remi.
Designed with love by Remi.
Designed with love by Remi.
Made with ☻ by Remi
Made with ☻ by Remi