Mediport

September-November 2023 · 10 weeks

Mediport is a mobile concept for travelers who take medication every day. It carries their medical information across languages and puts critical help within reach abroad.

This project began as a broad travel health concept that included a community feed. After prototype testing, the team narrowed it around what travelers would need when something goes wrong. As project lead and information architect, I planned and ran the research and restructured the app's information architecture.

Mediport

September-November 2023 · 10 weeks

Mediport is a mobile concept for travelers who take medication every day. It carries their medical information across languages and puts critical help within reach abroad.

This project began as a broad travel health concept that included a community feed. After prototype testing, the team narrowed it around what travelers would need when something goes wrong. As project lead and information architect, I planned and ran the research and restructured the app's information architecture.

CONTEXT

Information Architecture · Product Scope

CONTEXT

Information Architecture · Product Scope

Role

Project Lead · Information Architect

Role

Project Lead · Information Architect

Scope of Work

User Research · Information Architecture · Usability Testing · Product Scope

Scope of Work

User Research · Information Architecture · Usability Testing · Product Scope

TEAM

Chaehyeon Kang · Ruiwen Shou · Yunyu Liu · Hailin Chen

TOOLS / SYSTEM

Figma · XMind

PROJECT TYPE

Mobile Product Design · Information Architecture

Team main screens: tested prototype, revised after testing, and high fidelity.

Mediport is not a commercial medical product or service.

Context

A health passport for travelers on daily medication

Mediport is a mobile app that carries a traveler’s medical information across languages. It was designed for people who take medication every day and hesitate to travel abroad because of what could happen if something went wrong.

I led the project in a team of four, planned and ran the research, and owned the information architecture.

Product Challenge

How travelers prepared without a single system

Before designing, I interviewed potential users about how they manage medication when they travel. Their preparation was spread across paper copies, phone photos of prescriptions, and health portals at home. Abroad, the gap was language: one participant could not identify an over-the-counter allergy medicine because she could not read the label.

We explored a scenario in which a traveler loses their medication abroad and needs medical assistance in an unfamiliar language.

Mediport project evidence. Open the full-size image to read the storyboard, research synthesis, or architecture diagram.

Open image at full size ↗

Storyboard by Yunyu Liu, interaction designer. This early storyboard explored a medication emergency abroad. Some proposed services, including transportation and clinic registration, were outside the final product scope.

Usability Testing

Testing revealed what travelers needed most

We tested the prototype with six travelers aged 42 to 72. Sessions began with questions about how they travel today and then moved through three tasks: finding destination information, entering health information, and locating the nearest hospital with a translated prescription.

Participants found the layout overly complex, and the amount of content hid the features they needed most. Some described complicated apps as a reason to give up. The testing gave us a clearer question: which features deserved space, and which needed to be easiest to reach?

Mediport project evidence. Open the full-size image to read the storyboard, research synthesis, or architecture diagram.

Open image at full size ↗

Product Decision

Deciding what belongs in the product

The early concept included a community feed for sharing travel experiences. In the sessions, travelers told us they already planned and shared trips on social media.

We questioned whether Mediport needed to compete for their attention there. We removed the feed and focused the product on what it could uniquely support: carrying health information across languages and helping travelers reach critical information abroad.

Product Decision

Restructuring the app around critical access

The first architecture had six top-level areas. Emergency contacts sat inside the personal information area as one of nine items.

I revised the structure after testing. The community area was removed, and embassy contact details moved to the main screen. Contacts gained a tab of their own, where travelers set who to reach in an emergency. Help center and customer service were merged into one place.

In an emergency, the most important information should take the fewest steps to reach.

Mediport project evidence. Open the full-size image to read the storyboard, research synthesis, or architecture diagram.

Open image at full size ↗

The revised architecture removed the community area, added a Contact tab, and placed embassy contact details on the main screen. The highlighted path compares how a traveler reaches their emergency contacts in each structure. Paths are drawn from the two architectures and were not measured in testing.

Team main screen designs: tested prototype, revised after testing, and high fidelity. Embassy contacts appear in revised and final screens.

The main screen in the tested prototype, after revision, and in high fidelity. Embassy contact details appear once the structure changed and carry into the final design.

Reflection

What this project changed about how I work

Mediport taught me to consider product scope and information hierarchy together. Removing the community feed helped clarify the product’s purpose, while bringing emergency information forward made critical support easier to find within the interface.