MOSAIC
Type
Team
Role
UX/UI Design UX Research
UX Designer UX Researcher
5 UX Students
Duration / Year
3 months, 2023
For an Interaction Design Studio project, our team partook in a 3-month UX process to design an app that helps queer individuals hear memories from their queer community members in a safe way.
We were inspired by how the LGBTQ+ community currently lacks typical support, mostly finding themselves reliant on social media to slowly piece together their identities.
Tools: Figma, Miro, Google Workspace
The Problem
While the queer community often relies on resources on social media to gain more information on their identity, the anecdotes found on social media or within other platforms might not be accurate or necessarily safe.
While brainstorming, we talked about how…
Queer individuals need a
healthy support system that can help them understand their identity and develop a sense of belonging.
The Research
White Paper Research
Initially, I delved into research to deepen my understanding of the challenges faced by LGBTQ+ individuals, particularly younger members.
As a student from Korea, I empathized with those, who like myself, had not received inclusive sexual education, and keeping this data in mind during further user research was valuable in enhancing my understanding.
Competitive Analysis
To see what was working or what could be improved, and
how we could reflect that within our product, we then conducted a competitive analysis of three different platforms
Our direction:
interactive & entertaining platform that doesn’t feel like a sterile
information dumpeducational enough to make an impact but also entertaining enough to not deter young people
User Interviews
To gain a stronger understanding of the needs or expectations that queer individuals might have, our team recruited and conducted 10 user interviews(15-30 mins) with people who were
Ages 16-25, young LGBTQ+ people.
Interview Questions
Coming out experience
Relationship with the queer community (resources, tools)
Sexual education experiences
Outside factors that impact queer experience
Themes
Key Findings
The Ideation
User Personas & Scenarios
Then as a team, we created 3 user personas of different queer archetypes
(out, closeted, and someone in an unsafe place to come out) to better empathize with our target audience and understand what they would want in our product.
Framing the persona development around the coming out process/journey helped us isolate and differentiate attributes for our users.
Our 3 main personas focus on:
a trans woman in the earlier stages of transitioning
a gay woman who needs a sense of community to help with her coming out process
a bisexual man who feels like he can’t fully live his truth in his situation where it is unsafe to come out
We then created scenarios that describe the background context of
pain points, challenges, and problems each of our personas might face.
This step helped us reflect on our current direction with each persona, taking a step back to understand the intentions of our product and what problems we are trying to solve.
From there, we designed storyboards that walked through some of these specific scenarios that helped us further empathize with our user base and figure out the need for a design solution to address their pain points.
Solution Ideation
Let’s allow users to connect with other queer people in their immediate physical area, which can
help them understand their identity and develop a sense of belonging.
Our 3 MAIN 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
Then I took some time visualizing our solution’s use and impact and created sketches of any ideas/potential solutions related to our design problem. And our team conducted multiple brainstorming sessions to address the main pain points we saw from our research and narrow down
our options.
Ideas we liked:
Guided walking tours (Our final choice)
Queer penpals
Shared identity journals …
Inspiration
Pokemon Go: users are not able to listen to the stories unless they’re within certain radius to encourage interaction with the community
Queering The Map: a map of queer stories, but with user-submitted audios for our product(mini podcasts, authentic queer stories)
Bathroom Stall Messages: a platform where users can feel a sense of belonging and leave comments to cultivate a warm, safe space
User Flow Diagram
After brainstorming, we created a user flow to organize the structure of the mobile app that will guide users in navigating to reach their 3 end goals:
Listening to stories
Creating and submitting their own stories
Viewing individual story comments
This served as the “blueprint” for creating our wireframes and final prototypes, showing how our screens and interactions connect.
The Design
& Iteration
Lo-Fi Prototype
Translating our concepts into a prototype, we decided to go with
Queer Story Map style app and began visualizing our design solutions through our first set of low-fidelity wireframes.
1st Usability Test
To get feedback on our information architecture and discover what users might have trouble with, I was then tasked to perform 2 usability tests before moving on. For the test, we gave users a few tasks to complete (ex. hear stories that happened nearby them, explore the story detail view…) to analyze the functionality of the pages.
We logged this qualitative data in usability inspection reports and summarized our initial findings.
Findings:
4 out of 5 users were confused with the Map interaction (pins)
The design for comment section is confusing
The button for creating a story is not clear
There are inconsistencies with scrolling vs. tapping
Hi-Fi Prototype V1
We then moved on to designing our first version of hi-fi wireframes based on the adjustments we discovered from our test and evaluation. After creating them, we presented our mockups to the teaching team and conducted a 2nd round of usability testing to get more feedback.
2nd Usability Test
Using an updated task list, we tested 5 new users. Overall, the major user flow issues showed great improvement, but we gained some valuable feedback on UI aspects.
1st Major Improvement: Search Bar
2nd Major Improvement: ‘Create’ flow
3rd Major Improvement: Brand Identity
The Final Prototype
1
Selecting a Story
Users can click a story icon on the map, within the radius around their location pin, to view and play the story
hey can filter the stories by choosing the tags they want to find
2
Detail list view
Users can also pull up on the drawer to view
a scrolling list of the stories
available to them
They can save the stories and enter the larger detail view to interact
with comments
3
Creating a 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.
Added safeguard to ensure stories do not reveal personal information that could jeopardize someone's safety or identity.
4
Profile
Users can check their saved stories, memories, and tags on the profile page
5
Embedded Memories Interaction
Users can add and view visuals throughout their walk using AR by getting a notification of an embedded memory
The Reflection
Lessons ☁️
Working fully through this project taught me the importance of having meaningful conversations with diverse teams, especially considering how our product is catering to a minority group. Getting to hear about completely unique perspectives regarding queerness was what really powered our group forward, and helped me think about the most important needs we should reflect in our solution.
Challenges ⛈️
Though we faced challenges at the beginning due to a lack of insights, I learned a lot about queerness and allyship through the process that we were able to apply to our product.
Improvements ☀️
If we had more time…
Further explore ways to design for connection and safety
Design a clear onboarding process for the users to increase usability
See or learn different ways to represent augmented reality interaction in designs