safe place international

safe place international

Crafting a safe and interactive experience for LGBTQA+ users
Crafting a safe and interactive experience for LGBTQA+ users

role

role

UX/UI Designer

UX/UI Designer

time

time

2 months

2 months

team

team

4 UX/UI designers, 2 supervisors

4 UX/UI designers, 2 supervisors

project type

project type

non-profit org

non-profit org

overview

The Dream Academy - a community led 15-week course for LGBTQA+ users that provides resources such as training and skills to inspire members to shape their future.


We aimed to update key features in the mobile browser application to enhance the user experience for SPI users connecting with each other and accessing Dream Academy resources.

Disclaimer: This project involves contributions from multiple designers, and I do not claim credit for every individual design. Each design is credited to its respective designer.

Disclaimer: This project involves contributions from multiple designers, and I do not claim credit for every individual design. Each design is credited to its respective designer.

Disclaimer: This project involves contributions from multiple designers, and I do not claim credit for every individual design. Each design is credited to its respective designer.

project requirement scope

To align with SPI's goal, our team aimed to optimize the platform to conform to the client’s new brand guidelines. Due to time constraints and differing time zones (EU and US time differences), our design team mostly worked asychronously in 2 different smaller teams because of the timezones.

business needs 💼

business needs 💼

business needs 💼

  • Better accessibility of skills

  • Generate new out-reach

  • Cultivate a safe haven for LGBTQA+ users

user needs 🙋‍♀️

user needs 🙋‍♀️

user needs 🙋‍♀️

  • Easier connection with peers and leaders

  • Access support systems for safety/security

constraints 🙅‍♀️

constraints 🙅‍♀️

constraints 🙅‍♀️

  • Initial project was in hiatus for 1.5 years

  • Outdated and non-uniform design system

  • Time restrictions and time zones with team mates

my responsibilities 😎

my responsibilities 😎

my responsibilities 😎

  • Audit initial screens to determine updates

  • Redesign components that matches new brand guidelines

  • Design efforts (wireframe, prototyping, redesign, etc.)

style sheets

typography - old vs new style sheets

typography - old vs new style sheets

click images to enlarge into new tab

color style guides - old vs new style sheets

color style guides - old vs new style sheets

button guidelines - old vs new style sheets

button guidelines - old vs new style sheets

design system

Once the style sheets were completed, we moved on to producing the design system. The rework team updated the components onto the mid/high-fidelity screens for a trendier interface, while the design system team consolidated previous elements into a unified design system.

design components in action 👉

design components in action 👉

sign up

onboarding

create a new post

profile page

feed

profile page

takeaways

Re-designing a caring, systematic, and sustainable design system

Our team aligned the client's visual designs with updated brand guidelines to better reflect Safe Place International’s mission supporting LGBTQ+ refugees. We prioritized seamless integration, brand integrity, user comfort, and safeguarding features by adding a noticeable "Exit" button to enhance user safety.


Prioritization

Due to time constraints, both teams simultaneously updated the design system and user flows. We aimed to refresh more screens and make decisions in hands-on meetings, but focused on screens that could be developed within the limited timeframe, given the team split by time zones.

need to bring your vision to life? i’m all ears

estellahoang.ux@gmail.com

currently in - 📍san diego

need to bring your vision to life? i’m all ears

estellahoang.ux@gmail.com

currently in - 📍san diego

need to bring your vision to life? i’m all ears

estellahoang.ux@gmail.com

currently in - 📍san diego