Amanda Low UX | Queer Booth AR

Problem

The Queer Booth app is planned to be relaunched, however, the Photo Booth design, technology, and categories are now outdated. A redesign will ensure a successful relaunch and help the app to remain competitive.

Our task was to do a complete overhaul of Queer Booth, including creating a more modern look for the UI, updating the Photo Booth with Augmented Reality (AR) filters, and finding a way to better represent the diverse LGBTQ+ community.

I worked alongside with Hanna Hong on the user research, analysis, prototyping, testing and UI design.

Problem Statement

The LGBTQ+ community needs a way to share their stories online because through visibility they can achieve self-acceptance.

Background

2015

The original Queer Booth app was launched in 2015 by Jo Webber, a digital marketer, who after working with a youth charity knew the longlasting effects of homophobic bullying. After noticing a gap in the Photo Booth app market for an LGBTQ+ version, she decided to develop Queer Booth to destigmatise queerness and make education fun for LGBTQ+ youth.

2020

After pausing development of Queer Booth in 2016 due to resources, Jo was inspired to relaunch it by the new wave of queer dating apps. Hanna and I chose to work on the redesign after Jo submitted it for the Ironhack UX/UI Bootcamp students' final project round.

Queer Booth Logo 2015

To-Do List

Update Technology

A fan of Snapchat AR selfie filters, Bitmojis, and Facebook, Jo was excited to see how new technology could shape the app.

More Inclusivity

While the original photo booth outfits were based on what could now be viewed as stereotypes of gay and lesbian identities, Jo wanted the new version to be inclusive for all on the LGBTQ+ spectrum.

Meaningful Solution

Despite an increase of LGBTQ+ advocacy, the issue of bullying and lack of inclusivity for LGBTQ+ people was still a problem, and we needed to investigate how to address this in 2020.

Research Insights

Research

Data Collection

First, we collected data from the LGBTQ+ community about how they expressed their sexual orientation and gender identity online. In 4 days we collected 140 Survey responses and conducted 8 personal interviews.

Participants’ attitudes varied depending on their background and stage of "coming out". Nonetheless, we wanted our solution to be inclusive of all the opinions heard.

Competitors

We also investigated how other social platforms were addressing LGBTQ+ users. While Instagram, Facebook, Snapchat and TikTok already had some LGBTQ+ themed AR selfie filters, they often appeared to be an afterthought to their main product. Some platforms were guilty of chasing the "Pink Dollar", few found ways to address LGBTQ+ issues long-term, and some even proactively banned LGBTQ+ content.

Despite this, social media plays a significant role in the coming-out process of LGBTQ+ Gen Z.

75% of LGBTQ+ Gen Z decide to come out online before coming out in real life, and 78% of Gen Z Trans people are only out online.

- Tinder Research Study

Hanna sorting the Affinity Diagram

Analysis

Visibility & Representation

To analyse the user research we collated relevant insights and statements using an affinity diagram, with the major themes appearing being: visibility and representation. Many we spoke to believed these two things were the key for self-acceptance, however not all agreed on the best form of self-expression.

Users who were already “out” online indicated that they would use an LGBTQ+ Photo Booth feature, although expressing their sexual identity was something they were already doing. Some less confident users did not feel comfortable expressing their sexual identity online, however, gained assurance from seeing others sharing their stories/experiences.

Sharing Stories

While most thought that LGBTQ+ Photo Booth selfies were a fun idea, they said that personal stories were a more meaningful way of finding representation.

Based on this analysis we aimed to create the new Queer Booth app as a place to share stories without judgement, with LGBTQ+ themed selfie filters, keeping with the Photo Booth element. So users could express their inner and outer selves.

“Many people are not comfortable expressing (their sexuality). But it’s still important to feel represented by someone you can relate to.”

- User Interview

Primary Persona

For the primary user persona, we created "Nick", who represents a Gen Z user who searches for LGBTQ+ connection online.

Secondary Persona

For the secondary persona, we created "Vivien", who represents a Millenial user who uses her online presence to promote LGBTQ+ issues.

Market Positioning

TikTok

Looking at the market, the original Queer Booth was positioned more closely to Snapchat, with its focus on more playful content. However, the new Queer Booth would be positioned more closely to TikTok. As a Social Entertainment network, TikTok fuses user-generated entertainment with cultural issues. Additionally, young LGBTQ+ users feel safer on TikTok, as their parents are not using it.

Features

Feature Prioritisation

Using the MoSCoW Method to prioritise the features and functionalities for the app, it became clear that there wasn’t much room left for much else besides the two main features: Photo Booth and Story Booth. Combining these two features in one app, while unconventional, was important to address our problem statement. During our weekly call with our stakeholder Jo, we also received confirmation that she was behind our plan to add the Story Booth feature to Queer Booth.

MoSCoW Method Diagram

Bullying

For our stories feature, we researched the Anonymous Social Media platforms PostSecret, Whisper and Jodel, popular apps allowing users to express themselves anonymously. One common issue with anonymous social media is online bullying. To combat this, users must accept community guidelines before posting, and we omitted a private messaging feature from the app.

Security

After researching commonly used security options, we decided to require a minimum age of 12 that is self-regulated. Requiring a proof of age or parental consent could be a barrier to entry to users seeking help. For added security, no email or phone number is required to signup, instead, an anonymous user ID is automatically generated, and user data is stored only in the app.

Testing

User Flow

Starting with a lo-fi paper prototype to test user flow and UI layout, feedback from user testing revealed that most users understood the functionality of the two main features, however, some did not understand the swiping navigation. Also, without an explanation of why the stories and selfie filters were combined, users were confused about the concept of the app. Users also wanted to see where liked and saved posts were stored.

“I don’t understand the start page. It needs to explain the concept of the app more.”

- User Feedback (Lo-fi prototype)

Features

Even with the paper prototype, users had fun testing the Photo Booth feature, instantly recognising the selfie filters. However, they wanted a more intuitive way of browsing different filters. Feedback from prototype testing with LGBTQ+ users concluded that they found the Story Booth feed intuitive to use, however, the process to post a story needed to be faster and clearer. Most importantly, all users found the Story Booth concept entertaining and meaningful.

“This is something that I would have used when I was younger.”

- User Feedback (Mid-fi prototype)

Preference Test

We conducted a Preference Test with UsabilityHub to measure the aesthetic appeal of our hi-fi screen designs, with Design 2 winning with 58%. Although not a significant statistical difference, the qualitative user feedback convinced us that Design 2 was a better fit for our Problem Statement. Users preferred Design 2 as they thought it was cleaner, clearer, and more professional looking.

“It looks more professional but it’s still playful. Also content seems cleaner.”

- User Feedback (Preference Test - Design 2)

Logo

After preference testing logos using the initials “qb” vs the words “queer booth” users preferred the latter due to more colours being visible, and the words also helped them to understand what the app was. Users also preferred a black vs white background, as it made the rainbow colours “pop” plus it was more modern looking.

Typography

After researching coloured fonts for the logo and header, we decided early on that it had to be Gilbert, a rainbow font created in the memory of Gilbert Baker, the creator of the rainbow flag. After testing various fonts for our body text including Quicksand, Open Sans, Montserrat, Lato and Roboto, we decided on Poppins, as it’s readable, playful, yet modern.

Preference Test - Logos

Solution

Features

As confirmed from Lo-fi and Mid-fi testing, users found the sharing stories feature beneficial for LGBTQ+ representation and also something that would keep them coming back to use the app. Therefore we made it as equally important as the photo booth, the original feature.

Introduction

To avoid confusion on the app concept, we added the three-card introduction on app launch explaining the Photo Booth, Story Booth, and anonymous environment. The same icons from the navigation menu are also used in the introduction.

Navigation Menu

For users who might not find the swiping navigation intuitive, we included a navigation menu visible in the Story Booth feed. Instead of navigation titles, we used Detective-Glyph icons as users found that icons helped them to faster comprehend the app concept.

Story Posting

To simplify the process of posting a story we limited the user’s design choice, and post length. Users may only choose font colour (by tapping) and must only post a story of 140 characters, with an optional back story.

Browsing Filters

To make it faster for users to browse the AR selfie filters, we removed categories, and taking inspiration from Instagram added a scrollable camera button.

Augmented Reality

To prototype the selfie filters, we used Spark AR Studio - a Facebook developed software used for creating AR effects. Hanna and I spent a weekend teaching ourselves the software so that we could create in real life the effects we had in mind. Our AR selfie filters include Pride themes, LGBTQ+ themed TV shows, and LGBTQ+ icons (Lady Gaga was the most requested celebrity icon from our user research).

Real-Life Touches

For the posts displayed in the Story Booth feed, we took inspiration from our user interviews and real-life posts from Anonymous Social Media platforms. Hanna was our model for the final prototype and her joyful reaction in the video is real - "Shane" is her favourite character from the show The L Word. As a last-minute addition, we added a Queer Booth watermark to selfies so that when shared on external social media it would bring more users to Queer Booth.

Takeaways

Jo was open to all of our ideas which gave us a lot of creative freedom. However having fewer guidelines meant that we often had to find a balance between brainstorming wildly, and finding a logical solution to the problem.

Our user research was, therefore, an integral part of our decision-making process that we kept coming back to in times of doubt. Thoughtful research and analysis was our backbone of design with which, I believe, we created an inclusive and meaningful solution.

Project Status [ April 2020 ]

Development of the app is paused as Jo, our stakeholder, will relocate to Berlin from London. She is enthusiastic about the redesign of her passion project, and plans to continue working on obtaining funding for the relaunch.