Mosaic
An audio-based story sharing app for building queer connection and community
Overview
ROLE:
Product Designer (UX/UI)
UX Researcher
TYPE:
Class Project
TIMELINE:
12 weeks
Fall 2023
TOOLS:
Miro, Figma
LINKS:
Background
In March 2022, Florida passed HB 1557, which has come to be known as the 'Don't Say Gay Bill'. It prohibits the discussion of sexual orientation and gender identity in schools. In that same year, a study was published by the Trevor Project on LGBTQ youth mental health with the following findings:
45%
LGBTQ+ youth seriously considered attempting suicide
60%
LGBTQ+ youth were not able to get mental health care they needed
43%
LGBTQ+ youth seeking care feared not being understood
However, the Trevor Project also found that those who felt support from their family reporting attempting suicide at less than half the rate of those without support.
When tasked with creating an app with meaningful social impact for a class project, my team of 5 zeroed in on LGBTQ+ acceptance and community.
We knew that what is currently being done to support queer youth is incredibly limited. If young queer people live in a state where discussions of identity are banned, are among the 91.8% of students in the United States that do not receive LGBTQ+ inclusive sexual education (GLSEN Research Institute 2021), and/or do not have queer role models in their life, they may feel even more alone with this perceived lack of community. One of the clear factors here is acceptance from a community, whether familial or social, and understanding of one's own identity.
So, how might we help queer individuals understand
their identity and develop a sense of belonging?
01 / Research: Exploring User Needs
Overview
User Interviews
Affinity Mapping
Coding
Thematic Analysis
User Interviews
Analysis
Approach
To better understand the existing pain points and unmet needs for LGBTQ+ individuals searching for a queer community, we began with user interviews.
The goals for our research process were the following:
Identify existing online resources that queer people use to learn about identities
Identify pain points around creating connections with other queer people
Discuss the coming out experience and factors that impact their day-to-day interactions as members of the LGBTQ+ community
10 separate user interviews were conducted by the team with participants who identify as young LGBTQ+ people (with a range of identities recruited). Participants answered questions about their coming out experience, their relationship with the queer community including any resources or tools they use, sexual education experiences, and outside factors that impact their queer experience. We then conduced a qualitative data analysis with affinity mapping to summarize our key findings from the interviews.
We conducted a thematic analysis of the user interview transcripts by identifying initial codes. Some of these codes identified were lack of queer-centric sexual education, barriers to finding information, online safety regarding queer spaces, etc. Some examples of the codes identified are as follows:
-
“Queer people are left to figure a lot of [their identity] out on their own. I only realized it was okay to be myself once I found a whole group of friends who were like me and dealt with the same things." – 16, non-binary, lesbian
-
"Living in Florida, there aren’t many people like me. The woman I babysit for shares my values and identities, and it makes me feel so heard and seen to talk with her about the anxieties I face as a lesbian Floridian." – 21, woman, lesbian
-
"My [TikTok] for you page is so curated, it helps me feel surrounded by the community and much more integrated in it, even if I know it’s just my own echo chamber on the internet... people [on TikTok] helped me put into words what I already knew I was feeling." – 21, man, queer
-
"Most representations of queer people seem based on queer stereotypes that just don't resonate with with me, like drag races. In my school district it felt like the only queer people were the openly gay boys that were often judged/stereotyped, and everyone else that was queer was still hiding their identity" – 20, woman, gay
Key findings from user interviews
Depictions of queer people in mass media are overly stereotyped, and there is not a wide selection of queer role models for young or questioning people
Rather than seeking out 'official' resources, questioning queer people seek out independently made content like Tiktoks and YouTube videos to see daily, average representation of queer people and their issues
Queer people who live in more conservative areas have difficulty finding and connecting with in-person LGBTQ+ communities and friend groups in a safe way
Most day-to-day representation within mass media that queer people see doesn't feel accurate or doesn't resonate with them
02 / Define: Establishing User Needs and Problems
Overview
Persona Development
Storyboards/Scenarios
Persona Development
To further empathize with our target audience, we created 3 personas of different queer archetypes to focus on and help the team to understand what they would want in a product.
The three types we chose (out, closeted, and someone in an unsafe place to come out) were all people who already are confident with their sense of identity, and may just need different types of support in their individual journeys. The personas also gave our team a better sense of how we can tangibly support queer people by looking their their goals, needs, pain points, and interests.
Storyboards & Scenarios
We then created scenarios of situations each persona might be placed in that emphasizes a pain point, a need, and a goal related to coming out, finding a sense of a community, or exploring their queer identity. From there, we created some storyboards that walked through these specific scenarios that helped us further empathize with our user base and figure out what pain points these personas have in common that we can address with our product.
03 / Ideate: Creating the Framework
Overview
Ideation
User Flow
Ideation
So far, we had learned that users want to connect with other queer people in their immediate physical area, but there are several factors that make that difficult for some: lack of representation, lack of current LGBTQ+ social ties, fear of political or social backlash, and of course, fear of general online safety regarding queer spaces. At this point we identified our design goals:
Allow users to share queer stories in a safe, anonymous way
Encourage interaction with local community to tie the stories to tangible places and enhance user's sense of physical community
Enable interaction between users within the bounds of a story
The ideation process began with generating ideas through creative brainstorming sessions focused on targeting queer people's frustrations with current inability to connect/feel a sense of belonging through the lens of these design goals.
Our team took inspiration from a website called Queering the Map, where users from all over the world can tag a location with a blurb of a story that happened to them relating to the LGBTQ+ experience. We wanted to create a map of queer stories, but our spin was that they would be user-submitted audio blurbs, like mini podcasts of authentic queer stories. Similar to Pokémon Go, users would not be able to listen to the stories unless they were within a certain radius, in order to encourage interaction with the community. Users would then be able to look at the exact location where the story occurred, and hear it from the voice of another queer person.
User Flow
We then created a user flow to organize the structure of the mobile app that will guide users in navigating to reach their 3 end goals of listening to stories, creating and submitting their own stories, and viewing individual story comments.
04 / Prototyping
Overview
Wireframes
Usability Testing
Iteration
Low Fidelity Wireframing
After some initial paper sketches, our team began visualizing our design solutions and approaches through our first set of low-fidelity wireframes. We also kept a running list of notes of features we may want to add or adjust, and questions we had for the team.
While building the wireframes, we took inspiration from other apps with audio and map-based functionalities. We looked at Airbnb and Snapchat, two incredibly popular apps, for design patterns that users would most likely already be familiar with. For the audio listening function of our app, we looked at Spotify to see what podcast-type design patterns users would be used to.
Usability Testing
We then conducted our first round of user testing to get feedback on our information architecture and basic design usability before moving on to our V1 high-fidelity screens. For our tests, we asked 6 different participants to complete a few tasks, starting with what they might do to hear stories that happened nearby them. This was meant to analyze functionality of the map page/homepage, and then moved on into letting the users explore the story detail views. As another example, to test the comment section we asked users what they might do to see others’ opinions on the story before they listened to it. We logged this qualitative data in usability inspection reports, and summarized our initial findings. After creating the wireframes and components for our V1 high-fidelity designs, we presented our mockups to the teaching team and conducted a second round of user testing to get some more workable feedback.
Key findings from usability testing
Users wanted enhanced visibility of buttons on the homepage for quicker recognition
We realized that the search bar on the homepage was both redundant and not useful, since users would only be able to listen to stories in their immediate area anyway and would be able to filter through those
Users wanted more consistency with indicators like filter buttons— they were confused by the multiple indicators
More guidance and feedback/visibility of system status was needed in the story creation flow
Major Changes
Change #1: Search Bar
(1) There don’t seem to be many use cases where a user would need a search bar on the explore page (since they can already filter by topic), other than wanting to revisit stories they have already listened to.
Change #2: ‘Create’ Flow
(Left) Our users were confused by the vertical single-page flow of the story creation page. It didn't feel linear enough and the layout was too cluttered with information.
1.
2.
(2) Rather than searching for stories, users can search for locations on the map and view stories available in that area (they won't be able to actually listen to the stories until they are in the story radius, however). We also added a history feature in the user profile section so users can revisit stories they have already listened to.
(Right) Switched to a carousel-style flow where each page prompted the user to do single tasks at a time, seperating the information and making it much more digestible.
05 / Visualized Design Solution
Selecting a Story
Users can click an icon on the map within the radius around their location pin to view the story, play the story, and save it to their archive.
Detail List View
Users can also pull up on the drawer to view a scrolling list of the stories available to them in their radius.
Comments
While listening to a story, users can view and interact with the comment section under a story.
Filters
To view a more specific list of stories in their immediate area, users can filter their results by tags sorted by identities and experiences.
Create
To create and upload their own story, users tap the create icon and follow the prompts to record their story, add details, and submit it for review before it is approved and posted. This is an added safeguard to ensure stories do not reveal personal information that could jeopardize someone's safety or identity.
06 / In Retrospect…
Designing for connection and safety
This project had ethical considerations that we had to take into account for some of our design decisions regarding the safety of its users. We did not want our app to easily highlight queer hotspots in communities in a way that would allow it to be used maliciously by hate groups, and we especially did not want private information relayed through the stories. Our hope was that the content moderation and review of each story would allow us to keep the stories as safe as possible, while also adhering to our goal of helping LGBTQ+ citizens feel connected to their community in a tangible way.
Team demographics
One of the circumstances I faced on this project was that I was among 2 queer people on a team of 5, and had to advocate for my lived experience to members on the group who would not have had the same amount of insight. Working with diverse teams, especially in cases like these where the product is catering to a minority group, is incredibly important. Getting several completely unique perspectives on topics of queerness was really what powered our group forward, and we all learned a lot about both queerness and allyship that we were able to apply to our product.