Soul Support

Transforming Lives, Restoring Hope

Role

Front-end Developer

Team

3 Developers

Timeline

2 Months (2023)

Tools

React, Node.js, MongoDB

Soul Support Screens

Overview

Soul Support is a comprehensive mental health platform designed to make mental well-being resources accessible, interactive, and stigma-free. With features like self-assessment quizzes, an AI-powered chatbot, secure video consultations, and curated professional content, it empowers users to seek support at their own pace while also connecting them with licensed professionals when needed.

This project was developed as part of our academic work, aiming to reduce barriers to mental health access through technology-driven, user-friendly solutions.

The Challenge

In Pakistan and many developing regions, mental health is still surrounded by stigma, lack of awareness, and limited access to professional care. According to WHO, less than 1% of the national health budget is allocated to mental health, and professional support is scarce, especially in rural areas. Individuals struggling with stress, anxiety, or depression often lack safe, affordable, and private resources for early intervention. This gap leaves many without guidance until their conditions worsen, further straining the limited healthcare infrastructure.

The Solution

Soul Support bridges the accessibility gap by combining self-help tools with professional support in one platform. The app includes: Self-assessment quizzes to help users identify their mental health state. AI chatbot (powered by GPT) to provide 24/7 conversational support and guided exercises. WebRTC-based video calls to connect users with licensed therapists for remote counseling. Curated blog & resources from mental health professionals to raise awareness and provide reliable information. Conducted surveys with 50 university students and 10 working professionals to understand pain points in accessing mental health care. Findings revealed that most users wanted privacy, affordability, and instant availability of support. Interactive webinars to promote community-based mental health learning. By combining AI, telehealth, and human expertise, Soul Support provides scalable, stigma-free access to mental health care.

Design Process

We followed a user-centered design approach, conducting extensive research with both restaurants and potential recipients to understand pain points in existing food redistribution systems.

1

Research & Discovery

Conducted surveys with 50 university students and 10 working professionals to understand pain points in accessing mental health care. Findings revealed that most users wanted privacy, affordability, and instant availability of support.

2

Wireframing & Prototyping

Created low-fidelity wireframes for quizzes, chatbot conversations, and video calls to test navigation flow and user engagement with different support modes.

3

User Testing

Three iterations of usability testing were carried out. Feedback emphasized the importance of simple language in quizzes, chatbot personalization, and easy booking flow for therapy sessions.

4

Visual Design

Developed a calm, empathetic visual language using soothing blue and pastel tones. Custom illustrations guided users through onboarding and empty states to reduce anxiety when using the app.

Key Features

The app combines practical functionality with thoughtful design touches to create a seamless experience.

Self-Assessment Quizzes

Evidence-based questionnaires that provide users with initial insights into their mental well-being.

AI-Powered Chatbot

Available 24/7 for guided exercises, stress management tips, and conversational support.

Professional Support

Secure WebRTC-based video calls with therapists, ensuring privacy and confidentiality.

Curated blog

Expert-written content on topics like stress management, mindfulness, and mental health awareness.

Interactive Webinars

Group sessions with professionals to foster learning and reduce stigma.

Home Page

Donor Screen Donor Screen Donor Screen Donor Screen Donor Screen Donor Screen Donor Screen Donor Screen
Scroll to navigate

Visual Design

The visual design balances warmth and professionalism, with a color palette inspired by fresh produce and typography that ensures readability across all user demographics.

Color Palette

We chose a primary blue and pink tone that evokes freshness and sustainability. High contrast was maintained for accessibility.

Typography

Inter was used as the primary typeface for its excellent readability on mobile screens. We established a clear typographic hierarchy with size, weight, and color to guide users through complex flows like the negotiation process.

Color Palette Typography

Behind the Code

Soul Support's technical foundation was built for scalability, privacy, and real-time interactivity.

Tech Stack

React Js

Responsive and modular front-end.

Node.js + Express

Real-time API handling 500+ requests/minute

PostgreSQL

Robust back-end database to securely store user data.

Testing & Validation

Comprehensive quality assurance process combining manual testing and code quality analysis

Manual Testing

  • Executed 500+ test cases covering all user flows
  • Verified UI consistency across 3 device types
  • Conducted real-world scenario testing with actual users

Automated Testing

  • API contract testing with Postman collections

Usability Testing

  • Conducted with real users who validated the simplicity of navigation and reassurance provided by the app.

Evaluator's Feedback

Miss Asma

A well-executed and empathetic platform that effectively leverages technology to make mental health support accessible and engaging.