A myriad of illustrated faces cascade vertically. Every cool-toned face is friendly, calm, and a little bit flirty

The module 'Taking safe steps' is mocked-up to show 4 sub-activities and a lively orange illustration of a person looking curiously at footprints

Haven

A safe space to gather your thoughts

Haven is a speculative app for LGBTQ+ youth to build their critical thinking skills, support systems, and situational awareness as they plan to come out. The prototype was created as part of a senior-level interface design course at SFU’s SIAT design school. In the first meeting of this 8 week project, I challenged my team to decide on a meaningful audience before searching for market justifications. The team agreed on the LGBTQ+ community, and Haven was born.

Role

Interaction Design,
Sprint Coordination

Timeline

8 week project at SFU's SIAT Design School

Team

Alfred Zhang
Steph Therriualt
Sahil Mann
Quinn MacDonald
Tiffany Chan

the problem

94% of unhoused youth are LGBTQ+

Queer youth face significant physical and mental health crises due to the lack of familial acceptance. According to the UCLA, LGBTQ+ youth make up more than a third of all unhoused people, with 46% of them having left home due to family rejection.

The need to prepare

“Preparing to come out is one of the most stressful experiences I have gone through... [there’s this] fear of being ostracized”

— Eugene Lee Yang, Why I’m coming out as gay

Needing privacy to prepare

“I would think about coming out [to my parents] in the shower... it was too much to keep in my head, but I didn’t have somewhere I felt safe putting it.”

— Interviewee

Coming out is continuous

“Not everyone will react the same and you never come out once. The first time is the scariest but from then you may have to come out to new friends or distant family members.”

— Survey response

Persona

This apprehensive teen wants to live openly as bisexual, but is afraid of what their situation might be if they get outed to some of their family. As my team combined research and personal experiences to create this persona, I leveraged my experience working with parents and children to inform their fears about privacy, both physical and digital.

A short-haired teenager wearing a hoodie. 'A 16-year-old high school student who recently began identifying as bisexual. they are scared their parents will disown them if they confide in them, and are frustrated by being unable to tell anyone around them.' 'Goals: Find someone they can come out to safely. To be able to live and date openly. Needs: Be aware of potential outcomes of coming out. To build a support system and plan before coming out. Behaviours: Reads LGBTQIA+ forums without enaging in discussions. Watches coming out stories in incognito on their phone. Frictions: Limited privacy living with family. Fear of being ostracized by family anf friends.'

Coming Out

Journeymap

Knowing where to intervene was challenging. During our first sprint we created a key actors map where I identified the preparation & evaluation stages as the most actionable area to support users. By the time we had created our final journeymap, the scope was reduced to preparation because it more responsible to let users self-evaluate their situations.

A key actors map drawn on a whiteboard shows the interactions between LGBTQIA+ youth, the LGBTQIA+ community, School counselors, Allies, and Authorities. Five green sticky notes are placed towards the end of the map in a box labelled 'target.' This target area indicates the evaluation step as the project target.

A journeymap shows the actions, thoughts, emotional vulnerability, and frictions of queer youth as they move through the stages of thinking, knowing, coming out, and being out.

Current offerings

During research, we found many great offerings from The Trevor Project, PFlag, and The Human Rights Center, but I felt they all could better engage a younger demographic with a mobile-first approach.

Two pages of Trevor Project's 'Coming out as you' guide that outline how to think ahead and test the waters with family. The final page asks questions like 'What are some good responses you may hear' and provides some room to write a response — The Trevor Project's Coming Out as You booklet is informative, but isn't very engaging.

Process

Sprints questions written on a whiteboard: 'How can we design a way to create and evaluate a backup plan?' and 'How can we build trust with LGBTQIA+ Youth?'

Many post-it notes are attached to a purple wall in an affinity diagram with nine categories: Design, Emotion, Plan B, Goals, Trust, Coming out, Safety, Ally, and Planning

A solution sketch titled 'The Squarespace.'

A solution sketch titled 'Counter-clockwize.'

Two solution sketches titled 'The preparation peacock puzzle' and 'Get me to gay.'

Sprint 1

Even though they weren’t required, I coordinated design sprints for my team. Together, we defined sprint questions, wrote HMW’s, grouped them with affinity diagramming, and did multiple solution sketches. By the end of the 4 day sprint, multiple paper prototypes had been produced.

A busy series of storyboards on a whiteboard shows Haven's main workflows.

A busy series of storyboards on a whiteboard shows Haven's main workflows. A design studio is the background.

Sprint 2 & 3

Over the next two sprints, I oversaw storyboarding while prototyping, and conducted user testing to improve Haven’s main flows.

Iteration:

My Plan

“As a queer youth, I need a place to review my information, and to track what I still need to plan for.”

A low-fidelity mockup for tracking a goal: Find best location, with multiple subtasks, and a prompt to start the next goal: Pick the optimal timing.

Sprint 1

Representing “progress” as a set of pre-determined steps isn’t ethical because coming out isn’t a set path. Felt too close to a generic task-tracking app.

A medium fidelity mockup outlines a numbered list of categoties like 'Your peers, authority, shelter,' and 'community'. The layout it spartan and quite boring.

Sprint 2

While my teamates adapted content from The Trevor Project, I stripped out unnecessary task-tracking features. As a result the plan page was more straightforward but still too linear.

Industry Crit Week

I prototyped an interactive version that used progressive disclosure to collapse each category ahead of a desk crit. Feedback from designers at SAP was that too much was being hidden, and the design was over-complicated.

Final Prototype

My objective for the Plan page was to highlight how far users have come, not how much they have left. Minimized headings grow as users engage with content so their information is automatically organized in one place.

Headings were rephrased as questions to make content more inviting, and reinforce the need for self evaluation.

Prototyping

While visual design was defined in figma, I imported the UI into Invision studio because it offered more control* over complex interactions and motion design.

*In 2019. Figma offers comparable benefits now.

Content

Engagement testing

I was alarmed by early tests because users weren't engaging with the prompts, leading to no self-reflection. Over sprint 2 and 3 I investigated the problem and tested several solutions. “Blank canvas paralysis” created initial resistance, so I reduced the large text area to a simple field and added optional suggestions. After seeing only small improvements, I hypothesized that visualizing responses as messages could prime users to think conversationally. This was by far the most succesful improvement and doubled engagement.

<1

Responses, V1

A UI mockup that asks users 'What are some topics or questions I could bring up to a potential confidant' and supplies a large text area with 'your questions' as placeholder text.

1-2

responses, V2

A UI mockup that asks users a question, and provides a small text field to reply, but also includes a 'need a suggestion?' feature and some advice like 'don't make it too obvious' and 'don't make it about yourself

3-5

responses, V3

A UI mockup that prompts users to reply with questions, and saves their responses as text message bubbles

Final Version

Motion design

Testers struggled to recall where their information was being saved. Realizing this was a continuity issue, I drew focus to the relevant icon while user info was being saved. This change, while small, improved navigation accuracy by nearly +45% when testers were asked to find their saved responses.

Animation improved navigation by +45%

App walkthrough

Haven

A safe space to gather your thoughts

Reflective content

Haven’s goal is to pose questions, to provide some answers, and to build trust with youth by preparing them to make their own decisions. Videos, activities, and extra resources create a multi-modal scaffold for learning. I payed keen attention to details, like ensuring videos are muted by default, and opened links circumvent search history by using an in-app browser.

Scaling user plans

Completing activites in any order automatically organizes critical information in a single place.

Onboarding

Complete plan

Privacy

User safety is always my first priority. The interaction I’m proudest of designing is Haven’s ability to conceal itself in case someone comes snooping.

An illustrated person looks curiously at a set of footprints laying ahead of them.

Next steps

Haven has a strong visual identity, but was created before I had an understanding of using design systems or accessibility criteria. If this app were to be fully developed, my first priotity would be to redesign the UI by removing low-contrast text and creating a unified design system.

Learning

Over the course of this project, I picked up new tools like persona spectrums and mental model diagrams. I challenged myself to lead a design team by organizing sprints, and I gained a new understanding of how powerful design is when projects represent the values and idenities of their team.

I’d like to thank my wonderful team of friends for sharing their experience and energy. I am a better designer, ally, and human because of you.