Case Studies
The Dream Academy
Creating a way for LGBTQIA+ refugees to safely connect through a virtual community.
Safe Place International
9 Weeks
UX Designer
7 UX Designers
7 UX Researchers
3 Project managers
CASE STUDY SUMMARY
My impact
As a member of the UX Design team, I was responsible for the entire design process of the quick exit, low bandwidth, and settings features of our Minimum Viable Product.
Additionally, I contributed to the onboarding process, design system, competitor analysis of existing platforms, problem definition, feature prioritization, stakeholder pitch presentations, and developer handoff documentation.
CHALLENGES
Members face violence and safety concerns leading to distrust of current social media platforms
Safe Place International estimate they lose communication with 50-70% of its members post-graduation
The current communication group has reached capacity
Graduates lack access to support and resources post-graduation
OUTCOMES
A virtual platform designed to access resources, network, share stories, and report instances of violence and discrimination
Implemented a quick exit safety feature that redirects users to a new website and wipes browser history during emergency situations
Designed with technical considerations for low bandwidth access to ensure website accessibility for all users.
"I am blown away by what you all created. This is going be such a gift and make such a big impact in our community."
- Cherrie Sinh, Director of Operations at Safe Place International
An example of a key feature, quick exit where users can sign out and erase the session history from their browser.
Dorothy
Feels the quick exit is a great idea because of security. A lot of students are still in closet or closely monitored so their activities are closely monitored and that becomes a safety issue.
Dorothy
Mentioned a scenario where someone would come and say “hand me your phone” and the importances of quick exit feature.
Suhlah
A feature that allows users to exit the website quickly was not something he considered at first.
Feedback given about the quick exit feature
OVERVIEW
Protect, Connect, and lead
SPI (Safe Place International) is a nonprofit organization dedicated to providing fundamental resources and growth opportunities to doubly marginalized communities, primarily refugees who identify as LGBTQIA+ and single mothers. Their program, TDA (The Dream Academy) is a 10-week course that includes socio-emotional support, employability skills training, and leadership development.
2015
Founded
726
Graduates
26
Projects funded
15
Countries
DISCOVERY
Understanding the business and its users
We conducted stakeholder interviews, user research, and competitor analysis to help us better understand business and user goals. These insights helped us identify challenges TDA graduates face with other social platforms and allowed us to form a strategy on how to develop the platform.
BUSINESS PROBLEM
The organization’s connection with The Dream Academy (TDA) graduates presented challenges post-graduation
- Members face violence and safety concerns leading to distrust of current social media platforms.
- Safe Place International estimates they lose communication with 50-70% of its members post-graduation.
- Graduates lack access to support and resources post-graduation.
USER PAIN POINT
Members face violence and safety concerns online due to:
- Targets of online bullying
- Safe-house raids
- Distrust with authorities
OPPORTUNITY
Connect organization with members
- Create a guided experience
- Accessible access to resources
USER PAIN POINT
Technical constraints
- Difficulty accessing broadband
OPPORTUNITY
Grow users, drive engagement
- Prioritize site usabilitry
DEFINE
Building a space for members to connect and flourish
SPI noticed a need to create a digital community home base, where members can gather to share interests, support, and resources, and crucially anonymously report violence or discrimination. Our team is trying to solve this problem by building a user portal that allows SPI community members to build community and safely report instances of violence and discrimination, thereby increasing their safety and well-being.
MVP (Minimum Viable Product)
Onboarding
Authentication
Low bandwidth
Discourse feed
Profile management
Quick exit
HMW exploration during a design workshop to explore and define major pain points for our MVP
IDEATION
Introduce the new feature during onboarding
Research showed that this feature will be new to most users. To ensure users are not overwhelmed, I included it in the onboarding process and considered the following mental models to determine the optimal order:
01
Focus on essential features during onboarding
The focus for onboarding was on the core functionalities that users are assumed to use most frequently, along with important features such as reporting and quick exit.
02
Introduce Quick Exit last during onboarding for familiarity
The quick exit feature was introduced last for users. My reasoning was that users will be familiar with the feature once going through the action and can engage with the full site once logging back in.
Onboarding flow of the key features the team voted on to introduce immediately
USER TESTING
Feature evaluation
The research team conducted moderated usability testing with 6 participants early in our design sprint and an unmoderated usability test with 2 participants with our final designs. Insights from both tests provided us with guidance and recommendation on our future iterations.
Our goal was to validate our design decisions
Gain user feedback about MVP features to validate design ideas, uncover friction points, and inspire iterations that enhance usability.
ASSUMPTIONS
Users will be familiar with the feature after completing onboarding process
Users will be able to perform quick exit successfully
Users would locate and use the feature rather than using external elements (browser elements)
Original Low-fidelity screens vs High-fidelity screens after user feedback
ITERATE
Learning from feedback
The quick exit feature received positive feedback for its usefulness and practicality. However, user testing revealed that introducing the feature during onboarding caused friction in the experience. Users were confused by the feature itself, and there was no warning given once they executed the quick exit.
Vague explanation of Quick Exit led to user confusion
User feedback suggested that the feature required more clarity. To avoid overwhelming users with too much text, the modal was split into two steps, allowing for better processing and understanding of the feature.
Feedback: Users were not reading towards the end
Towards the end, users admitted that they were not reading the instructions, forcing them to log out only added to their frustrations.
Modal 1: Explain the importance of this new feature
To provide more context for the feature's purpose I split the introduction of QE into two steps. The first modal focuses on explaining the importance of the feature and gives them the option to skip the test.
Modal 2: Give users the option to try it out
After the first modal “Text quick exit” button is clicked, the subsequent modal lists the instructions. I also added a warning to inform them that they will need to sign in again.
DESIGN
Notable design considerations
TDA Connect Feed
01
Reducing file sizes for limited bandwidth
To reduce file size, compress images and avoid using audio and video to ensure faster load times.
02
Avoid infinite feeds to limit backend requests
We want to avoid infinite feeds and auto-refresh in order to reduce backend requests.
8-point spacing system inspired by Google's Material Design.
Stakeholder intake revealed that vibrant colors should be minimally used for user safety.
NEXT STEPS
Measuring impact
We received overwhelmingly positive responses from our test participants. 5 of the 6 participants mentioned that they found value in the quick exit feature.
Metrics for a successful product launch
- Active users
- Page load time
- Quick exit usage
Dorothy
Feels the quick exit is a great idea because of security. A lot of students are still in closet or closely monitored so their activities are closely monitored and that becomes a safety issue.
Dorothy
Mentioned a scenario where someone would come and say “hand me your phone” and the importances of quick exit feature.
Suhlah
A feature that allows users to exit the website quickly was not something he considered at first.
PROTOTYPE
Desktop & Mobile
Desktop Figma Prototype of the flows the design team worked on
Mobile Figma Prototype of the flows the design team worked on
REFLECTION
Users first
I learned how significant UX research can be. After two rounds of usability tests and several interviews. Users provided me with valuable feedback and inspiration. Through their perspective, I was able to understand the importance of prioritizing the needs of users.
What comes next?
As the team moves forward to the next phase of the project, our focus will be on delivering the priority 2 features on the list. To streamline our efforts and avoid having to start from scratch, we will utilize our existing design systems and notes from phase 1. This will not only facilitate a more efficient workflow but also enable us to smoothly onboard new members and a development team.
PORTFOLIO
Next Project
Thanks for reading, check out some other stuff while you’re here!
