Modernizing Porter’s Site Navigation
Role
Principal UX Designer
Team
1 other- Design Lead
Timeline
4 months
Tools
Figma, Userlytics
Key Outcomes
Created an intuitive navigation experience for users, validated through testing
Laid the groundwork for a more visually modern design
Established scalable patterns for future site architecture growth
The Task
Redesign Porter’s dated header navigation and notifications banner.
Known issues:
Lack of IA in the dropdown menus
Dated UI
There were 2 different layouts in use on the website. Some recent updates had been made to the header when the page width was expanded to 1440px. Not all the pages were expanded, though, and these pages still used an even older header layout.
Research/ Discovery
Initial User Testing
We performed some user testing that verified the known issues and exposed some others:
Unintuitive organization of information across menus
Users didn’t know which headers to look under for certain information
Unintuitive IA within menus
Users had to read through all list items to find what they were looking for
Styling of landing page links not consistent
Users didn’t know when something would be clickable or not, making it difficult to find what they were looking for
Information Architecture
I looked at other airlines to see how they were handling IA. The only commonality was the organization of the top level navigation by stage of customer journey. Otherwise, there was no consistent pattern between placement of pages under the headers; it seems that everyone does it differently.
Visual Design
For visual design inspiration, I sought examples of clean and organized navigation in competitors and also across the web in non-related industries.
Strategy
Breaking down the IA
I started by asking the question:
How does the user approach searching for something on our site?
I realized that users have different needs depending on what stage they are at in their journey:
Pre-booking: What can help me inform my purchase? Where should I go, what does Porter have to offer me?
Post-booking: How can I view or make changes to my itinerary?
Pre-travel: How can I prepare for travel? What will my flight experience be like?
This seemed like a logical way to approach organizing the navigation, but it wasn’t actually that straightforward. Some pages are accessed at multiple points in the user’s journey
Ex. someone might purchase a bag when they book their flight, while someone might add a bag after booking. Thus, the baggage pricing page is relevant at multiple stages.
Limitations
It would have been ideal to completely overhaul the IA, but this was not in scope. I wanted to make some of the important links in the footer available via the main nav through a reorganization of the IA. For mobile, I was at least able to bring the footer navigation items into the navigation menu.
Wireframing
I began by laying out the dropdown menus by grouping pages based on the information architecture I had decided on. Once the menu items were laid out, I was able to make adjustments to further improve the organization:
User Testing
I performed some user testing of the wireframes, which produced useful feedback that told me I was on the right track.
Use of icons
Testers liked the icons and illustrations. They helped with understanding the meaning of headers/titles, and helped draw attention to important items.
Headers
Grouping of pages via headers helped testers scan to find what they were looking for.
Clickable vs. not clickable: most people could tell what was clickable or not, especially when using the hover state.
Arrangement of links
Testers liked how the page links were separated into separate panels within the drop-down.
Testers found the Help & Contact and FAQ links convenient
Search icon
Some testers missed the search icon entirely. It could be either more visually distinct or a text label could help.
Final Wireframes
I handed off my wireframes to the UI Designer, providing guidelines based on the work and research I had done, as well as the main findings from user testing.
Here are the final wireframes:
Reflection
Working within constraints
This project taught me about creating a good solution within constraints. I really wanted to redo the IA entirely, starting from scratch, but that wasn’t in scope. Thus, I focused on improving the other main issues. The final product significantly improved the user experience, even if it wasn’t perfect in my eyes.
Working with the UI Designer
As the header is such a prominent component on the website, it was important that the UI Designer understand the implications of the design choices on the user experience. I made sure that the handoff guidelines I created explained the design in a way that would allow the UI Designer to make her own choices based on that information.
Next Case Study