App Redesign Case Study
UX Design Lead
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.
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.
Although my focus was on solution ideation and high-fidelity prototyping, I was actively involved in all stages of the UX design process:
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.
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.
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.
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.
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.
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
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
Some additional insights from user research:
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.
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.
Paper sketches with user testing feedback
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.
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.
Illustrations I created with Adobe Illustrator
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.
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).
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.
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