Mark Pedersen
TravelOn
The CDC's smart travel app.
My Role
User Interviews
Affinity Diagram
Contextual Inquiry
Survey Design
Competitive Analysis
Heuristics Evaluation
Information Architecture
Ideation & Sketching
Persona Development
Paper Prototyping
Wireframing
Interactive Prototyping
Usability Testing
Timeframe
Two Weeks
Tools
Pen
Paper
Sketch
InVision
Survey Monkey
The Challenge
This challenge while on a team of three designers at General Assembly, was to combine two apps offered by the Centers for Disease Control & Prevention (CDC): TravWell and Can I Eat This? TravWell provides users with health advice while planning their trip, while Can I Eat This? provides an interactive guide for food safety while traveling. Of course, the solution wasn't to just blindly combine two apps. We had to carefully balance combining the core functions of both travel apps, while asking: What do people really want?
Competitive Research
Combining two apps meant that we had to complete twice the amount of competitive research. We synthesized our research in a life-sized features comparison chart:
Takeaways
- Destination search is supported in all apps
- TravWell is lacking "News & Alerts" and "Political" information
- TravWell has a useful vaccination log and reminder feature
- TravWell does not have a built-in "Risk Grade"
- Can I Eat This? is lacking general tips related to eating abroad
Heuristics Evaluation
Consistency and standards
Severity: 3
I conducted a Heuristics evaluation of a competitor app: TerrorView. The app does not display a home screen when users launch the app. Instead, users are taken to the last screen that they were on when they previously used the app, such as Guides. The app should follow platform conventions and provide a central screen for users to navigate from, when the app is opened.
User Research
User research began with a survey of international travelers, answered by 42 respondents. We then selected six of those respondents to conduct more in depth, one-on-one interviews with.
Survey Results
We started the user research process by conducting a survey of international travelers. To our surprise, Current Events and Crime were the topics of most concern - those would have to be added to the newly-designed app.
"I don’t want to go to a location that’s politically unstable, experiencing terrorism or war...when I travel I want to enjoy myself and I don’t want to be worried."
Affinity Diagram
After completing user interviews, we gathered our research and crafted an Affinity Diagram. The activity yielded six themes, with three of them being fundamental to our app redesign:
- I want advice from professional resources
- I need timely and relevant notifications
- I appreciate information on a host of travel-related concerns
"I eat whatever native food there is available. My mantra is to load up on Pepto-Bismol."
Personas
After gleaning insights about what travelers want, we were able to develop user personas. We chose to create primary and secondary personas, to best illustrate how TravelOn would be used.
Primary Persona
Our primary persona is a safety-conscious traveler who will use all features of the app - before and during her travel.
Secondary Persona
Our secondary persona is an adventurous traveler who will use the app in a more limited fashion - only when he is traveling to the most exotic places.
Solution
For those who are planning to travel abroad, TravelOn is a central resource for country-specific health and safety information - from CDC-recommended vaccinations and food advisories, to real-time emergency alert notifications. This allows travelers to prepare appropriately and make informed decisions while abroad.
User Flow
At the app Home screen the user has the option to search for a specific country by browsing the continent, or by directly searching by name. Once at the desired Country screen, the user can browse all of the general information. The user also has the opportunity to receive customized information by adding travel dates.
Site Map
The site map illustrates the information architecture of the app, showing how a user will navigate it.
Storyboard
Nelly planned a trip to India with her husband, Ned. She was already worried about traveling there and the recent outbreak of Zika virus has only worsened that fear. To her surprise, Nelly finds out that TravelOn, provided by the CDC, will help her prepare for her trip - she'll get recommended vaccines, food safety tips and real-time emergency alerts. Nelly and Ned can now travel with ease.
Ideation & Sketching
With the research phase behind us and a solution developed, we began to ideate and sketch. We sketched multiple versions of the screens that would comprise the app.
We then took our sketching up a notch, in order to settle on a design direction.
Paper Prototyping & Usability Testing
With a functioning paper prototype in hand, we embarked on our first instance of usability testing.
Results
- The images of the continents were small and prone to mistaken selection
- We replaced with larger graphics, spanning the width of the screen, to make the selection process easier
- Participants were unsure of what the word "Risk" meant when viewing the listing of countries on a given continent
- We replaced "Risk" with the phrase "Risk Grade" to provide clarity
- Participants were unsure of what the "Plan" button would do, while on a given country screen
- We replaced this with "Travel Dates" to better guide the user
- Some younger participants were confused by the term "Current Events," thinking that it may include information about pop culture - we
- This term was replaced in favor of "News & Alerts"
Results
- The large graphic on the Vaccines screen competes with the content below -
- We removed the graphic
- Participants thought that the check marks next to completed vaccinations were down arrows
- The arrows were replaced with "Added MM/DD/YY" to match the "Need By" convention already being utilized on the screen
Results
- The calendar input confused people, as they weren't sure if they could enter dates or not
- This was replaced with a traditional calendar
- Participants were unsure of what notifications they would be turning on
- Turning on of notifications was moved to the specific screens that they are related to
Wireframes & Usability Testing
With the feedback we received from our paper prototyping, we embarked on creating a set of digital wireframes and conducted repeated usability testing.
Results: Before & After
- Participant feedback indicated that applying different colors to the three risk grades would provide clarity
- Red, yellow and green were added to signify high, medium and low risk, respectively
Results: Before & After
- Participants weren't noticing the advisory at the top of the calendar when entering travel dates
- A popup window was added after the trip creation process, notifying the user that new information was now available
- Participants found the size of the calendar to be cumbersome
- It was replaced with a larger caldendar
Results: Before & After
- Participants were unsure of why vaccine and document information was placed where it was
- "Medical Log" and "Document Log" headings were added to provide clarification to users
- The process of adding a new vaccine to the log, within the expansion box, confused participants
- The expansion box was replaced with a "Plus Symbol," which launches a dedicated "Add Vaccine or Medication" screen, providing a simplified method to add a vaccine or medication
Interactive Prototype
Final Thoughts
This was an exciting project in which were able to preserve the integrity of the original apps, while adding user-requested features, such as information on crime and security. Going forward, other features that would make a great addition, include: post-trip notifications, country comparisons, embassy contact information and app-level password protection.
