Introduction

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. UX Research & Discovery

Through interviews with ALS patients and primary care physicians, several key challenges were identified:

• • 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.

These insights shaped the app's design principles: clarity, accessibility, and progressive disclosure.

2. User Personas & Journey Mapping

I developed distinct personas representing:

• • A patient navigating treatment stages
  • • A generalist clinician unfamiliar with ALS-specific options
  • •An admin updating resources An admin updating resources

Journey maps helped visualize each user's emotional and informational needs throughout the experience.

3. Information Architecture & Flow Design

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.

Figure 1: User Flow Chart

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.
  • •An admin updating resources 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 & Developer Handoff

• • Collaborated with developers to implement accessible UI patterns, including:
  • • 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 (planned)
  • • localStorage API – Bookmarking and progress saving without account creation

Recommended Next Steps

1. 1. Custom Logic Builder for Admins
   • Replace Typeform with a visual editor that allows non-technical users to create and update logic flows easily.
2. 2. Dynamic Routing for Personalization
   • Use Next.js dynamic routes (e.g., [id].tsx) to generate personalized URLs that improve continuity across sessions and devices.

Figure 2-4: Researched Design System

Final Website for Client