Think with Google

Think with Google is the go-to website for the latest consumer trends and market research from Google. Although the site already existed, I started this project as if I was starting from scratch and completely reworked the UX and IA of the site to create a simpler and more natural journey for the user.

Skills used

  • Responsive Web Design
  • Information Architecture
  • User Interface Design
  • Art Direction

Working with exisitng content

The existing site had various type of content including YouTube videos, infographic, articles and interactive tools. Even though the site had rich content, the site structure wasn't simple for the users. Searching and filtering wasn't user friendly, it required at least 2-3 clicks to filter and find specific articles you were looking for.

I wanted to improve the content structure to simpler and leaner, while allowing a user to jump to other sections. I analysed content types and grouped them in similar categories.

The Layout

The existing website contained different types of modules: including embedded YouTube videos, interactive tools and downloadable Google documents. One of the biggest challenges was making the page simpler but legible. Instead of adding all modules in a multiple column layout, I set up the content priority of them and placed them in meaningful order. I focused on three main criteria: Contrast, Alignment, Whitespace.

Whitespace - Applied carefully considered margins and space to create consistent structure. This allowed a visual relief (avoiding distractions) for the users from the interface elements (windows, menus, secondary elements) of the browser and webpage.

Scannable Text - Left justified text creates solid rectangles and it allows users to scan larger amounts of content more easily.

Contrast - Nothing attracts the eye of the reader like strong contrast and distinctive patterns. I created a styleguide that brought consistent and flexible page layout throughout the entire site. Heading styles were created from Heading 1 to Heading 4, each containing a unique font size, line height and colour. This was also changed on each breakpoint while I was developing the site with front end development teams to maximise readability on the screen.

Material design

As always, working with Google was both inspiring and challenging. When working on this, the Material Design guidelines had only been released for apps and so we were one of the first teams to adapt this to website design. When thinking about the design, I wanted to work with Google’s new Material Design approach. I used cards to display and promote content to work with the clean lines throughout the website. There was also Material Design's emphasis on simple and meaningful animations. The Think with Google site was then used as an example of how to do this during this transition period.

YouTube Leaderboard

The Concept

Styleguide & patterns

The final design

The site was initially launched in 5 different languages and the team will be continuing to roll it out in at least 6 different markets throughout the upcoming year.