Designing a scalable nav that gives users the most intuitive experience.
Existing navbar.
The existing platform has a navbar, but no navigation elements. Typically a user relies on a home feed where carousels of products lead to offerings. To navigate between these types of offerings, the user must return to the home feed.
Each airline has a unique implementation with any permutation of offerings, from multiple shops (Duty free, buy on board, in-flight menu, etc.) to experiences, dining, ground transportation and more.
In addition, the constantly-evolving nature of the product means that it would be very difficult to foresee how the nav would need to change in the future. Adding, removing, reprioritizing, and clustering items in the nav will be necessary in the future.
<aside> 🧭 The objective: add navigation for any permutation of products, keep flight management, while designing for mobile first responsive.
</aside>
Via an informal research and visual exploration process, we examined many analogous apps for solutions to the navigation problem. There were no perfect comparisons, but we arrived at two main solutions: an app-like navigation (pinbar) versus a more standard website hamburger-style navigation.
<aside> ❓ Out of these two, which one would give us the best feature discoverability, as well as versatility and scalability for the future?
</aside>
Pinbar nav
PRO Bottom bar features are easily accessed
CON Bottom bar navigation is generally for native apps and not web apps
CON Bottom navigation elements can be finicky on iOS Safari
CON Difficult to move features around
CON Cramped bottom bar may restrict label length
CON All items need to fit in 4 categories, leading to an awkward nested information hierarchy which calls for secondary tabs and categories
Hamburger nav
PRO High degree of versatility for feature structure
CON Low discoverability for features buried in ham menu
Using an unmoderated testing tool (maze.co), we wanted to see which nav style would give us the highest findability.