Abby Golfo
Experience Designer
004 Rainbow Crosswalks Thumbnail.jpg

Rainbow Crosswalks

Rainbow Crosswalks is a network representation of the flow of LGBTQ+ spaces in Atlanta from 1969 to the present. Using Klynt, the interactive site is an exploration of the spaces and places that have helped activate LGBTQ+ Atlantans. 

——————————————————————————————————————————————————

Course: Design of Networked Media at Georgia Tech
Team Members: N/A
Duration: Two months, completed in December 2017

Key Contributions: Researcher, Designer
• I researched and collected information (photos, articles, books) on LGBTQIA+ issues in Atlanta from 1969 to the present using library archives and online sources.
• I sketched (using pen and paper), wireframed, and prototyped (using Photoshop and InVision).
• I used the interactive documentary software, Klynt, to make a website.

Rainbow Crosswalks Walk-Through

A walk-through of the final version of Rainbow Crosswalks. Created using Klynt, HTML, CSS, and JavaScript, the final site allows the interactor to see the interconnectedness of LGBTQ+ Atlanta from 1969 to the present by showing collaborations between organizations and tags representing similarities.

This walk-through goes through the following journey:

Home Page > Theme > Race > Black and White Men Together (BWMT) > Atlanta Lesbian Feminist Alliance (ALFA) > Atlanta Gay Center > 1970's

Concept Development

Concept Development

The National Park Foundation and the National Park Service published “LGBTQ America: A Theme Study of Lesbian, Gay, Bisexual, Transgender and Queer History” in 2016. The first line directly addresses the importance of exploring LGBTQ-identified sites:

“Start here. We exist.”

This poignant statement illustrates the lack of visibility and preservation of LGBTQ+ spaces and places (both historically and in the present). With my interest in identity and space, combined with my current home of Atlanta, I wanted to explore the ways in which LGBTQ+ spaces and places have acted as points for social activation, policy change, community, and refuge for LGBTQ+ Atlantans.

As I first started exploring this space, I found “Mapping LGBTQ St. Louis." Built on Esri Story Maps and created through a network of collaboration, the site includes two interactive maps; one map looks at spaces and places by year and the other map looks at spaces and places by category. By mapping these spaces and places, the project shines light on the historical presence of LGBTQ+ people in St. Louis, Missouri.

In the realm of interactive documentary, I also explored “Immigrant Nation," which brings users through stories on U.S. immigration. The experience is based on the idea that “the U.S. is a nation shaped by immigration, and most families have a personal story about it.” The user is able to click on different stories from different time periods. At the end of each story, the user is prompted to view stories from similar time periods or similar regions. Our stories—personal, deep, and heartfelt—are also interwoven.

Research

Research

Although LGBTQ+ history is not necessarily the most visible aspect of Atlanta’s history, my research yielded numerous results in the process. One of the most extensive and thorough accounts of Atlanta’s LGBTQ+ history was Dr. Wesley Chenault’s “Atlanta Since Stonewall: 1969-2009.” I decided to use Dr. Chenault’s timeline as a starting point due to its detail and my own time constraints.

Beyond “Atlanta Since Stonewall,” I used online resources like the Georgia LGBTQ Archives Project (Facebook), the Georgia State University Digital Collections, and the Atlanta-Journal Constitution. I also made appointments to view archives at the Auburn Avenue Research Library and Emory University’s Stuart A. Rose Manuscript, Archives, and Rare Book Library (MARBL). From Georgia Tech, I checked out Chenault’s 2009 photo book, Gay and Lesbian Atlanta.

Coding and Organizing

Coding and Organizing

I took “Atlanta Since Stonewall, 1969-2009” and began to categorize the content. Besides year, a few categories emerged, including the type of places that were described (bars/restaurants, businesses/media, events, meeting spaces, organizations, faith-based), as well as the action or flow of what was happening (breaking away, merging, collaborating, moving, disintegrating, forming). Later, I developed a fourth category: themes (race, class, gender, policy/ activism, empowerment, health).

By breaking these down into categories, I was able to see the connections that exist all across the board.

Wireframes

Wireframes

The initial wireframes visually place the map as the most important aspect.

Initial Prototypes

Initial Prototypes

The first interactive prototype (completed with Photoshop and InVision) also places the map as the most visually important aspect of the experience.

Developing a More Transparent Structure

Developing a More Transparent Structure

The first explorations of the layout placed more importance on the map and the timeline. I wanted to explore different ways to focus on the type of place. I worked to sketch out ways to do this, by breaking down the information that I had.

Mood Board

Mood Board

The moodboard explores examples with a lot of information and a choose-your-own-adventure type style. I wanted to prioritize visuals and information hierarchy.

Prototype 2: Focus on Information

Prototype 2: Focus on Information

This prototype puts more focus on the categories. It allows the user
to explore the information on their own. It is a non-linear experience.

Rework

Rework

I started to rework the visuals and information hierarchy to reflect my desire for a more non-linear experience. At the point, I also chose to use Klynt, an editing and publishing application. The technology and its constraints helped inform some of my design decisions.

Klynt Interface

Klynt Interface

For the final designs, I designed on Photoshop and edited the attract sequence on Premiere Pro, while adding interactivity through Klynt.

The Klynt interface allows for a visual storyboard, which shows how each sequence connects with one another.

The interactivty that I added includes connecting sequences, hotspots, buttons, the map (using Google Maps API and a small amount of CSS, and Javascript).

Final Designs

Final Designs

The final designs focus on transparent information and demonstrating the interconnectedness between pieces of LGBTQ+ history.

On each page about a place/organization, there are category tags in white boxes that lead to those topics. The pink button with white stars show the direct connections that places/organizations have with others.

As I began to do more research and work, I saw how many people are invested in Atlanta’s LGBTQ+ history. This project puts both the information the networks in focus.

Screen Flow

Screen Flow

This chart depicts one flow, explained here:
• Open link.
• Select “Theme.”
• Select “Race.”
• Press pink buttons with white plus signs, to learn about four locations.
• After pressing the pink button on the organization Black and White Men Together, select the pink button on ALFA.
• Select the categoery tag “1970-1979.”
• Select photo of a house structure, which is the Atlanta Gay Center.
• Learn more about the Atlanta Gay Center.

Learning Outcomes and Future Directions

Learning Outcomes and Future Directions

In addition to getting to know the wonderful librarians and libraries in the area, the process gave me more practice and insight on visual hierarchy and information architecture. Throughout the project, I was dealing with a lot of information and many categories. At first, it was difficult to distill this information into a workable prototype. Through my many iterations, I struggled with making a delightful, informative, AND visually interesting piece. However, once I scoped the project down and centered on the idea of networks, I was able to more successfully balance the pieces. 

I hope to continue this work by reaching out and doing more collaboration with the individuals and organizations that are working in this area. In addition to making this a more collaborative project (and emphasizing the people who are a part of LGBTQ+ Atlanta), I would also love to improve the design and functionality through more formal user testing.