Travel Alerts & Advisories Redesign
Improving the Day-of Travel Experience
Role
Principal UX Designer
Team
3 others- UI Designer, Design Lead, Copywriter
Timeline
4 months
Tools
Figma, Userlytics
Key Outcomes
Improved clarity in a key stage of the customer journey
Streamlined processes for internal stakeholders
Created a modern and visually appealing experience
The Task
At Porter we were engaged in a large, multi-year project to improve communication touch points in the customer’s pre-flight journey. The Travel Alerts and Advisories page was identified as one of the key communication touch points to improve.
The initial task:
Modernize the visuals, bring it inline with the recently redesigned pages on the site
Analyze the user experience and make any necessary improvements
Research/ Discovery
Internal interviews
A couple of teams at our company post communications to this page – the Communications Team and the Operations Team. We ran discussions and workshops with these teams to get their insight on specific usability issues with the page.
We uncovered the following issues:
Even the teams that post communications to the page could not tell us definitively what type of alert would be housed under each category.
Unclear/illogical categorization of alerts/advisories
The inability to identify when a new alert has been posted under a tab that isn’t currently open
Important information hidden in collapsed accordions
Existing page (alert accordion collapsed):
Existing page (alert accordion expanded):
Usability Testing
I performed unmoderated usability testing of the existing page to validate the concerns uncovered in our stakeholders discussions. I also wanted to find out if there were any other issues not yet identified.
The testing validated the initial concerns, showing that:
Users did not understand the differences between the categories
Users felt the information shown in the collapsed accordion was not sufficient
The testing uncovered further insights:
A lack of information hierarchy in the expanded accordions
A lack of guidance/information on next steps to take
The other information on the page was vague
Strategy & Concepting
Taking into account the issues we discovered, I took a deeper dive into the use of the page:
When do people use this page?
Day of travel, or day before travel
Most often: have an existing booking
Less often: checking for someone else who has a booking
What do they need to know?
Is there anything that may affect my flight?
Is there anything that may affect my travel to/from the airport?
Considering when and why people use this page, I made the assumption that:
A user comes to this page with a specific airport / location and date in mind
Recategorization of Alerts and Advisories
Now that I defined the specific use cases, it was time to tackle the reorganization of the different types of alerts and advisories. This was an important first step, as this would determine the structure of the page.
Using examples of past alerts and advisories, I identified a clear distinction between types. I used that to create 2 groups to organize the alerts more intuitively:
Those that impact flights
These are posted by the Operations team. In the expanded state, these alerts are accompanied by a templated descriptive text each time.
"Day of Travel Alerts"
includes traffic around the airport, weather-related events, airport-related updates, and company-wide service issues
Those that are nice to know, but don’t necessarily affect the day-of travel.
These are posted by the Communications team.
"Other Alerts"
includes government or policy- related events, not necessarily specific to a location
Copy Improvement
We recognized that in order to facilitate this new organization of alerts, the alerts must be written in a standardized way. This would allow us to organize them in a consistent way on the page.
We worked with our team’s copywriter to rewrite the templates for alerts and advisories in a way that indicates the effect on the customer’s travel, as opposed to simply stating the events.
We also identified room for improvement with the templated copy. We worked with our team’s copywriter to create copy that was:
Simpler, clearer and more concise
Action-oriented as opposed to informational
Wireframing
Collaborating with the UI Designer on the project, I sketched out some wireframes based on the 2 organizational groups we decided on - “Day-of Travel” and “Other Travel Alerts”.
Exploring Filter Methods
Considering the assumption we made that the majority of users are coming to this page with a city/airport in mind, we hypothesized that some form of filtering of the alerts would be helpful.
We explored a few different approaches to filtering, but decided on a prominently featured search bar. This layout addresses customers with different needs, providing flexibility, while not over-complicating the use of the page.
High Fidelity
Once the concept and strategy were nailed down, I moved forward with higher-fidelity wireframes. It was an iterative process that involved detailed exploration of the different aspects of the page.
Below are screenshots of the different content and functionalities on the page.
Searching For a Specific Airport
Advisory Content- By Type
Usability Testing
Did our design achieve the goals and solve the problems identified?
From testing, I was able to validate the following:
The organization of the alerts and advisories was intuitive.
The alert headlines, presented in the collapsed state of the accordions, were clear and provided a good amount of detail.
The information in the expanded accordions was easy to read and provided helpful information for next steps.
Through testing, I also evaluated the usefulness of the search bar:
The feedback was somewhat positive, but mostly neutral.
We knew that the search functionality would be helpful in situations with many alerts and advisories posted on one day. However, we learned from the internal stakeholders that we usually do not have that many alerts posted at one time.
Thus, we had to re-evaluate the search bar. We decided that it would surface whenever there are 5 or more alerts/advisories. It would be hidden for anything less than that.
Handoff & Guidelines
The success of the new page design lay heavily in the new categorization of alerts and advisories. A new categorization system meant that:
The internal communications tool used to post communications to the page would require updates.
The teams posting to the page would need to understand the new system and the changes made to the tool they use.
To tackle this supporting work, we interviewed the teams who post to get a better understanding of how they use the tool. From there, we were able to make some changes to the backend system and then create guidelines for reference.
Interview teams
who post alerts/advisories to understand how they use the tool
Align back-end and front-end
Align back-end labelling system with front-end (customer-facing) labels to reduce confusi
Create guidelines
for teams to use as reference when learning and implementing the new system
Creating Guidelines
I presented the guidelines to the teams, explaining the new classification system. I showed the new designs to demonstrate how the new system improved the UX. Then I took them through the changes made to their internal communications tool.
The guidelines also included instructions on how to write the alerts and advisories, as a consistent approach to this would be important for the UX.
The teams provided me with feedback on these guidelines, and I made modifications where necessary. We recognized that close collaboration with these teams was important in the successful launch and future use of the page.
Next Case Study