Show Up — 

Google

Experience Pride across America, from cities that hosted the original marches and protests to cities celebrating for the first time.

PRIDE-2PRIDE-2

Site map. 

Google wanted to show solidarity with LGBTQ+ Americans by traveling to eight cities — Corpus Christi, TX; Birmingham, AL; Los Angeles, CA; Providence, RI; Wichita, KS; San Francisco, CA; New York, NY and Hilo, HI — to film and record the stories of people in those communities. The goal was to encourage users to show up to their local events, by providing the basic info to get them there as well as stories and content to inspire them to join. The site also provided resources for users looking to involved in their local events and nonprofits.

PRIDE-3PRIDE-3

Top sketch- parade experience flow. Bottom sketch- parade flow screens sketches. 

UX Challenges —

One of the many challenges of this project was that the site had two states: pre-event and post-event. Because of the build’s short, five-week time frame, we needed to launch the site before the content was fully produced. This meant we had to design the site using best practices and then go back post-launch to make revisions and add content. Before each parade occurred, detail pages provided information about how to attend the event or show support by sharing customized GIFs for each city. We created pages like this for over two hundred cities. After the events, we needed to share the content in a way that provided all users with ample resources to allow them to fully experience Pride, regardless of their location.

 

We needed to think of a way for users to easily find their nearest parade and/or LGBTQ+ resource center with which to get involved if the featured cities on the homepages were not near them.

 

Another thing we had to keep in mind with this project was that we were responsible for balancing a politically-sensitive subject with a corporate point of view.

PRIDE-4PRIDE-4

Desktop wireframes. Top row, left to right- homepage, parade preview on homepage, search. Bottom row, left to right- search results, parade experience detail page, parade experience with video, and end of parade share prompt. 

UX Solutions —

We created a flexible structure to balance the two states of the parade detail pages, depending on if they were a featured city (a city in which we filmed), or a secondary city (a city to which we weren’t going to travel). We also signaled if the events had already happened or if they were still to come. On every detail page, we included a map of the parade route to help users get the information that they needed. To emphasize the two states of the parade, we integrated our audio and video stories into the previously-highlighted parade routes after the events. The user could then “travel” through the parade via the stories we created.  

PRIDE-5PRIDE-5

Mobile wireframes. Left to right- homepage, find your parade search, search results with upcoming parades, parade experiences and local organizations, and parade experience with video. 

To make sure every user could take part in Pride celebrations, we created a search feature with which users could enter their current location and get information on the four closest parades, the closest Pride experience, and three local LGBTQ+ centers and non-profits with whom they can get involved.

 

Because this site had a fast timeline, I continued to be a part of the project during development to revise and test the site as it was being built. For example, our original UI for the video experiences was too complicated and made the user have to make too many choices. We simplified our player and the experience flow to be video based rather than have multiple different content types.

 

View the project here →

Team —


Client - Google Brand Studios
Digital Agency - Stink Studios
Executive Creative Director - Ben Hughes
Lead UX Designer - Liz Wells
UX Designer - Maggie Bryan
Art Director - Satu Pelkonen
Designer - Maxime Rimbert
Motion Designers - Aaron Covrett, Anthony Meric
Executive Director of Technology - PJ Ahlberg
Assistant Technical Director - Arnaud Tanielian
Senior Developer - Erik Taheri
Developers - James La Marre, Michael Bucks, Tim Roussilhe
Lead Technical Architect - Oskar Tilly
Backend Developer - Abhaya Rawal
Executive Producer - Lauren Keller
Producer - Marta Nelson, Danielle Kim