Unboxing Chrome

Redesigning the omnibox

1. Meet our box

“The hardest feedback I received was, ‘That’s it?’”

2. A short history of boxes

Box No. 1
Box Zero
2008
2012
Swipe down on the toolbar to view tabs #protips

to protect the sacred space between the user and the content — not to seek attention.

Whereas before, we didn’t mind if anyone could pick out Chrome from other browsers, it was starting to affect the security of our users.

3. A box with 2,000 sides

This was like nothing I had ever designed in my 15 years of experience.

A few of the form factors we design for. (The black horizontal line represents split screen mode)

4. Ninety-five shades of grey

We were using over 95 different shades of grey total.

5. Design is never (un)done

Our v1 (M54) sticker sheet — mapping every color, text, icon and component in our UI

6. Designing for speed

Box No. 2
Box No. 3
The many faces of Box No. 1

We removed every pixel of visual noise to make it faster for you to cognitively process — not just to make it aesthetically pleasing.

Box No. 4
Invisible Box No. 5
Invisible Box No. 6

Yes, I spent an entire week staring at invisible boxes. Will anyone notice? Most likely not. Was it worth it? 2,000,000 times yes.

7. One box to rule them all

Image sourced from the London Transport Museum

It shouldn’t just show you where you were, it should help you get from one place to the next.

All the Sketch artboards
Before
After updated colors & urls
M68 to M69
Our year-long journey
Our new “Modern” M69 sticker sheet

“This gives me a better sense of calm and might actually help me throughout my day.”

Designer