05.14.14 QX: Designing for Queer Experiences

05.14.14 QX: Designing for Queer Experiences

By John Hanawalt

Tagged: , , , , , ,

I got involved with the Queer Oral History Project through my dear friend, Jed. I had moved to San Francisco at the end of the summer, and the very next weekend Jed and I were talking about the project at a party in his apartment (a clever trap).

I had watched and supported the project’s successful Indiegogo campaign earlier that summer, and was thrilled to be a part of bringing the project to the next level. For the QOHP to grow, it needed a website that would showcase everyone’s wonderful stories and attract new, equally wonderful participants. And it needed a brand that was as exciting as the project itself. (How great is it to be queer right now!?)

The resulting work isn’t just cool visually (if you don’t mind me saying), it’s a case study in what happens when good causes and design are equal partners. Design helped the project clarify its communication strategy, and in turn, the project really forced me to consider the social implications of design decisions, helping create a more informed (read: better) design.

The back of the project's business cards

The new visual identity uses tall type, pink and black, and texture to reference posters, slogans, and t-shirts used by queer activists. It also speaks to the importance—and fun—of the project’s work.

If the personal is political, so is design

Is designing for the LGBT community so different from designing for any other audience? In a lot of ways, no.

Throughout the process, we used feedback from a community of activists, past and (hopefully) future participants, experts from various fields, and friends to inform our design decisions. A chunk of people we spoke to in our (highly unscientific) surveys weren’t consuming media through LGBT-specific outlets. When asked for an LGBT-specific site they frequent, one person listed Tumblr…for the porn. As “mainstream” media becomes more inclusive of LGBTQ identities, and social media plays a stronger role in the content people interact with, the line between an LGBT website and a regular ol’ website becomes blurrier. (This jibes with more formal market research on the subject, minus the Tumblr porn.)

However, when your content is intimately connected to someone’s identity, the line between removing a menu item from your site’s navigation and erasing someone from your community gets a lot blurrier, too.


Nowhere in this design are the social implications of design more evident than in navigation and taxonomy. As it grows, the project will host a thriving video archive, full of diverse stories. Users need some way of navigating those stories to find the ones that resonate with them.

How do you reconcile a content management system that uses check boxes to organize videos with a community full of people who have spent their lives fighting against being put in a box?

It’s been a balancing act that led to some key decisions on the site. For instance, sexual orientation and gender identity labels are entirely optional for submitting or searching videos. The topic index and the “Show Me a Random Video” button were added as alternative ways for users to find videos on the site.

Another approach to “Other”

Content and copy are themselves design elements that we hope communicate the project’s intentions around inclusiveness. On our submission form, if someone’s identity doesn’t fit into one of our suggested check boxes, we ask them to share it in our Something Fabulous Not Listed Above field. It’s a small copy touch that’s already gotten positive feedback from community members used to being Othered.

The QOHP submission form uses "Something fabulous not listed above" instead of "other"

No one’s an “other” on our website.

Where labels for sexual orientation and gender identity are prominent, for instance in the video filters, we’ve linked to an explanation of how labels are used on the site. We also explain our decision to only include identities currently represented in our videos in site filters. It was a hard decision to not include a diverse array of identities in our menus, but in the end we felt it would be more frustrating to users to see labels for content we don’t have (yet!).

Button linking to an explanation of how the project uses labels

Design and copy explain labels are used as optional tools, not limitations in our video filters.

Designing for the future

In designing for the project, David, Jed, and I weren’t just thinking about it as it exists now. Baked into the pink logo and responsive website are conversations about where the QOHP—and our community—is going. Designing a filter menu that is inclusive as well as easily navigated may be a challenge for when there are more videos, but we’re laying the groundwork now. And I, personally, can’t wait until the day comes where the site design needs to be revamped to better reflect the project’s huge community of participants.

Browse All