TripSafe Mobile App
Health & Safety Travel App - iOS Prototype
Executive Summary
TripSafe was designed as an easy-to-use, one-stop platform for travelers to find, save, and share health & safety rules and restrictions for locations around the world as they plan trips post-Covid.
Developed from extensive user research into travelers’ post-Covid concerns, the TripSafe mobile prototype presents an efficient onboarding and sign up process, as well as reliable search & save and community-based features for travelers.
Before
After
Project Overview
Background: Travelers are facing more _____ as they navigate travel during covid., with each destination following different protocols. Leading to the need to search through an increasing amount of information and keep up with changes to restrictions, procedures, and alerts.
​
Problem: We have observed that the existing travel planning process and tools do not provide an efficient and comprehensive way for travelers to easily locate health and safety information and incorporate it into their trip planning, which is causing an increase in time and energy spent researching and considering health and safety measures for post-pandemic travel.
How might we help travel enthusiasts with concerns about traveling post-Covid better navigate restrictions, delays, and health and safety measures to more easily and efficiently plan safe trips and ensure peace of mind?
​
Solution: Our travel app is designed to make planning safe trips easier for travelers with post-Covid travel concerns. Our team used user-centric research and design to address existing problems and pain points relating to travel during covid and determine how an app could better streamline relevant information for travelers, present extensive and important resources in a streamlined fashion, and provide a pleasant, easy-to-use platform for this important information - to educate......
My Roles & Responsibilities
-
Conducting User Research: Users Interviews and Surveys, creating a User Persona
-
User Flows, Early Sketches, Low-Fi through Mid/High-Fi wireframes
-
Usability Testing
-
Designing and iterating wireframes for the Homepage, Navigation, and Primary and Secondary pages
-
Creating Mid/High-fi wireframes and clickable prototypes adhering to iOS guidelines
Deliverables, Tools
Used, Timeline & Scope
Deliverables: Native mobile app prototype, including homepage, navigation, all primary and secondary pages (About Us, Student Financial Aid, Resources & Data, Laws & Guidance, For Parents, For Teachers, For Administrators, Homeroom Blog)
​
Tools Used: Adobe XD, InVision, Miro, Procreate, Zoom, Google Slides
​
Timeline and Scope: 6 Weeks — Research, Design, and Test Mobile App prototypes
​
Team Members: User Research Phase: Kayla Martin
Research & Findings
Affinity Diagram / Empathy Map: From our research, we then grouped our....
Persona: We used our findings to construct our proto-persona, Emma, to help us tap into some of the challenges our users may be facing while travelers during the Covid-19 pandemic.
​
User Flows: By establishing a User Flow, we determined that Maria must navigate to a variety of areas on the site to complete her goal. She can do so through multiple paths, as demonstrated in our wireflows.
​
Competitor Analysis: When testing the color accessibility of the site, we uncovered issues with the current font colors, some of which do not pass the AA standards — particularly the main content colors and link colors.
​
Usability Testing: We conducted five Guerrilla User Tests to determine how easy the website was for users to navigate and observe if any paint points emerged. Through usability testing, we discovered many frustrations that arose from navigation and lack of context and clarity, as well as poor information architecture. We then determined which pain points were high priority for both the user and the website, allowing us to pinpoint the areas that needed the most attention.
Definition & Synthesis
/ Storyboard
​
Using redlining and annotating, I then combined the users’ pain points with our heuristic evaluations and color accessibility test results — applying them to the site pages in the form of design recommendations.
​
Navigation Analysis: Our team completed additional redlining/annotations for the home page and four main pages: Home, Student Loans, Grants, Laws, and Data. This allowed us to look closely at the existing navigation elements and determine which were working and where changes were needed.
Ideation & Analysis
Feature Analysis / Prioritization
​
I then used InVision to create a moodboard with inspiration from the government department, as well as other website UI, layouts, and patterns. Using this inspiration, I was able to bring together some alternative colors, fonts, and layouts to help revamp the site’s look.
​
Card Sorting: The U.S. Department of Education contains a vast number of pages and undefined sections with few navigation elements connecting them. Card sorting (define and group) helped established the needed sections, group information, find duplicates, and reorganize the connections to establish more fitting IA based on user feedback.
​
The structure step of card sorting allowed for a visualization of how the sitemap would eventually be organized, with the many pages coming together in an established hierarchy. At this point, it also became evident if there were additional repeated or unneeded pages that could be removed or combined to further streamline the navigation.
​
Sitemap Redesign: The card sorting process led to a new sitemap using the LATCH methods of alphabet, category, and hierarchy.
​
The revised sitemap aimed to simplify and streamline the experience of navigating the site, paying particular attention to items mentioned in the usability testing and to removing or combining any unneeded or duplicate sections.
Protoyping (low-hi)
Navigation UI Prototype: I used Adobe XD to create wireframes of the primary and secondary navigation elements, which were then incorporated into InVision to create a clickable prototype of this new navigation developed from our the usability testing and heuristic evaluations.
​
Navigation Components: The navigation components for the mobile and desktop redesigns of the U.S. Department of Education focus on ease of use, clarity, a bold look, and simple shapes.
​
New Wireframes Incorporated the following Key Updates:
-
Additional negative/white space
-
More images that better correspond to the content
-
Clear page sections, cards, and dividers to make information easier to view and find
-
More space dedicated to new menu items to make navigating the enormous amount of information on the site easier.
​
I used the wireframe mockups to create a clickable prototype that could be used to showcase and test the new navigation system and wireframe layouts.
​
UI Style Tile: The new Style Tile for the U.S. Department of Education aims to create a bold, helpful, authoritative, but also approachable brand feel for the website redesign. Friendly, colorful imagery of people and students, existing graphics from the department’s social media campaigns, and a more striking variation of the blue and green color palette were all incorporated.
​
UI Style Guide: The UI Style Guide expanded upon the Style Tile for the U.S. Department of Education. The guide added many new elements — lists, dropdowns, checkboxes — to contribute to the site’s bold look and organized, streamlined layout. I then applied the UI Style Guide to my desktop and mobile wireframes.
​
Mobile Wireframes: From the desktop wireframes, I then created a responsive web design grid system that would adapt to a mobile layout.
​
The final desktop and mobile prototype redesigns include iterations based on User Testing, incorporating menu and navigation changes, altered information architecture, and consistent, bold design to better convey the department’s mission and services.
User Testing + Outcomes
Rapid User Tests: In Rapid User Tests, I collected information on initial impressions:
-
Was the website’s purpose clear?
-
Was the initial impact appealing and trustworthy?
-
Were users inclined to remain on the website?
-
Did the menu navigation provide straightforward path for the users’ goals?
​
Users found the homepage to be bold and eye-catching, the site easy to understand and navigate, and the menu items straightforward and helpful — particularly For Parents, For Teachers, and For Administrators. They were also drawn to the Feature cards. One user pointed out confusion with the Login button’s purpose, leading to iterations on button name.
​
Second Round of User Testing: Overall, users found the mobile site easy to navigate and visually pleasing. There were a few notes and suggestions to consider for iterations:
-
Reordering select information sections, menu items, and buttons
-
Making Contact Us even more prominent and easy to find
-
Further utilizing the Helpful Links section
​
From User Testing insights, I applied changes to the prototype to address remaining pain points:
-
Contact Us added to menu items
-
Newsletter sign up added to mobile
-
Student Financial Aid menu reordered to start with Eligibility Requirements
-
Additional desktop menu iterations
-
Helpful Links tailored to match current page
Conclusion + Future Opportunities
The resulting mobile app offers users a way to easily search and locate information by travel destination as they plan for a trip or during travel. It also allows them to save their favorite locations to easily refer back to. An additional feature offers Tips from other travelers filtered by location in the _____ section (or directly from the location page), to provide continued advice and assistance from the travel community beyond official guidelines. Users can also post their own comments by location to offer tips and suggestions based off of their own trips.
​
In the future, I would like to further test specific elements, such as dropdowns instead of ____ scrolling for location restrictions information (to help reduce and organize text)----incorporate more components that could further streamline information within the page structures----- , test different button colors to explore increased discoverability and better meeting accessibility standards.
​
Thanks for checking out this project!
​