INTRO

PROBLEM

Previously, Google’s privacy and security image was scattered all across the internet. A quick search for “google product safety” brought you a whole list of results with every product housing their own information in different places. In addition, they were not delivering on a corporate response to user’s questions, including top concerns like “is my personal information safe?” and “how is my information used"?” We needed to shift the narrative from a corporate-focused “Google is safe” to the personal, user-focused “Google keeps you and your information safe and secure”.

Some of the things that we kept in mind:

• Along with general information about how Google as a corporate treats privacy and security, we’d also have to integrate product-specific information, with each product having a different set of content and imagery needs.

• We can’t just TELL our users about Google’s privacy features. We’d need to SHOW most of the features with UI illustrations and product demos where appropriate. Clarity and simplicity are key components of how we’d bring this site to life and strong imagery was a huge part of that.

• We’d launch in 18 different locations across North America, South America and Europe, so the structure and design needed to be modular, flexible, and accessible.

SOLUTION

When designing the Safety Center site, the most important thing that we’d need to keep in mind was flexibility and modularity. We needed to accommodate a ton of content with lengthy paragraphs that sometimes included supplementary images. In order to achieve this, we built a set of flexible components that we could stack and swap in/out as content was being developed and edited.

VISUAL DESIGN

A key to any successful design system depends heavily on the fundamental foundations on which every component, page template, and prototype is built on. After landing on a visual direction, foundational elements were created and set up as system elements in Figma. This included a color palette, typography stack, grids, spacing specs and icons. Our team of designs were all able to build our component library from this universal system, ensuring consistency across styling and structure.

PRODUCT PAGES

Our product-specific pages were the most difficult to solve as they required us to work with a different team of clients for every single product, each coming to us with different content needs and things they needed to say about their products. Creating custom pages for every client was not a route we could take, so we needed to create a set of components to display various amounts of text, sometimes with an image and sometimes without, and a way to divide the page for easy browsing. All pages got a logo, headline and large hero image, and elements below that were swapped in an out depending on page length, including the ability to add in-page navigation.

simplified ui imagery

Showing how users could take control of their privacy settings was a huge part of what would make this site successful. In order to show, not just tell, we needed to create a large set of UI that showed different parts of the journey. We tried to just show the important elements, highlighting elements with either size, color, or cropping and eliminating any other distracting UI elements. Some images included a 3-4 part animation, showing users how to get to different parts of their settings.

illustration

In some places on the site we talk about complex subjects that we are not able to show with UI or screenshots. In these cases, we’ve created a library of illustrations that can help give some visual support. All of our illustrations follow the same principles as our UI and branding—using brand elments, highlighting what we need to with a pop of color, and keeping supporting elements grayed and pushed back.