Microsoft · Design vision · 2020-2021

Design Direction 20/21:
Reimagining the Web as a Living Space

The Provocation

For over a decade, the search results page barely changed — a utilitarian list, optimized for efficiency, stripped of humanity. But the web itself had transformed. It was no longer a tool we picked up and put down. It had become a place we inhabit. And yet its design still treated us like machines: linear, predictable, one-size-fits-all.

We asked a dangerous question: What if the web reflected who we actually are?

The Insight

We looked to cities — not software — for the answer. Cities are dense, chaotic from above, but navigable and full of serendipity at street level. They accommodate every mood, every pace, every person. They don't simplify the world — they make complexity feel natural.

53.6% of our users were already telling us they wanted more information, not less. The problem was never density. It was how we organized it.

The Framework

We established three design principles — not as rules, but as creative provocations that could push every surface of the Microsoft web experience forward.

01 / Present

In times of complexity, we bring focus.

Not by removing information, but by creating immersion. We reimagined the Windows search menu as a full-canvas experience that quiets everything else. We turned the news feed into a magazine you pick up — where progressive disclosure paces your attention instead of overwhelming it. We built density filters that respond not just to what you search, but how you search — learning your behavior and handing control back to you in real time.

Immersive Canvas
Focus through immersion, not confinement. The search experience expands to fill the screen, allowing your mind to stay on the task at hand rather than competing with open applications.

Magazine Rack
Relevance through progressive disclosure. A dense news feed transforms into a magazine-like reading experience the moment you engage, pacing your discovery and amplifying a human, collaborative tone of voice.

Density Filter
Immediacy through adaptive controls. Search results respond to your behavior — not just your query — offering real-time density controls that could be visual, temporal, or location-based, learning preferences over time.

02 / Expressive

In times of wonder, we spark curiosity.

We designed for the full range of being human. A "Mindsets" concept let users shift their entire browser personality — from focused work mode to kid-friendly — with a single tap, transforming typography, color, and content organization while keeping functionality intact. We used whitespace as a compositional tool to create visual rhythm and pull users deeper into editorial content. We made the interface react back — hover triggers playback, icons respond with emotion — turning passive consumption into a dialogue.

Mindsets
Space for different personalities. Users can set their browsing intention — "Focus" to limit distractions, "Kid-friendly" to transform the experience entirely — evolving the people picker into a multi-dimensional profile system.

Immersive Discovery
Whitespace and density as compositional tools. Bing.com's iconic full-bleed image becomes a gateway to rich editorial content below, where rhythm between density and breathing room invites you to scroll deeper.

User Engagement
Emotion and dynamism through interaction. The design system becomes both expressive and allows expression from the user — videos play on hover, icons provide immediate reactions, and scale and depth add a layer of media richness.

03 / Fluid

In times of change, we adapt.

We broke the frame entirely. Inspired by how people navigate maps, we created an edgeless search canvas where results live in spatial abundance — scroll in any direction, zoom to change density, pinch to focus. Responsiveness was no longer about screen size — it was about behavior. And transitions between contexts became seamless, continuous experiences rather than hard page breaks.

Abundance
Edgeless, map-inspired navigation. Search results become a spatial canvas you explore like a city from above — energetic, abundant, and navigable in every direction.

Responsive
Behavior-based, not just screen-based. Pinching to zoom reformats and refocuses content; density changes as you get closer to your answer, creating a fundamentally new navigation paradigm.

Connected Canvases
Seamless transitions between contexts. Moving from search results to a map to a location detail page feels like one continuous, immersive journey — building user confidence through spatial continuity.

The Innovation

This wasn't a redesign — it was a new design philosophy. Each principle came to life through nine motion concepts, demonstrating that the web could be as rich, adaptive, and human as the cities we live in. The work established the creative foundation for Microsoft's web experience direction heading into 2021, proving that utility and beauty aren't opposites — they're partners.

Design Statement

It's time we create a beautiful web. Like an urban city, the web needs to reflect the humanness that fuels it.

We can create a web that adapts and evolves with the ever-changing needs of people by being present, expressive, and fluid.

Previous
Previous

Case Study: Microsoft WXC Design Vision

Next
Next

Identity System: AI + Research & Bing Studio