CDC TravWell

App Redesign Case Study

MEDIUM 

Mobile Application

TIME SPENT

120 hours

 

MY ROLE

UX Design Lead

PROJECT DATE

December 2019​

TOOLS

Sketch

Adobe Illustrator

Principle

OVERVIEW

The Center for Disease Control and Prevention (CDC) designed CDC TravWell, a mobile application that allows travelers to manage health items related to their trip. 

The CDC TravWell app has many usability issues and thus negative experience for users.

 

We proposed a redesign to better educate travelers on health and safety issues prior to their trip and help prepare them for international travel.

iPhone X Copy 16.png
iPhone X Copy 17.png
iPhone X Copy 18.png
iPhone X Copy 20.png
iPhone X Copy 19.png
 

ROLE AND PROCESS OVERVIEW

I was the UX Design Lead on a three-person team responsible for creating design solutions, UI and high-fidelity, interactive prototype.

 

My team members were Patrick Ruff (Project Manager) and Mary Sadanowicz (User Researcher). We were given the prompt to redesign a specific app as a part of our class final project.

PROCESS OVERVIEW

Although my focus was on solution ideation and high-fidelity prototyping, I was actively involved in all stages of the UX design process:

 

PROJECT BACKGROUND

Users need a single, simple solution to find health and safety information for traveling internationally.

 

By “health”, we mean anything that can have a physical impact on your body, including vaccines, medicines, disease outbreaks and food and beverage safety.

CDC offers plenty of resources around these topics on its website and other platforms. However, the abundance of information makes it overwhelming and hard to navigate for travelers. Thus, CDC developed CDC TravWell, a mobile application that allows travelers to look up information and manage health items related to their international travel. 

PROJECT BACKGROUND

Unfortunately, the current TravWell app frustrates the users and we want to know why.

 

Currently, the App Store reviews for CDC TravWell have been really negative, with a 2.0 rating on average. We want to understand the usability issues that prevent the app from retaining its users. 

CDC Reviews.png
 

DESIGN RESEARCH

First, we conducted heuristic evaluation and user testing to discover usability issues with the current app.

We conducted a heuristic evaluation based on 10 factors (findable, accessible, clear, communicative, useful, credible, controllable, valuable, learnable and delightful). TravWell scored low in all areas with the exception of a mid-range score for credible and controllable. The CDC provides robust information which is credible, but the application is not particularly useful or intuitive for such critical topics such as vaccines and disease outbreaks.

In addition to conducting the heuristic evaluation ourselves, we also invited people to use the app and recorded their experience. Using observations from these usability testing sessions, we created a journey map to identify the gaps and breaking points in a user's experience. 

DESIGN RESEARCH

Based on our analysis, we found that the biggest issue is the confusing user flow.

All of our user testing participants said that they wanted to leave the app at some points, especially when:

  • It's unclear to users what the next step is.

  • An element is broken and does not do what the user expects it to do.

  • Information fed to users is not personalized and not tailored to user's need.

Screen Shot 2019-05-24 at 2.32.32 PM.png

FUNCTIONALITY FLAWS

Buttons confusing, change from page to page, and some do not work.

CONFUSING USER FLOW

No information hierarchy, do not know what to do next.

DIFFICULT TO ONBOARD

Homepage does not state the purpose of the app or instruction to start.

USER RESEARCH​

To redesign the user flow, we want to take a step back and understand how people prepare for international travel.

 

To understand what users think, we sent out a screening survey to pick out international travelers and conducted in-depth user interviews with them. The following persona depicts a typical internal traveller we want to target.

Affinity mapping the insights from 4 different users

Persona Clara.jpg

USER INSIGHTS ​

We found that travelers rely heavily on Travel Doctors for information and to get vaccines and medicine.

Intrigued by this insight, we asked in-depth about people's visit to a travel doctor's office, and I illustrated the experience below.

 
A typical travel doctor visit
Storyboard-02.png
 

Some additional insights from user research:

SOLUTION IDEATION

Inspired by user research insights, we had the idea to create a “virtual travel doctor” experience.

 

To organize the large amount of health information in a way that's meaningful and intuitive for users, we decided to mimic a person's experience in a doctor's office. ​By matching user actions to real-world experience at a travel doctor's office, we were able to identify key themes and required features for the app.

 

DESIGN PROCESS

Test early and often​

We conducted several user testing sessions after the initial design based on the user flow above. During each testing round, we recorded testers reactions and analyzed users' experience as a team. The insights significantly helped us refine, sort and identify the most effective user flow and site structure.

WechatIMG1.jpeg

Paper sketches with user testing feedback

INFORMATION ARCHITECTURE

Create a clear information architecture

Therefore we rebuilt the sitemap of the application, and broken down the information into three big categories: vaccines, food safety and health kit packing list. Food safety and packing items are areas travel doctor will also cover with patients that are highly relevant to a safe international travel.

 

DESIGN SYSTEM

I created illustrations and a UI style guide in preparation for designing the high-fidelity prototype

 

For this project, I used material.io to create the design system to ensure maximum usability and compliance with standards.

Typography Scale.png

Illustrations I created with Adobe Illustrator

Illustrations.png
 

FINAL DESIGN 

Onboarding experience mimics real-world interaction at a travel doctor's office 

Just like how one would tell the nurse about your trip in a travel doctor's office, first-time users will input their next trip information to onboard. They can then manage their trips in the profile page.

 

Once onboarded, users are provided with four categories of information specific to their destination: vaccines and medications, food safety, outdoors safety and emergency resources. These pages contain relevant yet concise information and link to extra resources for users to dive deeper.

Demo 1.gif
Demo 2.gif

FINAL DESIGN 

Relevant vaccines information presented in an easy-to-digest way 

One of the pain points we discovered about the original TravWell app is that it provides comprehensive vaccine information without telling travelers which ones are the most important. Therefore, here vaccines information are divided into different categories: required, recommended and optional (ask your doctor).

FINAL DESIGN 

Auto-generated vaccines schedule to facilitate planning 

By left swiping, users can save vaccines they think they need to a timeline-styled schedule generated for them. The schedule will inform users when they need to get each dose of vaccine by based on today's date and user's departure date. This will help users plan in advance for multi-dose vaccines that span over a long period of time.

Demo 3 New.gif
Demo 4 New.gif

FINAL DESIGN 

Healthy travel packing list to ensure a safe trip

In addition to information to help with preparation before the trip, there is information for when users are on the trip as well. This list ensures that people pack the necessary medical resources associated with their destinations. User can easily check-off boxes to track their progress.

 

LEARNING & REFLECTION

This project was very collaborative in all stages within our team of 3 people. I enjoyed learning from my teammates who came from different background as me, and appreciated the opportunity to teach them about UI design.

 

One activity that we particularly benefited from was design studio, where all team members gather and brainstorm through fast, low-fi sketching. We did not only conduct one round of design studio, but several rounds. We first performed a design studio for the “virtual travel doctor visit” and later ran design studios whenever we got stuck on a user action. It was an effective method for team members to share their ideas with each other. We often built on each other’s designs and fused ideas together. This contributed significantly to the success of our project, which received the highest score in the class from instructors.

Designs studio paper sketches