The final deliverables of P&G's brand portal
I explored multiple navigation patterns through low-fidelity wireframes, including static sidebars, accordions, and category-based carousels. While testing the early explorations of the designs, I encountered a recurring problem:
Users frequently lost context while navigating between sections and struggled to understand where they were within the brand hierarchy
The floating navigation was designed to mirror the brand hierarchy, clearly separating the sections while revealing sub-sections progressively. The interaction states were carefully defined:
This bifurcation of the tab helped us achieve…
This ensured users always knew where they were, what they had covered, and what was next.
As the design evolved into high fidelity, the floating navigation was refined to work seamlessly with the system interface—adapting across screen sizes, coexisting with content filters, and maintaining visual consistency with P&G’s design language. The final solution balanced discoverability with restraint, enabling faster navigation across dense brand content without overwhelming the user.
This process resulted in a navigation system that reduced cognitive load, improved orientation across long-form content, and scaled consistently across P&G’s multi-brand ecosystem.
