From metaphors to viable concepts
The project started with an exploratory phase, where we mapped metaphors for navigation drawn from physical space—seafaring, mass migrations, public transport and autopilot systems. This helped us stretch our thinking beyond traditional UI conventions and into new territory.
Navigating time
- Checking your calendar to see how the present relates to past and future events
- Setting reminders for the future
- Time traveling – moving fluently forward or backward in time, traces from the past
Navigating space
- Using maps to find locations and routes
- Exploring new places virtually or physically
- Understanding spatial relationships between objects
Navigating information
- Searching for data or documents
- Filtering and sorting content
- Following links and references
Navigating tasks
- Managing to-do lists and priorities
- Tracking progress on projects
- Delegating and scheduling work
Navigating relationships
- Connecting with people and communities
- Mapping social networks
- Understanding roles and hierarchies
Navigating states
- Switching between modes or contexts
- Undoing and redoing actions
- Saving and restoring sessions
In the ideation phase, we fed the results of this exploration into a set of focused questions that helped steer us toward the kind of solutions the Google team was looking for.
How might we empower developers to make navigating the web more efficient?
How might we empower developers to make navigating the web more context-preserving?
After exploring a wide range of ideas, we identified two core concepts worth developing further:
Tab Knowledge
From comparing products while online shopping to saving articles for later, tabs help us organize our browsing. Tab Knowledge is the concept of same origin tabs knowing about each other and working together, providing a more seamless experience.
Page flow
Unlike a social media feed, a website has a clear endpoint – once you scroll to the bottom, it's done. Page Flow enables developers to easily transition users to the next logical step when they reach the bottom of the page.
Viability testing
To test the viability of these concepts, we prototyped and iterated quickly, layering experimental UI on top of real-world sites to test how developers could gain new affordances.
Mockup examples of real world use cases for new navigation concepts. E-commerce websites could provide quick access to open tabs to enable seamless navigation between them. News sites could let you use your open tabs as a reading list. Media sites could let you scroll into related content seamlessly.
Communicating concepts clearly
With these experiments serving as proof of concept, we then focused on building minimal, interaction-led animations that cut through complexity and clarified intent. The animations were kept intentionally stripped-down, making it easier for the client to communicate ideas internally.
We focused on building minimal, interaction-led animations that cut through complexity and clarified intent.
Outcomes
The project concluded with strong engagement from the Google Web Platform team. The final delivery was praised not only for its polish and pace, but for landing squarely in the “sweet spot” between feasibility and innovation.
“We wanted to make sure we're in the sweet spot between something achievable, and doing something that actually makes the web better. And I think you've done a really really good job of responding to that.”
These concepts are now informing ongoing standards discussions – opening up new ways for developers to shape smoother, more intuitive navigation across the open web.
