Stonewall Forever

THE LESBIAN, GAY, BISEXUAL & TRANSGENDER COMMUNITY CENTER

To commemorate the legacy of the Stonewall Riots, marking 50 years of Pride, we created a documentary film, an interactive monument, and an AR app that features previously unheard perspectives from the LGBTQ+ community and expands access to key narratives from LGBTQ+ history.

In celebration of the hundred year anniversary of the National Parks Service, we created an interactive tour of five of America’s most beautiful national parks led by real park rangers.

lizvwells-casestudy-stonewallforever-sketch1
DESKTOP WIREFRAME SKETCHES

About the Project

At the center of the experience is a “living monument” of 50 years of Pride, which users can explore through via website or an augmented reality app. Users move through the monument to travel through history and learn what it was like for LGBTQ+ Americans before and after the Stonewall Riots. The content continues from the past through to present day and the future of Pride movements, where users can add their own story of LGBTQ+ history to the ever-expanding monument.

Using 16:9 video, 360° video and ambisonic audio, users were able to partake in experiences the average park visitor never gets to see. We shot from helicopters, mountain tops, horseback, and underwater, resulting in over eleven terabytes of footage gathered over twenty-six days and 18,949 miles, edited down to a final experience of twenty-five minutes.

lizvwells-casestudy-stonewallforever-sketch2
DETAIL PAGE LAYOUT OPTIONS
Multiple options for the global flow of the site- guided tour verse exploritory.

UX Challenges

Working alongside Maggie Bryan, Director of UX, our main objective was figuring out how users should navigate through such a non-traditional experience in WebGL. We were tasked with making the experience as accessible as possible, since the monument needed to be usable by a wide range of users, including those who navigate via keyboard only. 

Another task we needed to tackle was the amount of content the monument would house. While Maggie focused on content strategy, I worked on finding the best way to visualize detail page content when users would enter an individual story from a piece of the monument. We worked closely with the LGBT Center to find stories from members of the community, as well as archival imagery and film to feature within the monument and documentary. Because of the found nature of this content, all of the assets varied in size, type, and theme. 

An additional consideration was that we needed to create an experience for the app that mirrored how users would explore the monument on the website, but using augmented reality instead. It was easy to imagine how the monument would look in AR, but how the user navigates through the different pieces of content was a much bigger challenge. 

lizvwells-casestudy-stonewallforever-wireframes
DESKTOP WIREFRAMES

UX Solutions

To help users explore the monument’s non-traditional webGL environment, we created two different navigation modes. First, there is passive mode where users could be timed into content from the collection title page. Then, there is the active mode where users can scroll through the monument and jump ahead to collections and content pieces from the subnav. These two modes allow users to choose how they want to navigate through the experience.

While in passive mode throughout the site, users would only see featured content along the subnav in each collection. If the user is feeling more adventurous, they can select individual pieces of content from within the monument. The monument has three tiers of content: Collection, aligned with a theme, Bonus Content, aligned to a collection’s theme, and From the Community, user-generated content submitted by the LGBTQ+ community. 

lizvwells-casestudy-stonewallforever-detailpage2
DETAIL PAGE LAYOUT OPTIONS

When designing the content detail pages, I needed to keep in mind the variety of different sizes of archival content. I went through many variations of possible page designs, considering multiple breakpoints: large desktop, small desktop, tablet, large mobile and small mobile. Working closely with the developers and designers, we created a version that worked best for the design aesthetic of the site and what the developers could realistically make. 

On the AR app, we didn’t have the ability for users to be able to scroll into the space since the user’s physical location dictated their view of the monument. We designed it so when the user selected a shard towards the bottom of the monument they entered into collection content, regardless of the shard they selected they would go through the collection in order. If the user looked up and selected a shard towards the top of the monument, they would enter into From the Community content. Following mobile UI standards, we made sure the content was the main focus within content detail pages and users could easily navigate to other collections and to the next and previous content pieces. 

lizvwells-casestudy-stonewallforever-app
AR APP DESIGNS

Team

CLIENT

THE LGBT COMMUNITY CENTER

CREATIVE STUDIO

STINK STUDIOS

CREATIVE DIRECTOR

JAY CHAPMAN

DIRECTOR OF USER EXPERIENCE

MAGGIE BRYAN

USER EXPERIENCE DESIGNER

LIZ WELLS

DESIGN LEAD

NIC SANCHEZ

MOTION DESIGNER

JOEL WATKINS

ASSISTANT EDITOR (CONTENT)

ERIC LARSON

HEAD OF TECHNOLOGY

PJ AHLBERG

TECHNOLOGY DIRECTOR & FRONT END DEVELOPER

ARNAUD TANIELIAN

UNITY DEVELOPERS

ANTHONY MAREFAT, ADAM SMITH

WEBGL DEVELOPER

SAMUEL HONIGSTEIN

BACK END DEVELOPER

TERRENCE CURRAN

FULL-STACK DEVELOPER

ABHAYA RAWAL

EXECUTIVE PRODUCER

LAUREN KELLER

SENIOR INTEGRATED PRODUCER

LAUREN SAUNDERS

CONTENT PRODUCER

SHAMI LACOURT