Duchenne Journey Tool
An interactive web tool to educate patients and families with Duchenne muscular dystrophy (DMD) in their care journey and assist in decision-making.
Work Type: Live Well Collaborative Co-Op Summer 2021 | UI/UX, Research
Applications: Adobe Illustrator, Figma, Miro
Problem Statement
Lack of an All-Encompassing Duchenne Care Site
There is an unmet need for patient and family-centered educational tools to help visualize care trajectory, improve patient agency, and improve quality of life and future planning for patients and caregivers. Patients with Duchenne muscular dystrophy (DMD) deserve high quality patient and family-centered physical, psychological, emotional, and spiritual care to improve their lives at every stage of their illness.
Solution
Optimize Educational Resources
The deliverable will be an interactive, web-based journey map application, which will visually educate patients and families about DMD and its treatment path from childhood through adulthood. Once refined, built, and tested, the journey map application will offer a tool to improve care in DMD and other progressive diseases.
The main objective is to define stakeholder use cases and help connect families to resources and prepare discussions with clinicians. The central hypothesis is that the refined DMD journey map and website will be acceptable for use by DMD patients and caregivers, and feasible for DMD clinicians to integrate into clinic practices.
The Live Well Team
Matt Anthony | Research Advisor
Babaljit Kaur | Team Lead and UI/UX Fellow
Alexis Begnoche | Research Fellow
Keeton Yost | UI/UX Fellow
Abbie Howell | Communication Design Co-Op
Cindy Zhang | Communication Design Co-Op
My Responsibilities
Aiding in secondary and primary research, including benchmarking online resources and images, such as medical websites, microsites, diagrams, etc
Creating wireframe screen sketches and making iterations based on feedback from user-testing and interviews
Contributing and designing the final screens of the Duchenne muscular dystrophy microsite
Process
Benchmarking and Secondary Research
We looked into how educational sites, specifically those for DMD, organize and display their content. This helped us gain an understanding of how visuals, videos, tabs, and timelines should be portrayed. Great contrast between blocks of information and visuals with icons and diagrams were definitely favorable for easy understanding.
Wireframe Sketches
We then looked at swim lane timelines to get an idea on how to display the DMD milestones as part of the DMD tool. We also looked at other forms of data visualization as opposed to a linear approach. This helped give us inspiration during our crazy 8 sketching, and we made wireframe sketches of the DMD timeline in other forms like radial or flow maps.
Card Sorting with Patients and Clinicians
From interviews with parents/patients and clinicians, we engaged in a card sorting activity of common DMD topics to see how parents/patients would prioritize what is important based from their experiences with DMD and what they saw was missing.
Most parents/patients emphasized that mental health should be focused much more, especially in the beginning.
Support groups and DMD communities where patients share their experiences were one of the biggest resources among the patients.
Treatment and care shouldn’t be primarily focused on the patient; the family and siblings should also understand how to support their loved ones.
Some parents/patients highlighted the importance of caretakers and an emergency plan, especially because of unexpected injuries.
Information Architecture
We categorized pages and content that would exist under the DMD tool microsite. There would be a home page with general information on DMD and then the proposed categories of the physical, emotional, and social aspects of the treatment journey.
User Testing with Patients and Clinicians
We user tested with parents/patients and clinicians with various designs for DMD content. We discovered that most users really loved the diagrams accompanying the text, as well as filtered tabs. The icons and cards of information were also an important aspect to differentiating between blocks of information. It was important to keep information high-level, but not overwhelming with too much detail.
End Concepts
Refined Screens
A Figma prototype was created at the end of the Summer 2021 intern semester. Unfortunately due to confidentiality rules, I cannot publicly display the final screens here except in an interview setting! Below are some features we included in the DMD site.