By Yinan Dong and Mansi Khandpekar —
This article is the third and final in a series on Travel Healthy (TH), an app for international travelers to self-report symptoms of illnesses and manage their health while on a trip. The first and second parts introduced the project and described the development process. For this third part, Yinan, the UX/UI designer for the TH app, and Mansi, who contributed to UI design aspects, will go over the user-centric design process and explain some design decisions aimed at providing a better user experience.
No matter the purpose of their trip, travelers want to stay healthy, while researchers need a surveillance system to monitor the global spread of infectious diseases. Recognizing this need, researchers from the Massachusetts General Hospital (MGH) Travelers’ Advice and Immunization Center sought efficient methods for collecting high-resolution travel-related health data. This prompted Yinan’s journey to design a digital research tool specifically tailored to travel health — a mobile app designed to serve both researchers and travelers.
Setting the Stage: Understanding the Research Context
Before diving into design, the first step was to familiarize with the topic of infectious diseases among travelers by reviewing published papers, examining existing tools, and consulting MGH experts. This research set a solid foundation to understand the research problem and goals.
Understanding the User: Developing User Insights
To ensure that our app would meet real-world needs, we conducted a user survey with 18 scenario-based questions, gathering insights from 261 participants representative of our primary users (MGH travel clinic patients) across 3 online clinical survey platforms. These insights guided our design decisions, which were published last year in the Journal of Travel Medicine. Here are some key data points from the survey:
- 81% expressed concerns about health while traveling abroad.
- 94% carried smartphones but often faced issues with internet access and data usage.
- Participants showed varying levels of willingness to use an app that tracks specific data for research studies.
Such responses underscore the necessity for an offline-capable app and addressing user concerns about health and data tracking.
We mapped user tasks and behaviors across travel stages, aligned with our research goals, which are to prospectively collect high-resolution geographic and symptom data on U.S. international travelers and to correlate the presence of symptoms with destination, demographic, and behavioral characteristics of travelers.
We identified users’ main pain points, which included accessing reliable travel health information, data privacy concerns, and maintaining engagement. This map facilitated team discussions to ensure solutions balanced user needs, research goals, and practicality. With user insights, competitor analysis, information architecture, and expert consultations, we defined key features for the TH app: a symptom survey and calendar, dynamic CDC travel health notices, customizable malaria medication reminders, and a document management tool. These features provide travelers with useful, verified information and tools to stay healthy and informed, while aiding researchers in collecting geolocation-based illness data.
Ideation and Iteration: Building the Product
Our design evolved iteratively from sketches to low-fidelity wireframes and finally to high-fidelity prototypes. Each stage refined app features and content, to ensure accurate information, efficient navigation, and coverage of various user scenarios. These iterations were supported by continuous feedback loops with the team, stakeholders, and users. User feedback and testing allowed us to shape the app’s features for intuitive use.
Yinan developed high-fidelity prototypes for TH’s key features and sections to address user pain points and the research goals. These high-fidelity prototypes offered a realistic preview of our app’s capabilities, validating design decisions and gaining agreement from developers and stakeholders. Below there is composite image showing the prototypes for key functionalities of the TH app.
Onboarding
The user onboarding journey includes clear explanations about data usage, storage, and encryption, addressing user concerns about data privacy to ensure users feel informed and confident in using the app. Insights from user testing led to simplifying the onboarding process into three easy steps for setting up trip profiles and activating necessary tools to stay informed.
Monitoring Travelers’ Health in Real Time
Symptom Survey: This is the core feature of the app for collecting high-resolution travel-related health data for researchers in real time. To achieve this while balancing user needs, it is designed to be a quick (1–2 minutes daily), easy, and engaging survey experience for travelers. The survey uses plain language and clear icons to illustrate symptoms and options, dynamically adjusts questions based on responses, offers offline access, and rewards users for each survey entry.
Personalized Symptom Calendar: After completing the survey, the calendar provides personalized data feedback to users, showing symptoms from all their past trips. This allows them to access their survey data, monitor their health, record trip activities, and complete missed surveys for the current trip. Post-travel surveys confirmed that users found this feature useful and could help describe travel illnesses to doctors more accurately.
Gamified Incentive for Data Entry: Long-term user engagement with medical apps, like ours, poses a significant challenge that has been explored by researchers. We addressed this challenge by integrating gamification into the TH app, rewarding users with whimsical and unique postcards for completing their surveys, which are gradually revealed throughout their trip. Users collect these postcards within the app and can also shared them with family and friends at the end of the trip.
Digital Tools to Manage Health During Travel
CDC Travel Health Notices: Provides dynamic and verified CDC travel health notices based on travelers’ location. This helps travelers easily access and stay informed with free, authoritative, relevant medical information about disease alerts, necessary vaccines, medications, and preparation tips for their destination country or travel stops.
Malaria Medication Reminders: Antimalarial drugs are one of the most common medicines prescribed at travel clinics. Recognizing the complexity of malaria medication schedules (each antimalarial such as malarone and chloroquine have different daily or weekly schedules), this tool simplifies the process with an easy setup: users select the medication type, enter trip dates in high-risk areas, and set a reminder time. The app automatically schedules a mix of daily and weekly reminders for taking malaria medicine before, during, and after the trip. This solution addresses a gap where other apps fail, as they require manual setup for each medication schedule detail.
Travel Wallet: The document management tool digitizes and organizes health-related documents for travelers’ convenience. Users can categorize documents by type and ownership, making it easy to find vaccine cards, prescriptions, and other important papers during travel. This tool was identified as a necessary feature to store documents such as vaccine cards during the pandemic. As the requirement for vaccine cards during immigration procedures has largely disappeared, we are updating the tool to allow note-taking for more flexible data entry during trips based on later user feedback.
UI Styling
Yinan aimed to design a modern research tool that stands out from other medical research tools. Some existing research tools have dated UIs, overwhelming information, and cluttered layouts, which can lead to bad user experiences. She focused on creating a more appealing and delightful UI for travelers, and incorporated blue from the MGH branding and added green and yellow to bring energy and vibrancy to the interface. Yinan also developed the style guide, along with the illustrations and icons for the TH project.
Mansi crafted the UI details for the account registration pages, ensuring a cohesive, accessible, and user-friendly design in line with Yinan’s style guide. A well-designed registration flow simplifies user interaction and guarantees secure service access. Mansi and Yinan also focused on preemptively identifying and resolving potential errors like incorrect inputs or system issues. We utilized color, typography, and layout to guide users through the registration process seamlessly.
Collaboration as the key for successful UX/UI design
Our design process was highly collaborative, with everyone on the team contributing ideas and validating decisions. Together, we developed an intuitive and modern travel health mobile app. Elizabeth, the research study nurse at MGH, directly enrolled participants and worked with us to write and verify the UI content and language, ensuring the information was accurate and accessible. Anika, the former associate director within the Sabeti lab, was involved in the early stages, contributing to product strategy and testing the initial app prototypes. Mansi, at the time a graduate intern in the lab, refined the UI details for the account registration page and offered inputs and suggestions as needed. Shannen, an undergraduate CS student intern from WPI, developed part of the symptom calendar feature. Our talented app and back-end developers, Andi and Hung, were always available to discuss technical constraints and the best feasible solutions that balanced user experience and development effort. Finally, special thanks to Andrés and Regina, our lab PIs and managers, for providing this opportunity and guiding us throughout the journey.
Designing a user-centric travel health tool goes beyond creating a product; it involves understanding and addressing real-world challenges. Through rigorous research, iterative design, and user-focused testing, we developed a tool that collects crucial data for researchers and empowers travelers to monitor and manage their health proactively. The journey continues with a commitment to innovation and user-centricity, aiming to refine and expand the tool to meet the dynamic needs of travelers worldwide. Join us on this journey towards safer and healthier travels!
