Sunday, March 11 – 5:00PM – 6:00PM
Evelyn Kim Visual Designer Google IncJon Wiley Lead Designer for Google Search Google IncMichael Leggett Design Lead, Google Apps Google IncNicholas Jitkoff User Experience Designer Google Inc
In the summer of 2011, Google completely redesigned nearly all of its applications to be more focused, elastic, and effortless. For the first time in Google’s history, hundreds of millions of users could use a suite of products – from Search and Maps to Gmail, Docs, and Calendar – with a unified, modern look and feel. Join the designers who led the effort for war stories and lessons learned in bringing beauty to Google’s flagship products.
This isn’t going to be just the story of a redesign, but the story or priority of design at Google.
It is difficult to design holistically across the brand when everyone is in silo with their own products. The latest redesign is one of the first collaborations between all those different groups.
Google stood out originally because of everything they didn’t put on their home page. It’s very simple and clean.
There was a big redesign in 2011, but there was a “secret redesign” in 2007.
2007 – Kanna:
A small group of 6 designers started to explore and express the Google brand (Kanna – Icelandic “to explore”) across the org. They explored the connection between design and engineering. Four different designs created:
- Modesty and Minimalism
- Fun with color and personality
- Organization (more like desktop apps)
- Daring – differentiate products by color
How it was presented:
Kanna did not launch. When it was presented, it was shown on a projector.
The Verge has a gallery of photos showing this 2007 design that never was.
2011 – Strawman:
The team was chosen because of their lack of connection and history with any of the smaller groups or history of Google.
Redesign called “Strawman”
Larry Page IM’d the team “if you were to redesign Google, what would it look like?” They were unclear on if it was even a real thing. If it was real, it needed to be done quickly. They did a “design sprint.” They could just jump ahead without any sort of internal fighting based on history.
10-12 screens were chosen representative of Google products and before/after shots were created.
How it was presented:
When Strawman was presented, it was done on 11×17 80lb paper. It just included the before and after shots. The thought was the presentation would be new to the group and stand out. This redesign actually had an opinion.
Timeline:
Started in January, Larry became CEO in April, and told them to launch it in Summer (very very very quickly). The team didn’t even think it was possible. The project name became “Kennedy.” Google Plus had already been in the works, and had to pick up the new design very quickly.
Process:
A prototype was created to test the design across the organization. They would swap out CSS on top of simple HTML mock-ups for all products. The prototype allowed them to demo things to the team and play with different variations and show the grid etc. “It felt like a roller coaster only the latches didn’t go down.”
A lot of attention was paid to the buttons and their hover state. The buttons fade out (218 milliseconds, which is one of the designer’s birthday).
What were they after?
Don’t just bring together for consistency, but also boost the feeling that it’s all one thing that works together. It was not intentional that the Google products were spread out, this design brings them all together.
How was it rolled out?
The prototype was so successful that engineers started grabbing the CSS from it (scary) as it was changing. They ended up creating a really large style guide that they could take it. It helped the engineers engage more. It helped to get buy-in when they could actually go out and see it and use it. Many properties just built based on what they saw, which make it a very smooth roll-out. Voice just went out and did the new design on their own and handled it with very few changes. They held “design office hours.” Everyone was really into it and wanted to help.
Manage Risk and Measuring Success
(Google likes data)
Qualitative research: 80 participants were shown a variety of screens which included both the old and new design for 10 seconds each… just to get an impression. The participants were asked to rank the design on a randomized set of 15 out of 30 attributes (simple, sparse, modern, clean, etc.). The emotions they got out of it were the goals they had, and goals that Google was known for. The research told them they were heading in the right direction
Quantitative research: because there are billions of queries each day, there are many experiments going on. Google can make statistically significant fine-grained measurement for many things. The new design was tested on many users.
Eating our own dog food: Rolled out to Google internally.
“The company has made additional refinements… that reflect a newfound respect for the intangible.” -Khoi Vinh
Tuesday, March 13 – 3:30PM – 4:30PM
