Green layered waves

Bringing awareness to Google's best-kept secret.

Billions of people trust Google's products to help them every day — that’s why helpfulness is at the core of their mission. Being helpful also means being responsible and preventing harm for their users and for society as a whole. That’s where the Google Trust & Safety team comes in.

The Trust & Safety team produces critical research to inform policies on online issues like abuse, fraud, and spam. This research has profound impact within and beyond Google, yet it suffers from being unknown.

My team at Grow worked closely with the Trust & Safety (T & S) team to create a digital platform that brings their research to light, extending the reach and impact of their work.

Contributions

  • Content Strategy
  • UX Design
  • Visual Design
  • Client Comms

Tools

  • Figma
  • InVision
  • Google Slides

Teammates

  • Joe Branton
  • Kim Coghill
  • Ashley Hill
  • Meg Linen
  • Jessica Stratton
  • Nate Witte
Yellow layered waves

Gathering context

Before deciding what we were going to create, we needed to know how we could be most helpful. We interviewed 9 stakeholders to familiarize ourselves with the T & S team, their research, and the audience they were trying to reach. Here's what we learned:

Our Audience

The T & S research team has 3 key audiences. We define these audiences by how they interface with the research.

AUDIENCE 1

Super Users

“I want to know what research has been done on X and how that research was conducted to inform my own work.”

Super Users are...

  • T & S researchers within Google
  • Other Google researchers
  • Researchers in academia, non-profits, and think tanks

AUDIENCE 2

Engaged Users

“I’m working on a project that needs to take X into consideration, and I want to see what guidelines are available.”

Engaged Users are...

  • Google product & policy teams
  • Tech industry T & S teams

AUDIENCE 3

Occasional Users

“I need to engage in the public dialogue about X, and I need research insights to help shape that conversation.”

Occasional Users are...

  • Google marketers
  • Government officials
  • Media organizations

Their Barriers

We were surprised to find that though the key audiences vary in role, they experience similar barriers to engagement with the T & S team and their research.

Barrier 1

External and internal audiences struggle to describe the mission and the scope of Trust & Safety research. This lack of clarity creates confusion.

Barrier 2

Each audience has varying levels of access to the research. This lack of transparency creates frustration.

Barrier 3

When audiences can access the research, they don't necessarily know how to apply it to their own work. This lack of guidance creates apathy.

Yellow layered waves

Formulating the content strategy

The barriers our audiences experienced guided our content strategy, leading with a series of principles & recommendations to inform the platform's architecture.

Guiding principles

Principle 1

Our audience should feel confident in their choice to engage with the T & S team and their research.

Recommendation 1

The platform should clearly position who the T & S team is, what their work encompasses, and how their audiences can reach them.

Principle 2

Our audience should feel empowered to find the research they need.

Recommendation 2

The platform should guide audiences down pathways based on their needs and give them appropriate ways to engage with the research.

Principle 3

Our audience should feel compelled to discover new research.

Recommendation 3

The platform's content should evolve with the T & S landscape and should surface the most helpful research for our audiences.

Information Architecture

We put our principles into action, mapping our recommendations onto 3 page types:

Diagram of the Information Architecture for the Trust & Safety research plaform

Wireframing solutions

With an architectural plan to build on, we wireframed content layouts for each of the 3 page types – evaluating the hierarchy in each iteration for usability and clarity.

During this wireframe sprint, we designed our wireframes in Figma. This enabled the design team to rapidly build on one another's ideas, and promoted co-creation between the design and development teams.

Landing Page

As the first T & S touchpoint, this page is the first opportunity to inform, impress, and serve our audiences. We explored ways to:

  1. Establish the T & S mission.
  2. Highlight the impact of the research.
  3. Surface the most notable research.
  4. Provide helpful pathways to engage with the research based on needs.
Hover over the thumbnails to zoom in.

Selected Landing Page

Selected Landing Page wireframe. This option heroes the mission and impact stats, then dives deeper into the research content.

Additional exploration

Landing Page wireframe exploration. This option prioritizes the latest Trust & Safety work over the team's impact, and provides more context for the content types.

Search Page

With a massive respository of research, this page helps our audiences find what they need. We explored ways to:

  1. Refine the search with familiar filters powered by our backend tag system.
  2. Improve scanability of important information, like trigger warnings and access levels.
  3. Preview content for each result.
Hover over the thumbnails to zoom in.

Selected Search Page

Selected Search Page wireframe. This option displays the search results in a list, with the option to expand a result to see a preview of the research abstract.

Additional exploration

Search Page wireframe exploration. This option sorts the search results by content type.

Detail Page

As the container for all T & S research, this page houses multiple research formats. We explored ways to:

  1. Create a flexible grid to accomodate various content lengths and types.
  2. Provide clear actions for viewing and citing the full research.
  3. Surface the tags and related research to encourage discovery.
Hover over the thumbnails to zoom in.

Selected Detail Page

Selected Detail Page wireframe. This option prioritizes the action to 'View the full research' and splits the study information and research information into distinct columns.

Additional exploration

Detail Page wireframe exploration. This option prioritizes the research information and separates the columns by indexable information and research-specific information.
Gray dots

Solutions in context

To validate our solutions, we returned to our stakeholder interviews. We evaluated the wireframes through user flows based on each audience.

This exercise, conducted in InVision, provided our team & our stakeholders a richer understanding of how the platform would take shape to meet audience needs, and more importantly, what we still needed to address.

Super User

Our Super User is an academic researcher in a Media & Technology department. They are conducting a qualitative study on "digital brand reputation" and want to see how other researchers in this space have conducted their studies.

1

On the T & S platform, our Super User searches for "digital branding."

Landing Page with 'digital branding' typed in the search bar.

2

On the Search Page, they filter for Research Articles and Qualitative Research.

Search Page with the Research Articles and Qualitative Research filters toggled.

3

They find an article of interest and click on the Detail Page to view the full research.

Research Article Detail page with the 'View the full research' highlighted, indicating the next action.

Engaged User

Our Engaged User is a Trust & Safety Officer at a growing social tech company. They are drafting their company's Community Guidelines and want to see what research-based best practices exist.

1

On the Landing Page, our Engaged User jumps to the "Apply" section and selects "View all Frameworks & Principles."

Landing Page with 'Apply' and 'View All Frameworks & Principles' buttons highlighted.

2

Taken to the Search Page, our Engaged User scans the results and expands the preview on an interesting piece.

Search Page with a Principle result expanded.

3

On the Principle Detail Page, our Engaged User chooses to dive in and view the full research.

Principle Detail Page with the 'View full research' CTA highlighted.

Occasional User

Our Occasional User is the Technology Editor at a digital news organization. They see the term "fake news" trending again on social media; rather than retweeting opinions that reflect their own, they want to see what academic research is available on the subject to write an informed thinkpiece.

1

Above the fold of the Landing Page, our Occasional User sees a Topic Briefing on the day's hot topic: Disinformation.

Landing Page with a piece of latest work highlighted.

2

On the Topic Briefing page, a stat catches our Occasional User's eye. They click on the stat to view the associated research.

Topic Briefing page an Insight highlighted.

3

On the Research Detail page, our Occasional User reads the abstract. Interested, they copy the citation for future reference.

Research Article page with the 'Copy to clipboard' button highlighted
T & S logo with layered blue waves

Thank you for your awesome creativity in the wireframes. I could see all our prior thoughts and discussions manifested!

– Kalpa Raj, Google T & S Project Manager

Exploring visual design

As we dialed in the page structures, we began exploring the platform's visual design system. To use this time efficiently, we focused our exploration on the first quarter of the Landing Page, which housed the majority of components that would be used throughout the platform.

Exploration 1

Everchanging Landscape

The Internet is an everchanging landscape; new technologies present new opportunities for online abuse. The T & S research team evolves with it – surveying the landscape and surfacing insights to address these issues.

We visualized this metaphor with layered waves that bubble up key insights in a gradual ebb and flow. On content-heavy pages, this visual would serve as an accent that maintained visual consistency while allowing the content to shine.

State 1

Hero with layered blue waves and impact stat reading, 'Every day 3 million account hijackings prevented.'

State 2

Hero with layered green waves and impact stat reading, 'Every day 6 million bad ads removed.'

Exploration 2

Centering on the User

The end user's safety and well-being is at the core of the T & S team's work.

To humanize the impacts of this research, we brought the user to the forefront. With this photographic approach, we recommended specific areas to include photography and provided opportunities to re-purpose existing Google photography.

State 1

Hero with a central photo of a father and son watching content on a tablet.

State 2

Hero with a central photo of woman looking at her smartphone.

Exploration 3

Extracting the Web

The amount of information–and disinformation–on the web is overwhelming. T & S research provides insights to inform a clear path forward.

We fashioned Google's brand colors and Material Design components into a visual system that directs viewers' attention attention to key insights and work.

State 1

Hero with geometric shapes and lines forming a web pattern. An impact stat is centered, surrounded by a floating icon.

State 2

Hero with an alternate stat and icon.

Exploration 4

Modeling Impact

In the face of technical advancement, the T & S research team works continually to keep each user safe across every facet of the web.

We took a more literal approach to raising the profile of T & S research in this 3D treatment. We recommended using 3D selectively throughout the platform and provided opportunities to update models, keeping the content fresh.

State 1

Hero with a 3D model of a laptop and a circle enclosing an impact stat.

State 2

Hero with a 3D model of a smartphone and a circle with another impact stat.
Gray layered waves

Unifying the design system

In a collaborative work session with the T & S team, we aligned on a design system that builds off of Google's "Build from white" ethos and marries the key components of Explorations 1 and 3.

Waves

We represent the vast online landscape with layered waves.

Landing Page - Intro

Waves on a Topic Briefing page

Raised Cards

We elevate T & S work with raised card components.

Landing Page - Apply Section

Full Landing Page

Icons

We focus attention on T & S offerings with direct iconography.

Landing Page - Explore Section

Full Landing Page

Extending the system

In the process of building out the platform's design system, we discovered an opportunity to extend the system into the presentation of the research itself. We learned that each researcher or research team is responsible for designing the presentation of their research, creating issues at every level of engagement.

The Issues

Issue 1

A burden for researchers

There are no presentation design guidelines. As a result, coming up with a unique design for the research presentation is a burden on the responsible individuals.

Issue 2

A disparity for T & S as a whole

Because each presentation is designed by a different individual, there is a lack of consistency. This makes it difficult to tie the work back to the T & S team.

Issue 3

A sore sight for visitors

When the presentation is uploaded to the platform, the extrapolated elements visually stand out – and not in a good way.

The Solution

To address these issues, we worked with the T & S team to identify the key presentation formats their researchers use, and created a series of branded Google Slides templates for researchers to use moving forward. Here's a sample selection:

Title

Title slide

Text with Editable Graph

Text slide with editable graph

Alternate Graphs

Slide with alternate editable graphs

Text with Insight Stat

Text slide with insight stat

Table

Table slide

User Journey

User journey slide

Topic Briefing Overview

Topic briefing overview slide

Scale

Scale slide

Country Comparison - Multi

Country comparison slide evaluating multiple attributes

Country Comparison - Single

Country comparison slide evaluating a single attribute

Product Comparison - Multi

Product comparison slide evaluating multiple attributes

Product Comparison - Single

Product comparison slide evaluating a single attribute

Flexible Guidelines

We provided guidelines for researchers to create their own templates, knowing that their presentation needs may evolve with their research.

2-column Guideline

2-column guideline slide

1-column Guideline

1-column guideline slide

Color Guidelines

Color guideline slide

Typography Guidelines

Typography guideline slide

Putting the system into action

The full design system comes together as a responsive platform. Based on our audiences' usage habits, we knew people would most frequently interact with the platform on desktop devices. Still, we applied touch-friendly ways to engage with the content to ensure those on tablet and mobile devices would have just as fulfilling an experience.

Landing - Desktop

Desktop version of the Landing Page.

Landing - Mobile

Mobile version of the Landing Page, with one of the research team accordion drawers expanded.

Search - Desktop

Desktop version of the Search Page.

Search - Mobile

Mobile version of the Search Page.

Topic Briefing - Desktop

Desktop version of a Topic Briefing Detail page, with a redesigned presentation slide.

Article - Mobile

Mobile version of a Research Article Detail page, with the citation form launched.

This is amazing work. Let's continue this partnership for the external launch.

– Kalpa Raj, Google T & S Project Manager

Looking forward & reflecting back

In January 2020, the Trust & Safety Research platform launched internally to Google employees. The external launch of the platform is currently in progress. Additionally, the positive partnership with our client has led to a new project with another Trust & Safety team.

Over the 3 months my team & I took the internal site from strategy to launch, we learned several valuable lessons that strengthened the way we work with one another & with our clients.

Takeaway 1

Design a system, not elements.

Creating a design system allows us to evaluate individual element as part of a whole; we can determine whether a button style works, or is even necessary. A system also creates a shared language between the design and development teams, and with our clients.

Links for learning

Takeaway 2

Make magic in the micro.

While the platform is designed with functionality in mind, that doesn’t mean it has to be boring. We implemented delightful microinteractions, such as a card raise on mouseover and a logo animation on page load, to bring some personality into the system.

Links for learning

Takeaway 3

Be helpful.

Just like Google, helpfulness is at the core of our work as a partner. By working closely with our client to understand stakeholder needs and goals, we helped sell in work across multiple levels of approval.

Links for learning

Reach Out

If you’d like to learn more about this project or chat about a future collaboration, I’d love to hear from you.

You can reach me by email at janice.jamye.pang@gmail.com  💌