CLIENT Center for Disease Control and Prevention (CDC)
CATEGORY UX/UI Design
TEAM Britni Thompson, Heather Keller, Max Graj, Yours Truly
ROLE Lead Designer + Assistant User Researcher
GOAL Combine CDC’s “TravWell” app and “Can I Eat This?” app into one simple, easy-to-use app, giving users a simple solution to find valuable information about health and food as they travel around the world.
TIME 2 weeks
TOOLS Sketch, inVision
WHO ARE THE CDC?
CDC works to protect America from health, safety, and security threats both foreign and in the U.S.
Whether diseases start at home or abroad, are chronic or acute, curable or preventable, human error or deliberate attack, CDC fights disease and supports communities and citizens to do the same.
Screens of the new design.
THE CHALLENGE
Currently, the CDC has multiple apps covering a variety of topics. During a two week period, our team had the challenge of combining two apps, CDC’s “TravWell” app and “Can I Eat This?” app, into a single intuitive app. Both of the apps are in need of a visual redesign, as their UI elements are dated, which makes them unappealing and not so fun to use.
Additionally, right from the start we learned through research, survey and interviews that the CDC apps are overall not very well-known, and none of our interviewees or survey participants have ever used these apps before.
Therefore, it was evident that we needed to step up to the challenge and create a beautiful, yet professional-looking, design for a simple solution for people to find valuable information about health and food as they travel around the world.
Screenshots of the original “TravWell” and “Can I Eat This?” apps.
RESEARCH METHODS
User Interviews
User Journey Maps
Information Architecture
Competitive & Comparative Analysis
Two Personas
Feature Inventory
THE KICKOFF
At the start of the project, none of us really knew what we were getting into. We did not know much about the CDC and their multiple different apps, other than that they stand for Centers for Disease Control and Prevention. Therefore, we knew we needed to conduct a lot of research and gather as much information as we could in a short amount of time in order to create a simple and well-designed app.
Gantt Chart to keep track of our tasks.
RESEARCH
We created a survey to send out to people of different age groups and backgrounds. Following the survey, we did 4 user interviews where I interviewed two users and took notes during the other two interviews. Our goals were to understand the challenges travelers faced while planning their trips overseas, as well as to learn about how they planned for unexpected health issues while abroad.
WHAT WE LEARNED
We put together affinity maps from both the survey and interviews, and created “I” statements. The key takeaways were:
- I would like to be aware of diseases but don’t go out of my way to look for them.
- I would like to know if there are any travel restrictions or entry requirements.
- I need to know what vaccines I am required to get.
- I am worried about getting sick while abroad I have gotten sick before.
- I want information on what to do if I get sick overseas (Find doctors, clinics, etc).
A few outtakes from the survey and interviews we conducted.
THE DISCOVERY
It was clear that travelers don’t go out of their way to look up what diseases to be careful about, even if they want to know what to be aware of. However, it surprised me to hear about how many people have gotten sick overseas, but didn’t know what to do or where to look in that situation. Most of them tried to wait it out while in pain, as they did not know who to call. It became evident to us that travelers need a platform where they can keep all of their travel information and alerts in one place, as well as be able to prevent getting sick from food and beverages, and in the worst case scenario, find a nearby clinic or call local authorities.
PERSONAS &
PROBLEM STATEMENTS
Following the survey and user interviews, we synthesized our research findings and were able to create two personas and problem statements, which allowed us to move on with user flows and an app map.
"The world is my oyster, I like mine with hot sauce."
Cliffton loves traveling and backpacking the world by himself. He has set himself a goal to visit every country in the world in his lifetime, but needs a platform that can both give him information on food and water safety, as well as provide trustworthy resources in case of an emergency if he ever got sick again.
Cliffton's User Flow.
"Having kids is a reason to travel, never a reason to stop."
Susan is a loving mother of four kids, and married to a wonderful man. Susan has always loved to travel, and she wants her kids to experience the world with her. She is starting to plan out a trip to South Africa, and needs a clean and intuitive platform that can provide trustworthy information on vaccines and other required documents in a secure way, as she wants to be able to keep all their information in one place.
Susan's User Flow.
THE DESIGN
Supported by the U.S Web Design System (USWDS), one of our teams key takeaways is that govenment and medically based applications tend to design in a visual style which, “offers a clean, modern aesthetic that meets high standards of usability and accessibility while promoting credibility and trust” (USWDS).
This additional research helped our team gain a deeper understanding into the considerations needed to design a successful application for non-profit, medical and government based organizations or programs.
With this in mind, we did a crazy 8 challenge as a team where each of us sketched out iterations of every frame of the user flow, one minute each. With this group exercise, we were able to gather the best ideas from each team member and combine them into low-fidelity wireframes.
Crazy 8 Sketch Iterations.
CLIFFTON'S LOW-FIDELITY WIREFRAMES
SUSAN'S LOW-FIDELITY
WIREFRAMES
UI ELEMENTS &
PATTERNS LIBRARY
As the lead designer, I was aware of the short time at hand and wanted to speed up the design process to make the transition from low-fidelity wireframes to high-fidelity wireframes as smooth as possible for everyone involved. I did research to ensure our designs would be compatible with iOS and HIG guidelines. From the information gathered, I created a UI Elements & Patterns Library, which helped our team clearly see the direction we were going in with our product. This allowed our designs to be consistent throughout the whole product, despite having two different designers working together on the same prototype. We were able to work faster, easier and smoother with a well organized design library that we could pull everything from, from the color and typography, to buttons and other functions.
UI Elements & Patterns Library, designed and created by me.
Cliffton's High-Fidelity Wireframes.
CLIFFTON'S INTERACTIVE
PROTOTYPE
Susan's High-Fidelity Wireframes.
SUSAN'S INTERACTIVE
PROTOTYPE
SOLUTION STATEMENT
Safe Travels, a CDC mobile application, solves the problem of merging “TravWell” and “Can I Eat This?” into one user-friendly mobile application while providing health and food safety guidance to a variety of users.
LEARNINGS
With the pressure of a short timeframe, it was difficult to get everything we wanted to include in the app. We had a lot of great ideas that we believe would be extremely helpful for travelers. We worked hard as a team on the research process, which allowed for a smooth design process despite the short time. I was very fortunate with great team members who were all flexible and helpful in all aspects of the project.
NEXT STEPS FOR
CDC’S SAFE TRAVELS APP
- Usability testing and feedback
- Food allergy translator feature
- Medical records translator feature
- Integrations with other apps
- Exotic meat safety
- Link to State Department information