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.
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.
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.
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.