Elara

  • Home
  • Research
  • Projects
  • CV
  • Home
  • Research
  • Projects
  • CV
GitHubLinkedInInstagramORCIDTelegramBlueskyRSS Feed

© 2025 Elara Liu | All rights reserved.

Themed by EnjuFolio · Crafted by ZL Asica (Elara Liu)

SafePassage

Elara Liu, Wendy Huang, Yihan Yang, Dingcheng Wang, Amiin Ismail Muse, Nader Rahhal, Lydia Ketema

Advised by:Prof. Christopher K. Riesbeck

February, 2025

Code

Category: Web

Keywords:
emergency information designprivacy-preserving sharingcross-cultural communicationsafety-critical UXserverless architecture

Abstract

I led a cross-functional team to build SafePassage, a web app that lets travelers with medical conditions generate a QR code linking to a localized, read-only medical profile. When scanned, the code shows emergency-relevant information in the local language and triggers SMS alerts to chosen contacts via a serverless backend, giving clinicians enough context to act while preserving the traveler’s privacy and control.

1 Overview

SafePassage started from a concrete use case we heard repeatedly in client discovery and classroom discussions: people with serious medical conditions feel vulnerable when traveling abroad, especially when language barriers and unfamiliar health systems make it hard to communicate history, medications, and emergency contacts. Rather than designing yet another full-blown patient portal, I led our team in scoping the problem down to a single, high-stakes moment—a clinician or bystander scanning a QR code in an emergency—and asked what information, flows, and safeguards would make that interaction actually usable and safe.

We framed the app around three roles: the traveler who configures their profile, the medical professional who scans it, and the emergency contacts who may need to be notified. On the HCI side, this led us to a read-only, privacy-preserving QR profile: the QR code opens a minimal, emergency-focused view of the traveler’s conditions, allergies, and medications, translated into the destination language, without exposing full account details or edit controls. The scanning view prioritizes legibility and triage—clear sectioning, large text for critical fields, and language that matches what clinicians told us they look for first—while the traveler-facing side gives people control over what appears and who gets alerted.

On the engineering side, I worked with the team to implement SafePassage as a React + Zustand app backed by Firebase, with a lightweight backend built using Hono and serverless functions. The frontend generates QR codes that encode only the information needed to retrieve a profile; the backend looks up the corresponding record, serves a localized, read-only view, and, when configured, sends SMS messages to the traveler’s emergency contacts to indicate that their code was scanned. We kept the codebase structured for field studies—clear separation of concerns, environment-based configuration, and a deploy path that runs today on Cloudflare Workers or Firebase Hosting—so that SafePassage can be used in small pilots with real travelers and clinicians, not just in the classroom.