A Brief History of the Complete Redesign of Google at #SXSW2012

Sunday, March 11 at South by Southwest Interactive Conference, Austin, TX
Google Panel Consisting of Evelyn Kim (Visual Designer for Maps), Jon Wiley (Lead Designer for Google Search), Michael Leggett (Design Lead, Google Apps & Gmail), Nicholas Jitkoff (User Experience Designer for Chrome), Chris Wiggins (Google Creative Lab)

The Evolution of Google Design

“So did Google just hire a bunch of designers recently, or were they all being kept in a cage all this time?” @tylerball

The process of this redesign is told in two stories. There is the story that you know about that happened in 2011, but most people don’t know the story of the redesign in 2007. 6 designers set out to express the Google brand that was consistent across all properties. It was called Kanna (Icelandic for “to explore, to examine”). Trying to find the balance between form and function, but mainly design and engineering. Looked at over 100 brand attributes that were narrowed down to 4 clusters.

Modesty & minimalism
Fun – fun through color, splashes of vibrant color
organization
Daring – Started with a black background, but changed to white

Commonalities between 2007 & 2011 designs – both were requested by CEOs. Used a strong central team of designers that weren’t embedded with any brand.

2011 Redesign

Step 1: Strawman

Larry Page asked them via IM “if you were to redesign Google, what would it look like?” They wondered if it was a joke. He never talked to them. They knew that if it had a chance to be a real thing, they had to move quickly.

Decided that they would do a sprint design with no restrictions of legacy and just move forward without consulting all groups. That was strawman. Identified main things that were identifiable with the Google brand. They just showed a series of before and after shots without a huge discussion of design principles.

Kanna vs. Strawman

Key difference is that one design launched (Strawman) and one didn’t (Kanna).
Kanna was projected, while strawman was printed on 11×17 80 lb paper.
Paper was a NEW presentation method at Google! 😀
Kanna included the design process while strawman just showed before and after shots.
Beginning of strawman process, instead of doing mocks and asking questions, they “took the design tempreature” by putting out little design bits all over the table and asked CEO to sort into like and don’t like piles.

He asked them about the redesign in January, became CEO in April and told them to redesign Google and “launch this summer.” (at which point they looked for the absolute last day of Summer – Fall Equinox).

The namespace for Google projects that have anything to do with space or fast are pretty much taken, so they named the project Kennedy, since he made the call to go to the moon. Google+ had an imminent launch (April 1), but they took the design and embraced it, which the press took as “Google+ redesigns Google!”

The design was created in a vacuum, but once it was approved, it had to be taken back to all the groups and get everyone on board to create the redesign across all product in an incredibly short timeline. It was hard for the designers to test the designs back and forth, so they created a static HTML prototype that everyone could use. They could add a grid, change fonts, etc., and test it across all of the properties. They thought about a Google font, but they shelved it for the redesign. They added the consolidated product toolbar. Button gradient – they made a gradient that designers would notice, but nobody else would (218ms fade – Nicholas’ birthday). Supported modern browsers with degradation for older browsers.

Google+ was a big part of the redesign and all the products unified to help prop it up. It was not Google’s intention to create a lot of isolated products and with the redesign they were able to bring the products together. They created a flexible design that would work across all screen sizes.

They created the prototype, as well as a deck of design specs. Because people were already taking the CSS and applying it to their products, even as it was changing. So they created an HTML style guide that could be used and had all the design included. This help have a really clean rollout.

The scope of the project was huge, but the prototype/style guide and enforcing office hours for all teams helped get the project completed on time. There wasn’t push back because even the teams that were considered “out of scope” jumped in and completed the project with everyone else.

Managing Risk and Measuring Success – Google Likes Data

This was like changing the skin on a 747 while in flight. You have to be very careful.

Qualitative Research

They showed 80 participants a variety of screens (current designs and proposed designs) which included both the old and the new design, for 10 seconds each – long enough to see it without rationalizing why you may or may not like it. They were then ask to rank the designs on a randomized set of 15 out of 30 possible attributes. It wasn’t scientifically rigorous, but gave them an idea if they were headed in the right direction.

The new design outperformed the old:

beautiful
clean
less cluttered
elegant modern
simple
sparse

The old design didn’t do poorly, though.

comprehensive
less lacking
traditional
for people like me (possible indicator of change aversion)

Google search has an extensive platform for doing quantitative research because they get billions of queries each day. At any given time they’re running over 200 experiments, which means they can get statistically significant, fine-grained measurement for many things. Data like this gives you facts about your designs. But, like any company, it is hard to get tests done.

You can’t be a slave to data, though and metrics aren’t absolute. Make sure that you don’t break something (don’t break search!) Sometimes you need to be a little patient with the data. Run experiments with large visual changes for a little longer because sometimes it might look like it’s not going to work and it’s just change aversion working.

Eat Your Own Dog Food

At Google, they just turn it on across the entire company, they don’t just test small segments!

THE GMAILAGEDDON!

The big gmail changes were rolled out to Googlers and they heard about it!

“Kennedy gmail line spacing is too damn big!”

“Have one old Gmail window open. Praying it never refreshes.”

What was launched actually had some issues, but once they started using it and saw the old product, they were glad for the changes.

“The company has made additional refinements… that reflect a newfound respect for the intangible.” Khoi Vinh

One of the best things about the project was that User Experience has come to the forefront at Google.

This was my summary (notes) of the session I attended, for my takeaways, see 8 Design Lessons Learned from the Google Redesign to see how web developers and web design companies can learn from the Google design process.