Qwwweero: building a wellness app for the queer community
Designing a safe space for mental health support and inclusivity
time
8 days
team
Javier Quiroga
Rhea Sushara
tools
Figma
Figjam
Google Suite
Adobe Photoshop
Procreate
problem
For our forth project of the Ironhack UX/UI Bootcamp, we are tasked with ideating and designing a wellness app for a fictional client, the Daily Health Conference. As a non-profit organisation, they focus on promoting health and wellness through public talks, workshops, and training worldwide. They're hosting a competition where designers present app ideas to a jury of wellness professionals, designers, and investors.
We are creating a prototype for a mental health app that caters to the LGBTQ+ community. The prototype should include:
The user flow for the main feature of the app.
User profiles and goals.
Monitoring user progress and encouraging a healthier lifestyle.
User control over personal data.
The app should be native to one platform (iOS or Android), and we are expected to create at least one screen for a different device to demonstrate its adaptability to user needs. We have not been given specific guidelines for visual design and are required to create a new style guide for the app.
solution
We recognize that queer individuals are more susceptible to experiencing mental health disorders due to the trauma they face. While we chose this theme out of passion, it is crucial for us to set aside our personal experiences to gather objective and reliable insights from our research. By approaching the project with an open mind, we can ensure the validity and quality of our findings.
research
& insights
secondary research
While there is a significant amount of literature on the subject, it can be challenging to find comprehensive statistics specifically focusing on LGBTQ+ individuals. However, some notable statistics that we come across include:
LGBTQ individuals are 2.5 times more likely to experience depression, anxiety, and substance misuse compared to heterosexual individuals.
The rate of suicide attempts is four times greater for lesbian, gay, and bisexual youth and two times greater for questioning youth compared to heterosexual youth.
(Source: American Psychiatric Association)
These statistics confirm our assumptions of a higher prevalence of mental health challenges within the LGBTQ+ community and emphasise the importance of addressing them in our app.
survey
We conduct a survey with 60 participants over a span of two days, primarily focusing on individuals who identify as something other than straight or heterosexual (81% of respondents). The insights we gain from this group are as follows:
Over 80% of the participants reported suffering from a mental health disorder.
When it comes to managing their mental health in the short term, the majority of respondents mentioned using music as a coping mechanism.
Equally divided responses were received regarding whether they prefer to isolate themselves or talk to someone when dealing with mental health issues.
The survey participants expressed a strong preference for a mental health app that prioritizes privacy, friendliness, and anonymity.
These insights from the survey provide valuable information for shaping our app design as well as giving us clues when writing our interview script.
user interviews
We conduct in-depth user interviews with six individuals who identify as queer. Each interview lasting approximately 30 minutes.
We discover a key insight that will shape our solution: many of their problems stem from the inability to relate to those around them. They face experiences that heterosexual cisgender individuals cannot fully comprehend, resulting in isolation.
Paradoxically, their own queer community sometimes reinforces the very stereotypes they strive to avoid.
They express a belief that there is a lack of inclusivity in the app world.
affinity diagram
We create an affinity diagram by organising relevant quotes and insights from our research into clusters. Through voting, we identify the most important ones and extract three fundamental concepts that will guide us throughout the rest of the process:
Community
Inclusivity
Self-help
These concepts will serve as guiding principles as we develop our solution, ensuring that our app promotes a sense of community, embraces inclusivity, and offers valuable self-help resources for the mental health needs of queer individuals
user persona
We create an empathy map based on the results of our survey and interviews, focusing on empathising with individuals in the queer community who desire understanding, love, and acceptance. We conclude that our users:
See toxic social media apps that prioritise superficial traits and perpetuate harmful stereotypes, which further alienate and marginalise them.
Hear heteronormative narratives that don't resonate with their own experiences and struggles, reinforcing their feelings of being misunderstood and excluded.
Often feel isolated because they struggle to find others who can truly relate to their unique challenges and experiences, leading to feelings of loneliness and disconnection.
Based on this information, we create our primary user persona, Freddie. Freddie represents the target user of our app, embodying the thoughts, emotions, and needs of individuals in the queer community. We will use Freddie as a reference point throughout the design and development process, ensuring that our solution addresses their specific pain points and caters to their desires for understanding, love, acceptance, and a sense of belonging.
user journey
Having created Freddie, we think of what a day in their shoes would feel like, the high points and the low points, building their user journey map.
Freddie faces daily frustrations as they are frequently misgendered by colleagues and customers. Seeking comfort, they reach out to a friend who, being a straight cis woman, struggles to fully comprehend Freddie's experiences. Excited to join their band for a concert in Soho, Freddie's anticipation turns into disappointment upon hearing comments from individuals within the queer community that make them feel excluded. Returning home, Freddie spirals into loneliness and depression, choosing to isolate themselves.
problem statement
Queer people need to build an inclusive support system because everything in the market excludes their experiences
ideation
Now that we understand the pain points, we have shed a few tears while creating Freddie, and we have a clearer idea of what is needed, we are ready to enter the ideation process.
feature prioritisation
We start by brainstorming a list of features for the app. To prioritise these features effectively, we use the MOSCOW method
information architecture
We organise the must-haves and should-haves into a site map. This helps us visualize the structure and navigation of the app. Additionally, we create a basic user flow to outline the steps and interactions that users will go through when using the app
testing & iterating
low-fidelity
In the low-fidelity wireframes, our main objective is to create a sense of safety and comfort for the user. We carefully choose kind and reassuring language to communicate with them, ensuring a calm and welcoming experience.
During concept testing, we engage with testers to understand their expectations before interacting with specific buttons, which helps us refine the wording and the placement of the screens.
mid-fidelity
Building on the insights gained from concept testing, we move on to creating mid-fidelity wireframes. Following the same philosophy of creating a safe space, these wireframes offer more detailed visuals and further enhance the user interface. By maintaining a consistent approach of using gentle language and a soothing pace, we aim to provide an empathetic and user-centered design experience.
In line with our design approach, we maintain lowercase text and use friendly, approachable language throughout the interface. Our goal is to create a conversational tone, making users feel as if they're engaging with a caring friend who genuinely wants to know how they're doing.
To ensure the usability of our designs, we conduct extensive usability testing. In one specific case, we aimed to avoid using a graph icon for the dashboard to maintain a friendly and approachable tone. We explored alternative options such as a book or a footprint, but ultimately decided to revert back to the graph icon. Through testing, we found that users easily recognized and associated the graph icon with its intended meaning, which eliminated confusion and ambiguity compared to the less familiar alternatives.
high-fidelity
mood board
Once we have established the app's overall structure, we can shift our focus to visuals and interface design. Beginning with the fundamentals, we outline our desired brand attributes and then proceed to create a mood board that captures the essence of what we aim to convey.
queer
connected
comforting
calm
friendly
colour
For our color palette, we seek a balance between softness and diversity. After thoughtful consideration, we opt for a selection that resembles a muted and subdued version of the pride flag, capturing a sense of tranquility while honoring the spirit of inclusivity.
typography
When selecting our typefaces, we prioritize a round and smooth aesthetic without sharp edges for our title font. As for the rest of the text, we aim for a clear and legible typeface with a slight departure from conventional norms. Capital letters are not a concern as we present all text in lowercase for a more approachable and informal feel.
style tile
We consolidate all our previous work into a style tile, bringing together our chosen color palette, typefaces, and visual elements. Additionally, we incorporate delightful illustrations created by Rhea, which will serve as avatars for the anonymous profiles within the app.
To enhance the user experience, we introduce a dynamic gradient that smoothly transitions between screens. For capturing user moods, we opt for simple smiley icons. Overall, we infuse the design with a sense of transparency and fluidity.
final prototype
next steps
& retro-
spective
the future
During the desirability testing phase, we were thrilled to receive positive feedback from our testers, as their chosen words perfectly aligned with our brand attributes. This reassured us that our design resonated with our intended audience.
With the basic flow and additional screens in place, our focus now shifts to designing the remaining screens while continuously testing and iterating.
As our initial design was tailored for iOS, we are also working on creating its Android sibling. Although the differences may be subtle, we recognise the importance of adapting small details on each screen, such as menu and edit icons, to ensure a seamless user experience on both platforms. Our attention to these nuances will result in a consistent and optimised design for all users.
And finally, we would greatly appreciate the assistance of mental health professionals to ensure the accuracy of our language and to contribute their expertise in creating content for the app. Their valuable input will help us deliver an app that is sensitive, informative, and beneficial to our users.
looking back
This journey has been a true emotional rollercoaster. Engaging in conversations about mental health challenges and crafting Freddie's story was not without its difficulties. There were moments when I questioned my choice of such a heavy topic. However, looking back, I am proud of the outcome we achieved, both in terms of content and visuals.
I am immensely grateful to have had Rhea as my teammate. From the very start, she embraced the idea wholeheartedly and provided unwavering support and understanding. Her commitment as an ally has been exceptional, and I can't thank her enough for her incredible partnership throughout this process.