— Tiffany Chan




HAVEN

Summer 2019 / 8 Weeks

Created by myself, Stephen Therriault, Sahil Mann, Quinn MacDonald, and Alfred Zhang.





Roles
UX/UI Design
Art Direction
Visual Design
Illustration

Tools
Illustrator
Photoshop
After Effects
Procreate
Figma
InVision
Overview

A mobile application proposal developed for a 3rd year interface design course that helps LGBTQIA2S+ youth prepare to come out by prompting critical thinking and situational awareness, while providing them resources to build their support system.

Haven is meant be integrated into LGBTQIA2S+ youth organizations to help extend their support to these vulnerable communities who may have more difficulty accessing these resources. 



Context



Domain Problem in the LGBTQIA2S+ Community
LGBTQIA2S+ youth often struggle in their process to coming out due to a variety of factors that often prevent them from coming out until they have reached adulthood.

This inability to feel accepted by those in their immediate circle, as a result, may cause physical and emotional scars moving forwards if their needs are not supported.




Many LGBTQIA2S+ youth may face homelessness if their identity is not accepted.





Research Process






Understanding the Coming Out Experience
Results from our ‘Understanding Experiences of Coming Out’ survey.

I developed a survey that examined the experiences of LGBTQIA2S+ youth as they came to understand themselves better, using long-form answers to gain quantitative responses about the barriers they face when attempting to come out.

Where many respondents denoted fear of not being accepted as a large barrier, the key insights we distilled were that preparing to come out was the most stressful part of the process, and that one must always be evaluating who to come out to. These takeaways pushed us to create a resource that people could always refer back to.


Insights derived from primary and secondary research, focusing on the emotional state of LGBTQIA2S+ people.




Areas of Opportunity.
We came up with three initial areas of focus — all to connect LGBTQIA2S+ youth with at some point in their coming out process.



Based on survey results and research, we developed a persona and emotional map to empathize with what these youth might be experiencing during this time. With our opening, developing a strong base for critical thinking during the preparation phase to support the entire coming out process would provide a framework for coming out in the future.


Persona reflecting issues that may stem from living with potentially non-supportive parents.



Journey Framework focusing on when youth start identifying as LGBTQIA2S+ and want to learn more about others’ experiences.







Design Process

Defining the Art Direction
As the lead visual designer, I opted for round and vibrantly coloured vector illustrations to convey the welcoming and supportive tone we want Haven to project to a younger audience. 


Onboarding images.

Module cards.


I conveyed this approachable tone by balancing playful sans-serif fonts with a bold rounded serif font to convey some of the seriousness of the topic.

Haven brand typefaces.












Feature Breakdown













Onboarding

Haven’s initial onboarding is meant to reinforce a sense of safety from the beginning — predominantly in consideration of the social environment of an LGBTQIA2S+ teen.

We left the degree of security up to the user to decide, as it is intended to be entirely personalized to how comfortable or uncomfortable they feel in their social setting.















Easily Digestible Modules

Haven’s modules blend together educational information and critical thinking activities to create building blocks for a coming out plan. The modules are offered in a non-linear fashion so that the user can educate themselves based on whatever suits their needs best.















Approachable and Informative Activities

Information-based modules are presented in bite-sized form so that users can flow through the sections  quickly. Embedded within these modules are videos, external links, and audio clips that help illustrate how others in the community have gone through similar circumstances and have succeeded in finally coming out.
















Interactive & Encouraging Critical Thinking

An example of one these activities is the conversation starters, which is intended to help users gauge how accepting others are of LGBTQIA2S+ people and similar topics.

We took reference from The Trevor Project’s resources to inform our content strategy, as they are a reliable organization that supports LGBTQIA2S+ youth.













A Human Touch

I designed this activity’s interface in the form of a chatbot-esque conversation to simulate a situation between the user and the person they might choose to come out to. 

In practicing these skills, LGBTQIA2S+ youth are encouraged to gain more confidence, and have a point of reference to return to — their Plan — when they finally decide to fully come out.













Breaking Down My Plan

The Plan feature contains all saved information generated from completing interactive activities in the modules. The intent of this feature is so that all applicable tools can be referenced at a glance if users need a little bit of help remembering the skills they have learned to feel more at ease when coming out.







Key Interface Decisions.
I attempted to frame the My Plan feature as ‘does a list have to look like a list’ so that all the information did not feel overwhelming. I experimented with an interface emulating Apple Wallet and its interactions to condense information. An expanded plan showing showing all categories was developed as well to adhere to expectations of a general list application’s appearance.


My Plan Wallet (left) versus Expanded List (right).

UX designers at SAP offered feedback commenting on how the wallet seemed too complex, as it seemed difficult for users to understand the recognition over recall of the saved information and the modules due to being hidden at a glance.

As a result, we opted for the expanded plan. Taking away any extraneous steps to access the resources they need ensures they would be able to access the necessary information without much thought in times of stress.

















Reinforcing the User’s Safety with Incognito

In the settings, users are able to customize the degree of privacy they would like for their application — either password protecting their app, or disguising the application under another appearance through the application’s Incognito Mode.









Further Considerations



Export Plan
A feature that allows users the ability to export their plan to bring to a trusted ally, such as a counsellor, for review. Implementation would be located in the bottom of the Plan or in the Settings so it wouldn’t detract from the rest of the content.



Destroy Haven
As users may be in circumstances considered unsafe for them — or are unsure of the degree of safety needed —, having the option to delete the app and their information is extremely important to both instilling the users’ trust and to ensure Haven isn’t a danger to their well-being.



Reflection



Final Thoughts
If we were to move forward with this project, we would look further into reaching out to LGBTQIA2S+ community organizations and other peers to expand on the application’s contents. I wished that we could have conducted more user testing specifically with more LGBTQIA2S+ people to gain a greater perspective into what content is the most applicable to uninformed and/or anxious youth. 

Overall, I feel very fulfilled being able to create a product that could tangibly be used to help those in need — especially those in this community that I feel very passionate about.


HOME    /   ILLUSTRATIONS