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?
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:
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
Consistency and standards
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 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.
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."
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."
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.
Our primary persona is a safety-conscious traveler who will use all features of the app - before and during her travel.
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.
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.
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.
The site map illustrates the information architecture of the app, showing how a user will navigate it.
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.
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"
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
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
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.