Overview

Time: 2 weeks

Project Type: App Redesign

Team: 4 Designers

Research Lead: Britni Thompson & Heather Keller

Project Manager: Maxwell Graj

Design Lead: Elva Björk Ástþórsdóttir

Tools: Sketch, InVision

Our
Client.

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.

What the CDC
Needs.

Currently, the CDC has multiple apps covering a variety of topics. During these past two weeks, we had the challenge of combining two apps, their “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 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 to find valuable information about health and food as they travel around the world.

Original CDC TravWell & Can I Eat This?

Prototype 1

Prototype 2

Design
Goals.

  • Consider the severity or impact of different bad things that can happen (getting Ebola vs getting food poisoning) and help travelers understand how worried they should really be about different things
  • Consider you might leverage the features available on the mobile device (camera, GPS, etc) to make a great experience for users
  • How might social media be used to leverage traveler knowledge and ‘of-the-moment’ news?
  • How might CDC provide checks and balances to that information, and prevent the spread of misinformation
  • After-the-fact scenarios…a bad thing has already occurred, now what?
  • Combine health and food information for travelers to different locations
  • Help travelers understand how concerned they should be about various risks

Plan of
Work.

 

This section covers our teams plan of work throughout the 2-week design sprint.

Our team created a Gantt chart to begin organizing all of our deliverables, tasks and subtasks. Milestones were created to help divide up the different stages of work and to give the team a visual representation on our progress. Multiple check-ins occurred throughout the week, allowing our team to mark our completed tasks, add new tasks and adjust our plan of work as needed.

As the first week of our design sprint came to an end, our team was right where we needed to be. We had another check-in to discuss our plan of work for the weekend, to make sure everyone felt comfortable with our progress and to address any questions or concerns. This is when we started to transition the conversation from research to visual design.

Our design process consisted of multiple group check-ins and sketching activities, such as “the crazy eight”. Our team started this process by creating a site map and feature inventory list. This allowed the team to move on to user flows and design sketches that fit the needs of our user personas and helped address their specific problems. The our design team began turning the sketches into low-mid fidelity mockups. During this process our designers created a UI element kit to help collect and organize our design patterns, fonts and color choices. From here, a beautiful high fidelity mockup was created and turned into a functional prototype.

Through multiple group meetings, activities and debates our team was able to navigate this two week design sprint almost as seamlessly as the CDC app redesign itself. We worked with one another to come up with user friendly layouts and accessible design patterns. We continued to remind one another who our users are and could be and did our best to address all need.

User
Research.

Our Process

To begin user research, our team looked over the two existing apps (TravWell & Can I Eat This?) to discover what the purpose of each app was and how they functioned. From there we were better prepared to create our survey questions.

Each group member wrote out several questions, we compiled them together took out the redundant ones then put them into a google survey. We received 33 responses in total that greatly help us not only get a start on creating interview questions but giving us insight on what our personas would need.

Our research team interviewed 4 people to help further understand what the problem was and what features the app truly needed. To get to that we placed the responses from the interviews and survey into two affinity maps. Once that was sorted and “I” statements were created we had a solid idea of who are personas were as well as their pain points.

Survey & Interviews.

After the initial research phase was completed and our team had a solid understanding of the project goals, user types, and competitors we created a survey to send out to help support our research. The survey received a total of 28 responses. 
The goal of this survey was to help our team gain a better understanding of the types of users who will actually be using this app; who is using or has used the current CDC app; does the general public even know these apps exist?
Below are selected survey results that help paint the picture of our user landscape and user knowledge pertaining to the CDC.

Key
Takeaways.

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).

Personas & Journey Maps.

Following the survey and user interviews, we synthesized our research findings and were able to create two personas which allowed us to move into journey maps.



Cliffton

 

“The world is my oyster, I like mine with hot sauce.”

Cliffton (25) 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.



Susan

 

“Having children is a reason to travel, never a reason to stop.”

Susan (42) 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. 

Competitive & Comparative
Research & Analysis.

 

 

 

Our Process 

For competitive and comparative research, we started with researching other organizations similar to the CDC – more specifically ones that were centered on health and food safety for travelers.

The World Health Organization (WHO) was closest to what we thought was direct competition, so we included their app in our feature inventory. We also included MyID, which is an app that stores personal medical information for easy access on-the-go, and we included Vaccine Record, which is an app that stores vaccine records and informs users of how long vaccines last.

Lastly, we included the Travelers’ Health page from the CDC website in our feature inventory. We decided to include this because we noticed the website offers users much more information and features that could be useful in an app format.

 

 

Feature Inventory

Our goal with the feature inventory was to compare and identify common features among the apps, as well as to visually analyze how to best combine the Can I Eat This? and TravWell apps.

We also wanted to see what our 2 apps could be missing as far as key desired features go, and how we could best add those features in our design process. Through this and our 2 card sorts, we were better able to understand what features to prioritize, and we would be able make well-informed design decisions moving forward.

 

 

Closed Card

Sort 1

The next step of our process was to start thinking about the navigation system. Initially our team conducted a closed card sort with a total of 30 different cards  that listed a combination of the CDC TravWell and Can I Eat This? application features and 3 predetermined categories which identify feature importance.

This helped us understand users priority levels and provided us with insight into what our users considered to be the most and least important features.

This table shows the percentage of your participants who sorted each card into the corresponding category.

It attempts to propose the most popular groups based on each individual card’s highest placement score.

 

 

 

Closed Card

Sort 2

Following the initial closed card sort, our team still needed to understand how potential users would organize all of the application features from both the CDC TravWell and Can I Eat This? application. Because the particiapants organized the app features based on importance level, our team was able to identify trends indicating possisble categories. 

In this second closed card sort, we used the information previously gathered to form predetermined categories allowing participants to categorize the various app features. This helped our group come up with a cohesive navigation system and uncover logical trends based on how our participants organized the provided card deck.

This table shows the percentage of your participants who sorted each card into the corresponding category.

It attempts to propose the most popular groups based on each individual card’s highest placement score.

UI Element
Analysis.

Both of the previous card sorts helped our team identify the most important features that we felt needed to be showcased in our app redesign. However, our team felt it would be important to research and analyze similar mobile applications to discover the various design patterns and UI components used.

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.

Below are a few UI examples of mobile applications that our team felt encompassed successful design patterns and followed the USWDS principles.

Sketching and Visual
Design.

Site map

User Flows

Problem Statement

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.

PROBLEM STATEMENT

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.

Sketching Iterations

Low – Mid Fidelity Mockups

Hi Fidelity Mockups

Safe Travels UI Kit 

During the visual design process, our lead designer took the initiative to create a UI style guide. This was a huge help for the group, as it encouraged us to keep organized and consistent files, components, typography and colors. Because multiple designers were working on the low, mid and hi-fidelity designs at the same time, this UI kit became even more necessary enabling our team to work faster, easier and smoother. This UI kit can also act as a deliverable to our client. 

Solution Statement and
Next Steps.

 

Summary

Although the app is not yet released, we believe “CDC Safe Travels” seamlessly merges the “TravWell” and “Can I Eat This?” app into a new user-friendly, fun-to-use mobile application. Not only does it provide health and safety information and warnings, but it also helps users that are looking for safe food and drinks in foreign countries.

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.

 

The Solution

 

Next Steps

  • Usability testing and feedback
  • Food allergy translator feature
  • Medical records translator feature
  • Integrations with other apps
  • Exotic meat safety
  • Link to State Department information
  • Clean up case study

Other

Projects.

Advocates for Children - CASA

Online Training Platform

Love & Withstand

Website design for a healing and empowerment coach

Case study coming soon…