"Safe Havens" Website/App (Cross-Platform - Responsive)
- CASE STUDY -
view app prototype | view website prototypes | view case study PDF
Embedded Files
THE PRODUCT: Safe Havens is a cross-platform, emotional support website/app. The primary target market is teenagers (13-18) who want a safe place to anonymously connect with peers through private guides and group chats.
MY ROLE: UX designer leading the “Safe Havens” app and responsive website from conception to delivery
RESPONSIBILITIES: Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design
THE PROBLEM: Approximately 50% of teens have faced emotional issues in the past year, including 13.3% who experienced major depressive episodes. These adolescents require a secure and confidential platform to seek guidance and emotional support—a safe space where they can connect with others who have overcome similar challenges, while maintaining anonymity to protect their privacy from friends and family.
THE GOAL: Design a user-friendly app that enables easy setup and access to topic-specific group chats. The app will connect users with personally matched private wellness guides, ensuring personalized support. Prioritizing user privacy, the app will create a secure environment for individuals to navigate their emotional issues and receive valuable guidance.
USER RESEARCH SUMMARY
Through extensive research, including interviews and empathy mapping, I gained valuable insights into the needs of the target users. Teenagers grappling with insecurity, anxiety, and depression emerged as a prominent user group. Many participants expressed their openness to trying an emotional support app or website to connect with peer groups or private counselors.
Contrary to my initial assumption that most teens preferred chatting with licensed therapists, survey results revealed a significant number of teens seeking independent solutions. They preferred a platform with non-licensed volunteers, as long as reliable reviews and quality control mechanisms were in place to ensure effective support. Financial constraints and privacy concerns were key factors driving this preference.
PERSONA: LANDEN
Problem Statement: Landen is a 9th grade boy with ADHD who transferred to a new school who needs to connect to a peer support group using his phone’s browser, because he wants help with life challenges without his parents’ involvement.
COMPETITIVE AUDIT
An audit of a few competitors’ products provided direction on gaps and opportunities to address with the Safe Haven app.
IDEATION
I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit.
My focus was specifically on account creation, chat groups and an AI chatbot to match users with the right wellness guide.
DIGITAL WIREFRAMES
After ideating and drafting some paper wireframes, I created the initial designs for the Safe Havens app. These designs focused on helping users connect with emotional support chat groups and live wellness guides using an AI chatbot check-in.
LOW-FIDELITY PROTOTYPE
To prepare for usability testing, I created a low-fidelity prototype that assessed the user flow of creating an account profile and using an AI chatbot to connect with a live wellness guide. View Safe Havens’ low-fidelity prototype.
USABILITY STUDY: PARAMETERS AND FINDINGS
MOCKUPS
Based on the insights from the usability studies, I applied design changes like providing a heading above the individual wellness guides, so they aren’t mistaken for licensed therapists. I also added a clear “Emergency” button on the bottom menu for quick access to urgent hotlines, along with other minor changes.
Since most usability study participants were confused with by the question marks on the topic selections, I changed them to check marks and made the priority icons stars. This shows users that all topics are allowed by default, but they can choose which topics to prioritize and which to hide.
HIGH-FIDELITY PROTOTYPE
The high-fidelity prototypes for different screen sizes followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
View the prototypes:
ACCESSIBILITY
SITEMAP
With the app designs completed, I started work on designing the responsive website. I used the Safe Havens sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
RESPONSIVE DESIGN
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.
TAKEAWAYS
NEXT STEPS
Thank you for your time reviewing my work on the Safe Havens app/website!
If you’d like to see more or get in touch, please click here to contact me.
Page updated
Google Sites
Report abuse