Web Stories Experience Playbook

Project Overview

Publishers and creators of all sizes are adopting Web stories to create compelling narrative experiences for readers. Web Stories are immersive, visually-driven narratives designed to be highly engaging and easy to consume.

Our challenge was finding a way for the readers to discover the stories on the publisher's sites; once the story is created, we needed to create a new Web Story pattern to create rules for the publishers to help them gain more audiences for their content.

Press

Raise the visibility of your Web Stories
Earn More with Google’s Web Stories Playbook
Google push to add Web Stories to sites continues with new playbook and Figma design kit

Client

Google Web Stories Team.

Agency

Huge Inc, embedded with Google.

My role

Visual Design Lead

Creative Team

Hong Wei - Group Director (Google side)
Tadeu Magallanes - Art Director
Angela Pinzón - UX Lead
Lillian Warner - UX Copy writer

Project

Visit the Playbook toolkit
I/O Conference

Phase #1
Research and use cases: I carried out research because I wanted a better idea of how the publishers highlighted the Web Stories on their site. With this research, we found out some possible patterns to use this new format.

Phase #2
After analyzing the research and how publishers highlighted their multimedia content, we created different types of use cases. We cataloged the Publisher's needs, user needs, created some assumptions base on Google goals.

Phase #3
Wireframes and Final Interfaces: After analyzing and having several sessions with the client, we landed our entry points for publishers to use depending on their needs.

Publishers can take the experience one step further by integrating the Web Story Player into your site. The Web Story Player makes it easy for users to swipe between multiple Stories and even enables you to personalize what story to show next. When Stories are easy to discover, views and engagement can increase — offering more opportunities to monetize your content.

Phase #4
Publishers testing: we had the opportunity to test this with some publishers; we created several components with different graphic languages to stress-test the pattern. This is an example of the components we created for VICE. Their immediate response was very positive, and we incorporated the feedback we received from their side into the Playbook.

Phase #5
Playbook creation: After creating all the components, test them out with the publishers, we made the Web Story Playbook and the Figma design tool kit to show how to integrate Web Stories into existing websites.