Kanoe Montaño (she/her)
UX/UI designer

Creating
"The Scene"

Because the social scene for the LGBTQ+ Community feels like a catch-22: We know it is out there but we do not know how to feel like we belong there.

Image alt tag

HOW DO WE MAKE IT EASIER AND EXCITING FOR QUEER AND TRANS* PEOPLE TO FIND COMMUNITY AND SOCIAL EMPOWERMENT AS IS BEST SUITED TO EACH INDIVIDUAL?

Role:

Sole UX Researcher and UX/UI Designer

Tools used:

Figma

Miro

InVision

Process:

Research

Ideation & Sketches

Design

Evaluate

Conclusions

Problem

I identified a problem Being in the LGBTQIA+ community can feel like being in a crowded room all by yourself. You know there is a community out there,  but you just can’t quite tap into it. There are too many queer and trans* people who feel alienated from their own communities.

Solution

I created "The Scene" Mobile social media and connection based app for queer and trans* people looking to make more friends or romantic connections in the LGBTQ+ Communities.

RESEARCH
UX Researcher: Sourcing articles about the probe

UX Researcher: Sourcing articles about the probe

Secondary Research

I conducted secondary research to learn more about the way lesbians, gay men, bisexual people, trans people, and trans people of color have written about, or posted about their loneliness and the barriers they face while trying to mitigate isolation.

The most commonly cited barriers for people seeking social connection in the queer and trans*communities were:

  • Age differences

  • Over representation of alcohol and substance use

  • Misalignment of personal social goals and social scene

  • Everyday bigotry


A case study I care about...

Working as a social justice educator means I have finely tuned empathy and perspective-taking skills that I use to empower those who have been historically afforded less empathy and humanization.

The LGBTQIA+ Community has long been treated as an afterthought in how we build social spaces, and the members of the community are all too familiar with the feeling of exclusion and convenient forgetfulness to consider their experiences.

Too often is the LGBTQIA+ "Scene" overrepresented in media as an alcohol-fueled, hypersexual, delinquent social group that parties and hides in the shadows.

Queer and trans people, especially black and brown queer and trans people deserve to have control over their lives and they seek a sense of stability and empowerment in their social pursuits-- our digital world is barely able to keep up with the urgency of bettering the quality of life for the LGBTQIA+ community

Interviews

In the discovery phase of my project, I conducted 6 user interviews in order to get a better understanding of what barriers are present for people in the LGBTQIA+ Communities who want to make more queer and trans* friends.

Key Take-Aways from interviews

  • Queer and trans people experience constant dissonance of feeling proud to be queer and simultaneously “not queer and/or trans enough” for queer spaces. 

  • Being a part of the LGBTQ+ community is secondary to making friends, people are struggling to find spaces online or in-person to meet people at all. 

  • Queer and trans* people have been functioning on the margins of society and therefore have more barriers presented to them in how they control their social life. People in the LGBTQ+ community want more control over their social lives to feel empowered.

  • Users are motivated by loneliness, media representations of the LGBTQ+ communities, and mitigating their isolation from the COVID-19 Pandemic.

Three Personas

From the interview notes, I identified groups of similar answers in themes, which created affinity maps.  Those affinity maps could be categorized into three empathy maps for “the social butterfly”, “the skeptic”, and “the homebody”.  These three maps informed the personas Mercedes Treto, Levi Allen, and Mia Cormann to help me understand my users as whole people with layered experiences.

Problem Statements

At this point it became clear that I had several nuanced problems to solve within the larger “community seeking” issue within the queer and trans* communities. It is important to me to take on the perspective of my personas, “The homebody”, “The skeptic”, and “The social butterfly” in order to make my future design and component decisions evidence based. 

  1. How might we increase people’s confidence in their social skills? 

  2. How might we minimize barriers people face when trying to change their social life? 

  3. How might we increase inclusion, acceptance, and tolerance in social spaces so that all queer and trans* people feel welcome? 

  4. How might we encourage people to take advantage of social opportunities?.

User Stories

I identified three crucial read routes for my user stories, focusing on my personas and what I would imagine they wanted from my app. In order to solve their diverse problems, I needed to wrestle with the complicated task of identifying common solutions to varied problems. The three user stories I chose were: 

  1. I want to message someone I matched with. 

  2. I want to find community-specific events and add them to my personal calendar. 

  3. I want to set my social preferences and criteria for social connections.

I used Figma to create these.

UX/UI Design: This is one of the three userflows I created to map out how the user would accomplish their first goal: To message someone they matched with.

UX/UI Design: This is one of the three userflows I created to map out how the user would accomplish their first goal: To message someone they matched with.

IDEATION

UX/UI Design: Three of the sketches that best translated to the final product

UX/UI Design: Three of the sketches that best translated to the final product

SKETCHES

I set a 30-minute timer and answered my problem statements with rapid and low-fidelity sketches. Some aspects of the sketches and the problem statements initially feel superfluous but it is encouraging that in design work, time ideating is always time well spent.

I used Goodnotes on an iPad Pro using an Apple Pencil to create these.

Sketches

These are more refined sketches from my ideations but now they are informed with specific goals from my three user stories/read routes. I am originally trained as an artist so thumbnail sketches are always connected to the final product in some way, which is why I made my sketches so detailed. This helped inform my wireframe creation. 

I used Procreate on an iPad Pro using an Apple Pencil to create these.

DESIGN

UX Design: Previews of the wireframes that are most strongly connected to the final product. Having these as a guiding blueprint made my final UI Design faster and more consistent.

UX Design: Previews of the wireframes that are most strongly connected to the final product. Having these as a guiding blueprint made my final UI Design faster and more consistent.

Wireframes

I created low-fidelity wireframes for each of my user stories and titled each one: MATCHES, COMMUNITY, and SOCIAL PREFERENCES so that I could always keep my designs goal-oriented and user-focused.

I used Figma to accomplish this, and I am able to apply the skills I use in Figma to other design tools like Sketch and Adobe XD.

MOODBOARD

UI Design: The Scene Moodboard Created in Figma

UI Design: The Scene Moodboard Created in Figma

INTENTION

 I conducted comparative research on queer and trans-specific events on facebook, tiktok, and instagram. I was curious to see how these spaces are advertised and how they garner attendance. What makes queer and/or trans people want to be part of a community? I created a moodboard from that inspiration and with some UI inspiration for what I would like to incorporate into my app.

Brand Attributes

  • Exciting, down to earth, casual, easy, queer, inclusive, reflective, encouraging, affirming, proud.

    • Rationale: It’s important to emphasize that being queer is not enough for making queer friends, you have to feel excited, welcomed, energized, and included by those connections to want to pursue them. In an environment with these attributes, what could be stopping you from wanting to make friends? 

BEHIND THE NAME

THE SCENE

  • Rationale: The ambiguous “scene” is what queer and trans* people feel they are not a part of, so instead of thinking of “the scene” as something that is inaccessible and aloof, it is in the palm of your hand.

The Scene’s mission is to bring back confidence in the idea of community for LGBTQIA+ Communities. We are here to meet you where you are at, from your couch, in a coffee shop, or at a craft fair. We believe in queerness and trans*ness in connection with one another, so let’s connect. 

  • Rationale: Users want different things when seeking out new social connections, but they all recognize the indispensable value in experiencing their queerness and transness in community with one another. It’s one of the most validating ways to be queer and trans is with other queer and trans people. Sometimes that means coffee on a Tuesday evening, or drinks at Thursday happy hour, or just a safe place to talk about your favorite shows.  Different goals for different people, all with centering queer and trans love and friendship. 

The Personality:

The scene is here for you to make connections on your own terms and with your own comfort in mind. You are welcome and a part of the scene simply by being queer and/or trans* and making connections. You’re welcome here. 

  • Rationale: People are constantly doubting if they are queer enough or trans*enough for community acceptance. With a personality of inclusion, resilience, celebration, and a fierce pursuit of social goals, the scene is supposed to feel like a place where people belong.

Style Guide

As a user-centered designer, my design system has to reflect the intention behind my designs to align with the impact of an easy, fluid, and intuitive experience. My style guide for “The Scene”  was built to be a compromise between exciting users and yet not so foreign that you leave– the app is designed to emulate the same feelings that being a part of a thriving friend group should.

I used Figma to design this.

UI Design: High Fidelity Screens

UI Design: High Fidelity Screens

UI Design

At this stage I was able to interpret my wireframes through the lens of my design system/style guide.  One of the main challenges in designing from an entirely original style guide is that I felt both excited and intimidated by the ability to change my style guide to better suite my needs. These screens are the main routes I expect my users to interact with the most. I was heavily inspired by instagram’s social feed layout and the education they have already done for my users in knowing where to go for profile settings and how to interact with the feed.  You will see that “TheScene” is a hybrid experience between typical dating app’s like hinge and tinder, and social media apps like Instagram and Facebook, but with a refreshing mission for the LGBTQIA+ Community.

Prototype 1.0 using InVision

EVALUATE

User Testing 

I conducted guerilla usability testing using instagram. I posted that I was looking for queer and trans people who want to change their social life in the Queer and Trans communities to sign up for a testing slot for my usability tests.  7 People filled it out and 5 ended up completing the test.  Three users are trans*, 1 is a woman, 1 is a man. All of them are queer and 2 of them are black.

I standardized the script for each test and even when the test failed on certain scenario steps I was still able to gain a lot of valuable insight into the impressions of the app screens. 

The challenge in using InVision is that the prototype templates only go up to iPhone 8 dimensions when it is industry standard to use more modern models.

Three Scenarios Tested

  1. Adjust social settings indicating that you do not want to be around a lot of alcohol for social outings. 

  2. Select a match and message them. 

  3. Find an event you’d like to go to in the Black Pride Affinity group and add it to your calendar.

RESULTS

  • Scenario 3 was the easiest one for them to complete.

  • Scenario 1 had more failures than the other two.

    • Needed to adjust wording of question, when on a team of designers it is easier to run through articulations of questions.

    • Helped me develop a second route for same goal.

  • Scenario 2 provided lots of feedback on how to iterate the designs in a way that felt unique from dating apps. Friendship is main motivator.

What did I change?

  • Used full "TheScene" logo instead of an icon

  • Created a route to social preferences settings from both the matches page and profile page.

  • Created an "edit profile" button.

  • Created a separate menu within Matches for users to decide where they go next.

  • Simplified Community landing page.

  • Created an OnBoarding Screen to visualize how I want users to meet "The Scene"

REFLECTION

What I learned from this project:

I am proud my designs for this case study seek to solve an identity-based problem that is being challenged by social connection and identity empowerment. Through my previous work as a social justice educator, I intentionally designed "The Scene" with key features that I knew are fundamental to making people feel included and empowered.  The community pages with specific identities being centered is a particular aspect that all users in the usability tests were energized by.

  • I learned that innovation and creativity in designs must still be usable because making the user feel like they do not know what they are doing is a failure of design.

  • I also learned the strength in providing users more than one way to accomplish the same task.

    • For adjusting your social preferences settings (who you want to match with, the kinds of connections you want to make, and your comfort levels with alcohol, cost, and number of people), some people in the usability tests when through the profile - settings - social preferences route to adjust, and some people expected to find that route in their matches route experience by going to matches - settings - social preferences. Both make sense, but there was not a clear path that was preferable so I created two ways to get to the same goal. 

  • In all, in this case study I honed my “listen then adjust” skills by viewing the designs as ever-evolving iterations in constant improvement mode. That was the key to my process. 

    Oh, and encouragement from my pets, could not have done this without many cuddle breaks.

7
Iterations
26
Screens
100
Cuddly interuptions from my pets