Terra Dotta Alert Traveler
Capstone Project: University of Michigan School of Information
Role: UX Designer and Researcher
Client: Terra Dotta Alert Traveler
Project Timeline: September 2020- May 2021 (8 months)
Tools Used: Figma, Miro, Mural, Excel, Qualtrics
Team Members: Anna Gilhool and Jason Fender
Project Overview
Purpose
For my Senior UX Capstone project at the University of Michigan School of Information, I worked with Terra Dotta Alert Traveler as a UX Designer to increase student traveler engagement on the application. Through the Capstone project, my team members and I executed the entire UX design process to understand stakeholder needs, determine UX requirements (considering insights generation from user research data and client prioritization), design low-fidelity prototypes, run usability tests, and finally create a high-fidelity prototype.
Background
Terra Dotta is a software company that facilitates educational institutions' and business application process and operations for international travel experiences. This project focuses specifically on the Terra Dotta AlertTraveler application, which facilities communication between institutions and students studying abroad through alert notifications for real-time events. The AlertTraveler app is designed to make safety and security simpler for the traveler by giving travelers access to information about the host country, real-time alerts, and the ability to do self check-ins to let others know where they are. These features are key for emergency situations, but only using the application during a crisis means users have low familiarity with the application. Students are made aware of the application through their institution before studying abroad, but in order to increase familiarity, frequent user engagement is crucial. Our team was tasked with increasing user engagement among student travelers through developing new features and improving upon existing ones.
Project Goals
The overarching goal for this project was to increase engagement on the application, and improving and/or introducing new non-crisis related features that will increase users’ frequency of engagement. Improving features for everyday use will allow users to be more familiar with the app. Consequently, in emergency situations, users will be better equipped and know how to better operate the application. This will help to improve their response time to a crisis and overall safety, which is the core purpose of AlertTraveler.
Research Overview
Research Goal
Our primary research goal was to understand what features can be implemented on AlertTraveler to increase student traveler engagement on the application.
Research Questions
What design features need to be improved to follow best practice usability standards?
What non-crisis information do student travelers value while studying abroad?
What information do student travelers want to search for while traveling?
Research Methods
Heuristic evaluation: Test for usability issues on the AlertTraveler interface
Survey: Learn about students previous experiences studying abroad
Interviews: Gain further detail and knowledge about the study abroad experience’s specific pain points and how the Terra Dotta Alert Traveler app could fulfill those needs
Key Research Findings
The most frequent paint points experienced while studying abroad fell into the following categories: logistics, mapping/transit, and researching in advance
Student travelers highly value being informed about safety issues
The most salient themes regarding what would make students feel safer were friends/social networks, phone service, and research before traveling
83 of 87 student travelers (93.1%) like receiving travel tips from their friends
Common frustrations were not accessing the app offline, heavy data usage, and inaccurate information
Six students (86%) said discussed how insufficient research limited their experiences abroad and researching in advance could have increased their feeling of safety
User Persona and Scenario:
UX Requirements
Map feature: Allow student travelers to better visually understand their surroundings through alerts and recommendations, including the ability to research in advance.
Peer-to-Peer Interaction: Provide interaction to support and build student traveler’s social network through crowdsourcing
Offline Access: View content when internet access or data connection is unavailable or unstable
Design Process
Our team followed the double diamond design process throughout this project. This process has two major phases: research and design. The research phase is defined in the previous sections of this report. With our findings we entered the design phase. Early phases of the design phase included brainstorming. Brainstorming allowed our team to produce a plethora of ideas. After ideation, we finalized on a new feature to incorporate into the Alert Traveler app. This feature incorporates a new map view on the app, which allows users to ‘drop a pin’ at their current location and choose to report an incident (e.g. protest, pick pocket, bar fight, etc.), add a recommendation (e.g. restaurant, museum, attraction, etc.), or share their walk with friends to promote better safety and enhance student travelers' social network. After defining this feature, our team iterated over prototypes (low-fidelity to high-fidelity prototypes), received user feedback, and created a final high-fidelity prototype.
Brainstorming
Using Mural, our team individually wrote on virtual sticky notes different ideas for new AlertTraveler app features. While brainstorming each team member kept in mind our research findings and UX requirements, focusing on ideas that prioritized social networking, safety, and offline access. After individually brainstorming, our team came together and shared our ideas. We identified common feature ideas between ourselves, narrowed down our ideas, and decided on a feature to start prototyping. Before prototyping we visualized the interactions within the new feature by creating a user flow on Miro.
Paper Prototypes
After brainstorming and creating the user flow, our team started low-fidelity prototyping. We started with paper prototypes, which gave us flexibility to easily change design decisions and quickly sketch out our thoughts. We synchronously talked over design decisions and once we came to a consensus on the key actions and functionality of the app we proceeded with making wireframes.
Wireframes
Next, our team members drafted wireframes of the key actions for the new feature. Wireframes helped our team identify the layout and ways in which we wanted to display information to users. Pictured below are key screens from our low-fi prototype. The screen on the left was the initial design for the home screen. Clicking the large widget would take users to the map view pictured in the middle. Here, users can view alerts or recommendations in their current location and add a pin to the map by clicking on their current location.
Mid-fidelity Prototype
Moving onto our mid-fidelity prototype, our team was able to get valuable feedback from both our instruction team and our student peers in our class on our wireframes. We then took this feedback and made changes to the next iteration in our prototype design process. After these changes were made, we moved onto coming up with a color palette and models that would be used so that there was a cohesive and fluid mid-fidelity prototype.
The Home Screen allows users to view relevant country intelligence based on their current location. Users can also tap the map widget to view the Map View screen.
The Map View Screen shows student travelers alerts and recommendations in their area in relation to their current location. The green pins indicate either alerts to recommendations based on the selection they made via the toggle. The orange dot represents the user’s current location. When this icon is tapped the user will be directed to a screen with the following options: report an incident, add a recommendation, or walk with me.
The Alert List View Screen shows users alerts in their area in a list format. Giving users this screen stems from the original design of the AlertTraveler app and allows users to have options for viewing content.
User Testing
Our team gained feedback on our mid fidelity prototypes through peer, instructor, and University of Michigan student travelers. We asked University of Michigan students a series of five tasks: search for protest alerts in Madrid, view the recommendation for the Museo del Prado in Madrid, add a Madrid recommendation to the map, find out what the official languages of Madrid are, and view your trip itinerary to Amsterdam. After getting feedback, we iterated over our mid-fidelity prototypes. The feedback and changes are defined in the table below:
High-Fidelity Prototype
From the feedback collected through our team’s user testing we iterated over our mid-fidelity prototypes to create our high-fidelity prototype. The high-fidelity prototype reflects user needs, while also incorporating our client’s needs. The interactive prototype can be found here and a video walk-through below.
In the following sections, we will discuss the key user flows in the new feature design, our reasoning behind the iterations we made, and the key screens promoting user engagement.
Check-In Feature
After meeting with the client to walk through our mid-fidelity prototype, we made changes accordingly that are reflected in our high-fidelity prototype. One change took place on the Alert List View page. A key feature of the current app is the Check-In feature. This feature sends out country-wide alerts from administrators to student travelers and asks them to do a safety check-in. In our previous iterations, we had not prioritized the Check-In feature, but in our final design our client asked us to incorporate it. In order to incorporate this feature into our app and integrate the new peer alerts component we had designed already, we combined it on one screen. As an extension of this, we iterated on the Home Screen to incorporate the Check-In feature as a shortcut which now lives in the Alert List View. Placing the Check-In feature on the Home Screen as a shortcut makes it easily accessible and reinforces the importance of safety for our users which is the original purpose of the existing app. Overall, our final design balances the client needs, student traveler needs, the key purpose of the original app (safety), and a new peer component to help drive engagement.
Map View
From peer feedback and user tests, we learned that users had trouble differentiating between alerts and recommendations in the mid-fidelity prototype because the pins were the same color (all green) in both the list and map views. From this feedback, we chose to make the color of the alert pins red (to indicate caution/potential danger) and the recommendation pins green. It is important to differentiate between the two to ensure that student travelers are well aware of dangerous situations, as this is one of the key components of the existing application. Users also have the ability to toggle between alerts and recommendations on the map view, but in order to ensure that users would see alerts no matter which selection they have made, we chose to mute the color of the pins that were not within the selection (i.e., green pins were muted when in alerts view, and red pins were muted when in recommendations view).
With these changes, we also changed the color of the current location pin to be blue, matching the Terra Dotta color palette. Furthermore, the entire feature’s color scheme is complementary to Terra Dotta’s current application for a seamless integration. Please find the full color guide in the appendix of this report.
Another way that we reinforced the distinction between the alerts and recommendations pins beyond color was through adding icons to the pins. The alert pins have caution symbols, while the recommendation pins have various icons depending on the category of the business (e.g., historical landmark/museum, restaurant, bar, etc.). This distinction within the recommendations view gives users the ability to visually sort through the information they are looking for on the map view and further drive engagement with the feature. To improve the overall user experience with these new improvements, designers chose to make all of the pins on the map bigger.
Evaluation Study
To evaluate the new feature design, our team conducted usability tests with a post-test survey
Research Questions & Goals
Our team evaluated the usability of the new feature design. Our primary research goal was to understand what features can be implemented on AlertTraveler to increase student traveler engagement on the application. For this new feature to be successful, usability standards need to be met, as usability often determines success of a system. To test this we asked the following research questions:
Does the new feature design provide a seamless user experience?
Is the design driving engagement for first time and current users of the app?
Procedure
To answer our research questions , our team conducted a usability test asking participants to complete five tasks: view your trip itinerary to Amsterdam, search for protest alerts in Madrid, view the recommendation for the Museo del Prado in Madrid, imagine you are located at a cool spot and you want to add it as a recommendation to the map: complete this task, and find out what the official languages of Madrid are. After the usability test, we asked users to fill out a post-test survey. This survey included 10 questions based on the existing usability scale: System Usability Scale (SUS).
Recommendations and Adjustments to Final Design
During two tasks, users tried to use the search bar as a fully functional navigation tool. Seeing this user behavior, our recommendation is to make the search bar fully functional so users can type in whatever they’re looking for (i.e., allow a user to type in a specific category or a specific place), instead of only choosing categories. This does not require any design changes, but requires developers to know the specifications of the product.
When conducting usability tests, users had the most difficulty completing task 4: imagine you are located at a cool spot and you want to add it as a recommendation to the map: complete this task. The difficulty with this task stemmed from users not understanding where they were currently located. To fix this, the current location icon should pulse for 3-5 seconds upon entering the map and should be movable (e.g. users can move the current location icon anywhere on the map). Because we can’t prototype this functionality in Figma, we recommend that the client build out this functionality in the workable prototype and do user testing to ensure our interpretation of this potential barrier is valid.
Finally, our new feature was designed with the intention that the user would undergo the current onboarding process that exists on AlertTraveler. We highly recommend that this onboarding be used with our new design feature and also in conjunction with a new user tutorial to further reinforce the skills necessary to use the app.