KaTE McManuS
A collection of colorful, varied pages from different Visual Stories laid out in a patchwork formation

Visual Stories

  1. Google
  2. UX/UI Design
  3. 2020-2022

Overview

As the pandemic took hold, at Think with Google (TwG), information evolved so rapidly that articles from the week before could feel stale, even out-of-touch. Our Interactive Articles took 2+ weeks to launch, so producing them no longer made sense. Many marketers and retailers were struggling, and we needed to deliver relevant data to them more quickly than ever.

Site metrics also showed a shift in the way users consumed platform content, from desktop to mobile. Now, nearly 75% of users were accessing the platform from their phones, and they were seeking more bite-sized content. To meet their needs without sacrificing visually-rich, data-driven storytelling, we launched Visual Stories.Inspired by “stories” on social media apps, Visual Stories are mobile-first, full-bleed, tappable articles. They were originally available through a custom TwG product page, which we designed as a vibrant board.

As they grew to be a site staple, we integrated Visual Stories into the TwG platform as a core content type, translated across 18 languages. To facilitate the creation of Visual Stories by teams throughout the larger Google Marketing organization, we setup an internal editor.

Team

Design: Kelly Sullan, Grow (Agency); Product: Casey Fictum; Production: Jenny Maughan; Development: Victor Zeng, Grow (Agency)

Cover pages that I designed for various Visual Stories on desktop
Visual Stories were originally available through a custom Think with Google product page, which we designed as a masonry-style board.
Visual Stories were originally available through a custom Think with Google product page, which we designed as a masonry-style board.
We later integrated Visual Stories into the core Think with Google platform as a content type, alongside standard articles, videos, and more.
We later integrated Visual Stories into the core Think with Google platform as a content type, alongside standard articles, videos, and more.

Original product ux/ui

We built the original Visual Stories from the ground up. This encompassed the UX/UI of the new article type. If this project had had a less urgent timeline, I would have advocated more for UX research to test our designs. In lieu of research, we collected an archive of articles in this style from other publications. We studied their decisions, considering elements from navigation arrows to the progress bar. One strength we cherry-picked was the inclusion of a larger, more pronounced arrow on a story's first page. We added descriptive text (“NEXT”) and a pulsing animation to catch users' attention. It was critical that they understood how to advance to the next page. On the following pages, when the behavior was learned, the arrows receded.

Responsive templates

To make Visual Stories easy and fast to launch, we defined guardrails. For example, for text positions, we enabled 9 core options for larger screens: a pairing of a vertical alignment (top, middle, or bottom) with a horizontal alignment (left, center, or right). For smaller screen sizes, we enabled 3 options. We also designed reusable, responsive templates. When designing a page for a Visual Story, designers would simply provide the image or video asset and specify which responsive template they wished to use. We outlined these guides in a “Starter Figma,” the perfect resource for designers kicking-off a new Visual Story. All of these decisions were made in collaboration with the developer as he built the product. It was a balance to build in flexibility for future story designs and to establish simple, streamlined rules.

To speed up the launches of Visual Stories, we defined a set of options for the design of each page. For example, we outlined 9 core textbox options for screen widths over 768px.
For screen widths of 768px or less, for a given page, designers could select between three textbox positions.
We designed responsive templates to apply to different Visual Story pages. In this example, the video asset fits to the height of the screen and stays centered on both mobile and desktop.
In this responsive template example, on larger screens, the image asset fits to the height of the screen and sticks to the right side. On smaller screens, the image fits to the width of the screen and sticks to the top.
Selected pages from a Visual Story that I designed: “What Makes Content Good?”
Selected pages from a Visual Story that I designed: “Auto, Accelerated”
Selected pages from a Visual Story that I designed: “Auto, Accelerated”
Selected pages from a Visual Story that I designed: “Are Ads Inclusive Yet? Unfortunately Not.”
Selected pages from a Visual Story that I designed: “Could Micro-Influencers Help Counter Vaccine Hesitancy?”
Selected pages from a Visual Story that I designed: “Connected: What Do We Mean When We Say TV?”

Visual Design

I also owned the complete visual design of a set of Visual Stories, (which put the templates to use). Every story required a substantial creative lift to fill each page with dynamic content. We ensured each piece had a unique visual identity that supported its story conceptually, but still aligned with TwG's overarching brand identity.

Scaling

As Visual Stories took off, we needed to quickly scale. Our original templates facilitated rapid creation, but they were intended to be used by professional designers; they lived in Figma and required an understanding of responsive behavior. Google teams without a design role wanted to make Visual Stories.

So, we brought in Newsroom, a WYSIWYG editor that empowered non-designers to craft custom Visual Stories. Unfortunately, Newsroom supplanted our custom-built UI with their UI and simplified all future Visual Stories to a mobile-only format. While this diminished the immersive experience on desktop, the efficiencies in article creation were immense. This decision was made easier because the vast majority of TwG users were experiencing Visual Stories on their mobile devices.

As the reach of Visual Stories expanded, our team's design role transitioned from hands-on designing to knowledge-sharing and oversight. To uphold quality standards, we defined visual guidelines in a Style Guide and led creative reviews. To help non-designers get started, we also fashioned templates in Newsroom, where creators could drop in their custom images and text.

Newsroom, a WYSIWYG editor, facilitated the creation of Visual Stories by individuals with little to no design experience. This internal tool allowed the product to scale.
Newsroom, a WYSIWYG editor, facilitated the creation of Visual Stories by individuals with little to no design experience. This internal tool allowed the product to scale.
In the Style Guide, we outline the UI components inherent to all Visual Stories created in Newsroom at that time.
In the Style Guide, we outline the UI components inherent to all Visual Stories created in Newsroom at that time.
As “What Makes Content Good?” was published after we introduced Newsroom, it uses Newsroom's UI. Visual Stories published using Newsroom are simplified to a mobile-only format, even when viewed on larger devices.
Excerpts from the Visual Stories Style Guide, created to uphold quality standards
Excerpts from the Visual Stories Style Guide, created to uphold quality standards
To help non-designers get started, we created templates in Newsroom where creators could drop in their custom images and text.
To help non-designers get started, we created templates in Newsroom where creators could drop in their custom images and text.