Overview
Two weeks | UX & UI REDesign | Team Project
ROLES TOOLS
Project Manager - Maxwell Graj Sketch, InVision
Research Leads - Heather Keller & Britni Thompson
Design Lead - Elva Björk Ástþórsdóttir
CLIENT
Center for Disease Control and Prevention (CDC)
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.
What is the CDC?
CDC works to protect America from health, safety, and security threats both locally & globally.
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.
Currently, they have multiple apps covering topics from travel and food, to triage field training but the CDC would like to find a cohesive way to combine their 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.
The Challenge
Currently, the CDC has multiple apps covering a variety of topics. During the two week design sprint our team was tasked with combining two apps, the “TravWell” app and “Can I Eat This?” app, into a single intuitive app. Both of the apps are in need of a visual redesign. One of the bigger challenges in merging the two existing apps was keeping the authenticity of both intact, while revamping the UI of each and keeping the designs consistent with one another.
Right from the start we learned through research, survey and interviews that the CDC apps are not very well-known and none of our interviewees or survey participants have ever used these apps before.
It was evident that we needed to step up to the challenge and create a beautiful yet professional design with the simple solution: To find valuable information about health and food safety as our users travel around the world.
Original screen shots of CDC TravWell & Can I Eat This?
OUR Design Goals
• Consider and understand the severity or impact of different bad things that can happen (getting Ebola vs getting food poisoning) and help travelers asses the severity of the situation.
• Evaluate how the features available on the mobile device (camera, GPS, etc) can be leveraged to make a great experience for users.
• Consider how social media can 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.
• Design for all situations. 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.
Project 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. Then our design team began turning sketches into low-mid fidelity mockups. During this process, our designers created a UI element kit to help collect and organize the design patterns, fonts and color choices. From here a 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 possibly user needs.
Project Plan of Work #GanttCHART
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 receive 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.
Surveys & 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.
In addition to the survey, our team conducted multiple user interviews addressing various patterns from survey responses as well as supplementary open-ended questions for our interviewees. Below are images of a Trello board outlining key insights from each interview. We wanted to group these insights together based on "I" statements from the actual interviews.
Both the survey and interview responses proved to support our initial research and became extremely valuable as our team began thinking about user personas and user flows.
Key Takeaways
Based on the the interview analysis and the "I" statements, below are a few insights and suggestions our team uncovered:
• 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 while abroad.
• I want a simple app / I want an intuitive app with easy search functions.
• I want tips on how to stay healthy while traveling / I want information on what to do if I get sick overseas.
• I want the ability to search and locate doctors, clinics & medical resources.
Personas & Journey Maps
Cliffton's Persona
“The world is my oyster, and I like my oysters 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's Persona
“Having kids 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.
Information Arcitechure
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 participants organized the app features based on importance level, our team was able to identify trends indicating possible 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 DESIGN & 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 government 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 & Visual Design
Site Map
User Flows & Problem Statements
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.
Summary & Next Steps
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.
Next Steps
• More usability testing and feedback
• Food allergy translator feature
• Medical records translator feature
• Integrations with other apps
• Exotic meat safety feature
• Link to State Department information
• Create another hi-fi iteration based on user feedback
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.
Other PROJECTS
