Unboxing Chrome

Redesigning the omnibox

Image for post
Image for post

1. Meet our box

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

Image for post
Image for post

2. A short history of boxes

Image for post
Image for post
Box No. 1
Image for post
Image for post
Box Zero
Image for post
Image for post
2008
Image for post
Image for post
2012
Image for post
Image for post
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.

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

4. Ninety-five shades of grey

Image for post
Image for post

We were using over 95 different shades of grey total.

Image for post
Image for post

5. Design is never (un)done

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

6. Designing for speed

Image for post
Image for post
Box No. 2
Image for post
Image for post
Box No. 3
Image for post
Image for post
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.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Box No. 4
Image for post
Image for post
Invisible Box No. 5
Image for post
Image for post
Invisible Box No. 6
Image for post
Image for post

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 for post
Image for post
Image for post
Image for post
Image for post
Image for post
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.

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

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

Written by

Designer

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store