Skip to content
Kayla Jung
← All cases
Case · 03 of 07
Cover·2022 · Productivity · Browser · Microsoft

Side pane that adds context without breaking the flow

Bing Multi-browse Sidebar
Role
Product designer
Collab
Design leads, Engineers, UX researcher
Tools
Figma, Protopie, Atlassian, Teams
Year
2022
Chapter · 01

The world

You're reading an article. You hit a claim that needs context. You open a tab. Then another. Then five. You forget what you were originally researching.

That was browsing in 2022. The Edge team wanted the next tab to never have to open.

The pane that works with the page
The Edge sidebar shown alongside an article in the main browser pane

Context on the right edge — a related read, a source signal, a privacy note — sitting beside what you're reading instead of replacing it. The tab that used to open and never close.

Chapter · 02

The question

Can a side pane add context to what you're reading without pulling you out of it?

Edge wanted a sidebar that worked with the page, not in spite of it — and that earned a permanent spot on the right edge of every visit.

Chapter · 03

What I designed

  1. A card system tuned for short attention. Every panel was a glanceable unit — a fact, a related read, a privacy signal. No infinite scroll. No engagement bait.
  2. Credibility infographics that didn't feel like a warning. Source reputation and privacy posture turned into small visual primitives — clear at first glance, never alarming.
  3. A visual language we could grow into. The token system, card grid, and infographic style became the foundation other Edge teams reused for personalization features.
The 'made for you' card stack in the sidebar
A card system tuned for short attentionEach panel is one glanceable unit — a fact, a related read, a recommendation — and then it ends. No infinite scroll, no engagement bait pulling you off the page you came for.
Source-reputation and privacy infographics as small visual primitives
Credibility, not a warningSource reputation and privacy posture turned into small visual primitives — readable in half a second, and never the colour of an alarm.
One language, both themes
Sidebar card in light theme
Sidebar card in dark theme

The token system and card grid behind it all — the foundation other Edge teams picked up for their own personalization features.

The tension

The whole pane lived in the browser, not the page. So when it came to comments and ratings, the tempting answer was to put the conversation in Edge's layer too — one place, every site. Research said the opposite.

What I did

Readers didn't want to discuss an article inside their browser chrome. The conversation belonged to the website — where the content and its community already lived — not bolted onto the browser one layer up.

So I argued to keep comments and ratings native to the website, not the browser layer. It meant the sidebar did less — and that was the point. The pane added context; it didn't try to annex the conversation.

Chapter · 04

What changed

  • The next tab stopped opening. A related read, a source signal, a privacy note — it arrived in the pane instead of in five more tabs. The sidebar did exactly the job the thesis set: add context without pulling you off the page.
  • The scope held. Keeping comments and ratings native to the website kept the pane focused on what it was good at, instead of competing with the sites it sat beside.
  • The visual language shipped past this feature. The token system, card grid, and infographic style became the foundation other Edge teams reused for their own personalization patterns.
Credits
Client Microsoft Edge
Services UX strategy, Problem definition, Prototyping, UI design, Data visualization
Year 2022
What they said
"Kayla came in with a passion for great design work, a great work ethic and a growth mindset. She asks the right questions to get more information, works quickly and efficiently, and takes direction and feedback very well."
Alyssa R. · Sr. Product Designer @ Microsoft