ALS App Design with Boston Children's Hospital
A comprehensive web application designed to offer personalized treatment recommendations and support for individuals with ALS.
Project Details
DURATION
ROLE
TEAM
Sep. 2024 - Dec. 2024 (4 mo. total)
Design Strategist, UX Researcher, UI/UX
Heather Davies
Brian Zeng
Avdeep Kaur
Minyang Li
Project Overview
People with ALS (Amyotrophic Lateral Sclerosis) face a fragmented landscape of treatment options. While numerous clinical opportunities exist, most patients are presented with only a limited selection. This web application aims to bridge that gap by providing a guided platform that recommends resources based on user input—empowering patients and non-specialist clinicians to collaboratively explore the most relevant and up-to-date ALS treatments.
Goals:
- Support Collaborative Decision-Making: Create a tool that facilitates conversations between patients and clinicians around available treatment paths.
- Deliver Personalized Information: Recommend resources tailored to the patient's stage, symptoms, and needs.
- Ensure Accessibility and Ease of Use: Design an intuitive experience that accommodates both patients and generalist clinicians.
- Enable Sustainable Content Updates: Equip admins and clinic staff with a scalable backend for managing the latest resources and questions.
Process
1. Research & Discovery
- Patients are overwhelmed by the volume and complexity of treatment information.
- Clinicians need a streamlined way to stay current with ALS developments.
- Both groups desire a system that is intuitive and light on cognitive load.
- Personalization and clarity are essential to build trust and usability.
2. User Personas
- A patient navigating treatment stages
- A generalist clinician unfamiliar with ALS-specific options
- An admin updating resources
3. Information Architecture
I created a guided, question-based interface that mimics a 'choose-your-own-path' conversation. User inputs dynamically steer the experience, reducing information overload and surfacing relevant recommendations in real time.
4. Prototyping
- Built low-to-high fidelity prototypes that translated complex clinical decision trees into clean, usable flows.
- Prototypes were iteratively tested to ensure they scaled as more branches and content were introduced.
- I used tools like Figma and Typeform to simulate branching logic, with a future transition to a React-based system in mind.
5. Interaction Design
- A responsive hamburger menu for simple navigation
- Bookmark features using localStorage so users can save resources without creating an account
- Visual consistency for clear affordance and reduced friction
- Planned future compatibility with frameworks like ReactFlow for more robust logic management.
6. Scalability Planning
Knowing the project would eventually outgrow Typeform, I designed the interface with modularity and future extensibility in mind—supporting multimedia content, deeper branching logic, and dynamic routing.
Results
- Delivered a prototype-ready, scalable interface tailored to ALS patients and generalist clinicians.
- Created a structure that supports ongoing clinical updates and collaborative patient-clinician discussions.
- Implemented progress-saving features to reduce barriers to access, especially for first-time users.
Tools Used
Figma
Interface design & prototyping
Typeform
Early logic simulation
Next.js
Front-end framework (planned for dynamic routing)
ReactFlow
Future tool for custom question logic
localStorage API
Bookmarking and progress saving without account creation
Recommended Next Steps
Custom Logic Builder for Admins
Replace Typeform with a visual editor that allows non-technical users to create and update logic flows easily.
Dynamic Routing for Personalization
Use Next.js dynamic routes (e.g., [id].tsx) to generate personalized URLs that improve continuity across sessions and devices.