For my UX thesis project, I wanted to design an interactive mobile app that would connect more queer youth of color in the Midwest who either grew up in or currently attend PWIs, to any desired resources for identity reconciliation and community building.
In previous semesters, I knew I wanted to commit to a community-oriented capstone project allowing for participatory design with marginalized groups. This particular problem space is very dear to me because many of my loved ones and I grew up in this user group. Medium-wise, I also knew I wanted to explore a fun, playful identity development and interaction design due to my design philosophy.
Overall, this is a love letter to my teenage self and all queer youth of color who grew up or are currently growing up. 💝
Queer of Color
Taken from Brockenbrough (2015): "Anyone having LGBTQ+ identities and nonconforming gender identities and expressions affected by heteronormative power structures, and anyone deemed non-White, including Black, Latinx, Asian, and Indigenous/Native American people."
Youth
For this project, youth is defined as ages 18-24 due to potential difficulties obtaining parental consent for minors, especially when minors are not out to their guardians.
My user group is queer youth of color (QYOC) ages 18-24 in the Midwest who either grew up in or currently attend predominantly white institutions (PWIs). Recruitment for interviews, cultural probes, usability, and user testing, are all dependent on participants already having some level of “outness” or feeling comfortable disclosing their queer identity to me. As a result, any questions and answers about resources in forming identity are retrospective.
You can access and play with the mobile Figma prototype here!
While the default theme is the rainbow gradient one, the app’s icon and appearance can be changed to just a solid color or black and white for users who want a more discrete app.!
Hues icons dependent on theme setting
Settings Flow
Notifications flow
Explore page
My Community pages: Messages, Events
Individual messaging flow
Library Writing Post Flow
Profile pages: Featured, Posts, Groups, and Likes
Profile Editing and Avatar Creation Flow
The first 2-3 weeks of this project was an exploratory milestone to identify what resources queer youth of color currently have and use, versus what resources they want and need to navigate their multiple identities better.
I reviewed 11 journal articles on the queer of color experiences and their identity formations and affinity-diagrammed my notes on them to find the common themes.
Literature Review Miro Key
The guiding questions that I wanted to answer via this activity were:
How do QYOC develop racial/ethnic and queer identities?
What minority identity-related barriers do they encounter?
What's the impact of affirming resources on their identity reconciliation?
LGBTQ and ethnic identity development are independent but overlap, or usually occur at the same time during youth.
Miro Literature Review showing process of identity development for QYOC
Queer youth of color often face difficulties reconciling their multiple intersecting identities. College queer students of color can struggle with the issue of identity disclosure, with racial identities taking precedence over their queer identities because of the racism they experience, especially at PWIs (Garvey et al., 2018).
Miro Literature Review showing barriers for QYOC
As a result of racism within LGBTQ+ communities and potential queerphobia in ethnic communities, QYOC have complicated relations with outness and identity disclosure. There is literature on both the harm of identity concealment and not being out, and also literature on QPOC not resonating with the politics of outness and still finding joy in not being out to ethnic communities. Overall, it's unclear if outness is key to QPOC’s developing their queer identities.
Miro Literature Review showing how QYOC identity development is unique to peers
LGBTQ-related discrimination harms mental health in the form of suicidal ideation and the fear of shame and physical harm, leading to queer people of color feeling that they should conceal their queer identities to “fit in” with their racial/ethnic group (Sutter & Perrin, 2016).
Miro Literature Review showing the negative impact of the barriers QYOC face
Queer youth of color are multiply marginalized based on intersectionality theory and minority stress theory and thus are associated with increased suicidality, poor mental health outcomes, increased use of drug use, and other negative health risks.
Multiple community and social supports for QPOC lead to positive health outcomes. When queer youth of color have access to resources for both their ethnic and cultural community and a larger LGBTQ+ community, they can navigate their multiple identities in an adaptive way (Jamil et al., 2009).
Miro Literature Review showing how community is a positive resource for QYOC
Research on ethnic studies classes shows they positively impact BIPOC students’ achievement and sense of agency (Sleeter, 2011).
Miro Literature Review showing how culturally relevant education is positive for QYOC
There's evidence for engaging in activism being helpful for QYOC. For instance, when adopting a queer youth of color critique, QYOC may also find a sense of agency in being both visibly queer and people of color and use that visibility to engage in social activism. This resistance against barriers and social action activities can buffer the oppression they face, help them feel agency, and foster a sense of belonging.
Miro Literature Review showing how activism is a positive resource for QYOC
Finally, I also found potential features that are helpful to identity reconciliation to explore in my interview protocol and later cultural probe for queer youth of color. These include:
Because the literature review came up with some conflicting insights regarding identity formation and identity navigation and disclosure, I wanted to ask QYOC participants about 3 main areas:
In total, I interviewed and recorded 5 queer youth of color for around 30 minutes to 1 hour each. Interview participants were recruited through the Purdue University LGBTQ+ Center Discord.
Regarding identity, the interviewees’ responses matched with the literature review in that racial/ethnic identity does come first for interviewees before queer identity, due to society or stronger connections.
"[My identities] all kind of play into each other, they’re all a part of my identity as a whole. But I would say the most physical thing about me is my Blackness, just as the first thing people see."
Interviewee C
"My most important identity is probably being Chinese-American… I feel impacted a lot by expectations of parents, knowing they've immigrated from China to US..”
Interviewee B
Overall, my participants ranked resources similarly. They overwhelmingly preferred in-person queer-of-color community resources over educational and activism-related resources. Both when thinking of the past and present, my participants wished for avenues to participate in and communicate with queer-of-color communities
"I think knowing that you're not alone is a good way to not feel ashamed of who you are."
Interviewee C
When asked if education related to ethnic identities was more of a “nice to know” or an identity shaper, participants called it more of a “nice to know,” especially if they previously engaged with their racial/ethnic identity and history as they grew up. However, queer resources online were influential for many participants in forming their queer identities since they’re generally not exposed to it in ethnic communities or K12 education. This even hindered queer identity development for some interviewees.
“You know how anti-gay they are... and I think repressed that part of that identity as long as I could.”
Interviewee A, on growing up in the Middle East
"My family never talked to me about that stuff because... cishet is all there is, there's nothing else."
Interviewee D
Because the participants identified queer community building as an ideal resource, I looked at the app “Lex: Queer & LGBTQ+ Friends," a current mobile solution for in-person and online queer communities without centering romantic relationships.
Lex App Screenshots
On the Apple App Store, it has 1,400+ rates that average to 4.0/5 stars- pretty highly rated! The app includes a timeline of hangout posts and group chats for when you join a group. There are also some QPOC-oriented support groups such as “Black Queer Group"!
Lex App Store Reviews: Positive
While there are positive reviews highlighting the importance of an app such as this that builds queer community, there are also negative ones about the inaccessibility, distance filtering, and the paywall that limits users to a few posts. As such, when designing, accessibility is a key area I needed to focus on in my solution.
Lex App Store Reviews: Negative
After my interviews and competitive analysis of Lex, I designed and deployed a cultural probe to collect another form of rich primary feedback that allowed participants' creative freedom. I used this feedback to narrow my scope and crowdsource preliminary design ideas directly from my user group.
In total, I had 5 participants who completed and sent the cultural probes back. Once I had analyzed the cultural probes, I narrowed down my goal of designing a "tool" to design a mobile app with the participants' ideal resources for identity development.
The structure was similar to the interview topics and goals: the probe was also broken up into their identity development, resources for identity development, and ideal features for a tool. I also added the activities:
Miro Brainstorming of Probe Activities
I also created a mini-style guide and moodboard of what I wanted the design direction to look like for the cultural probe, and most likely high-fidelity designs. This was so I didn’t have to spend too much time later on deciding colors, fonts, etc.
Style Guide/Moodboard to Guide Cultural Probe Design
My recruitment flyer for the cultural probe provided an introduction, qualifications, and a QR code to the exit survey. Both my exit survey and the recruitment flyer stressed the anonymity and consent of the participants.
Cultural Probe Recruitment Flyer
Cultural Probe Exit Survey
For the actual cultural probe, because there were 10 activities I wanted participants to fill out but didn’t want them to get overwhelmed, the probe was in a card format with a different color corresponding to each part of the probe. In the physical version, the cards are front and back, wrapped with the recruitment flyer, and come with a pen.
Physical Cultural Probe: Together
Physical Cultural Probe: Cards
Here are the fronts and backs of the cultural probe sections:
Part 1. Current Identity, and Past Identity Journey: Front
Part 1. Current Identity, and Past Identity Journey: Back
Part 2. Resources for ID Development + Engaging with them: Front
Part 2. Resources for ID Development + Engaging with them: Back
Part 3. Reflection & Ideal Features: Front
Part 3. Reflection & Ideal Features: Back
I had 5 participants who participated in filling out my cultural probe! They came from a range of backgrounds, and preferred either a physical or mobile solution.
Participants “Drawing ‘You’ as… You!” activity
While most preferred the physical, I chose to go with the mobile solution due to more accessibility and reach with a mobile app.
Participants Form of Ideal Tool
Participants' Resources
The resources participants circled overall were:
Moving from the interviews and cultural probe insights, I started brainstorming any features I thought would be relevant. From my cultural probes and interviews, my guiding question in brainstorming was:
How might I design an accessible mobile app with the following QYOC resources?
Based on these, I came up with several main pages of my app, writing down ideal features for each one and hangups I had about them.
Site map ideation key
Site map ideation with Dashboard, Explore, Community, Library, and Profile pages
Users should be able to join groups based on interest and identity along with events.
Users should be able to filter these with tags related to their identities and interests and also based on location in order to get the most out of their in-person community before only finding online groups.
Users should contribute and participate in easy community learning about QPOC with “features” of QPOC in media, activism, history, etc. (naming of this will be changed later based on subsequent wireframe usability tests).
Because this was more of a nice-to-have in both cultural probes and interviews, short-form content would be a low-effort way of prompting discourse, such as a discussion post.
Like education, this was also more of a nice-to-have, but I wanted to encourage users to still participate in workshop events. I created Events into “Social” and “Workshop” to differentiate the types of events users can create and attend. This distinction would later be removed due to wireframe usability tests.
The need for accessibility was clear from the negative reviews of the current market solution for queer community-building, Lex. Because of this, my solution should allow for filtering, muting, and accessibility settings in a larger Settings page.
There was also a difference in how participants viewed themselves as their “true identity” and how they thought society viewed them in the cultural probes. Thus, the app should provide multiple ways of creative identity expression on a profile.
From this activity, I could articulate what the app should be: to provide a welcoming hub for users to explore the rest of the app and the QPOC community. My subgoals for each of the app's pages to realize my overall goal were:
During wireframing, I took community-building inspiration from popular social networking sites in which queer communities often form, such as on X/Twitter and Discord. For other features I wanted to include, I took inspiration from various apps such as:
After feature brainstorming, I created each individual feature I wanted using Figma auto layout, and then grouped them together to create the overall pages. I used a small wireframe style guide to standardize my designs.
Wireframe Style Guide
Wireframe Components
Initial Homepage Wireframe
Finally, I added minimal interactivity so users can click the different navigation icons and move to a different page for usability testing. I tested 1 person from my user group and found valuable insights and issues with my first set of wireframes.
The feedback I wished to address immediately before moving into the next usability tests was:
Changing the Library page to be searchable and more understandable when moving from Wireframes A to Wireframes B
Although the UX copy still created confusion and would later be changed to the more common “posts”, I attempted to add more explanation to the page with an additional search bar, tags, likes, comments, and sharing.
Through milestone critiques, I also got the feedback that the wireframes had so much content that it would create a long and inefficient scroll for users, so in my set of Wireframes B, I reduced the content from each page. The most drastic example of reducing content was in the Explore page shown below:
Condensing the Explore page when moving from Wireframes A to Wireframes B
The protocol was broken up into tasks that took the users through all my wireframe pages. Although the wireframes were different, the usability test protocols were about the same with added questions for wireframes B based on whether the participant would use it now and whether it would have benefitted them in the past. There were also similar insights across all 3 tests about features to add, improving UX copy, and adhering to what they consider to be typical mobile navigation.
There was relatively poor usability with my wireframes due to not following conventional mobile design standards and UX copy, for example not using “posts” or only using popups when there is a mobile keyboard to consider.
Miro screenshot of quotes about features to add
Miro screenshot of quotes about the profile page
Miro screenshot of quotes about the Library page
However, when it came to the concept of all the features and app combined, users did say they would use it and think that this app would help them, both pre-coming out and as their present self.
Miro screenshot of post-test interview quotes
"I would use it without the improvements.. Because it’s gay! And it reminds me of Twitter."
Participant A
"I see the value in this and I kind of wish this was a thing already."
Participant B1
"I would use this as I am now- this is something I would be interested in using, especially for events and whatnot.”
Participant B2
Because of the combined poor usability from the 3 wireframe tests, I went back to the drawing board in looking at common mobile patterns for the apps I referenced earlier, such as Discord, X, Goodreads.
One mobile pattern I missed completely in my initial wireframes was the keyboard popup and posting flows on separate pages rather than popups, which I accounted for in my high-fidelity prototypes.
Because I had difficulties with where to place settings, I found a common mobile app pattern was to have app settings in a side bar, seen in Reddit and X, which I then used for my app. While this was optional, in order to reduce visual clutter, I removed the page names on the navigation bar because they were already at the top of each page. I also increased the visual contrast of the navigation bar. After everything, I added interactivity to my high-fidelity prototype for testing.
Adhering to mobile standards when moving from "Library" wireframes to high-fidelity
To ensure a consistent experienced, I referenced the moodboard I used to create my cultural probe to create a logo identity and type system. I also used consistent spacing via auto layout in Figma.
Logo Exploration
Type System
Additional Visual Assets Used in the App
I user tested 3 individuals with a survey and a link to the Figma prototype so that they could engage with it on their own time. The questions were mostly similar to the usability testing protocol as I used the same tasks, and I received feedback on more features I could include to encourage users to engage with their queer of color community, such as being able to add media to posts and private collections.
Example of a task and its responses in the user testing survey
With user testing questions on whether they would use this, I received similar feedback as my usability test participants: while they would use it as they are now and it could indirectly encourage them to figure out identities with more exposure to diversity, they may not think to use it pre-coming out.
Additionally, the success of the app would depend highly on how content is moderated, the safety of users, and the size of the active user base.
User testing survey answers to "Would you recommend this app?" and "What would encourage you to use this app?"
In my final solution, I added the following features:
If I were to restart this project, I would need to recruit a more diverse sample of participants in interviews and testing.
As mentioned earlier in the documentation, a major limitation of this project is the fact that recruitment for interviews, cultural probes, usability, and user testing, are all dependent on participants already having some level of “outness” or feeling comfortable disclosing their queer identity to me. As a result, any questions and answers about resources in forming identity are retrospective.
My participants throughout the project were mostly East and South Asian participants with only 1 Black nonbinary participant, so there are many first-hand experiences I failed to use when designing, which is important considering the vast number of intersecting identities in the queer-of-color community. This is especially important as Black and Latinx queer youth had the most negative mental and physical health outcomes identified in previous literature reviews.
The app Hues as it was created in this project still exists in a vacuum. Because the testing was mostly focused on UI and features within the app, I made many assumptions that would have to be fully addressed if this were to be launched. For example, one participant mentioned in the user test that for her to use the app, there would already have to be an active user base.
Because queer youth of color face multiple and intersecting forms of oppression and could be a targeted user group, there needs to be a moderation system and user verification system without compromising the data privacy of users. Currently, Hues is imagined as a separate company with a team of moderators reviewing each post for bigotry before it appears on users’ timelines. However, more secondary research should be conducted on this to create a full and realistic experience. Privacy Policy, Terms & Conditions, and Rules must be created before this app “launches”.
