The Lifeline Canada Foundation
Project Overview:
A friend of mine introduced me to a company called The LifeLine Canada Foundation over email. The company’s CEO was looking for a companion app to complement their website. The LifeLine App is an online resource aimed at raising awareness of mental health issues and building mental health resilience for Canadians.
This mobile application encourages users to reduce the stigma surrounding mental health conditions and promotes evidence-based resources and programs with integrity, respect, and inclusion.
Project Details:
- Type of Work: Volunteering
- Type of Website: Application
- Time frame: Periodic Check-ins
- Link To Github: Outsourced Development for Application.
- Link To Demo: https://thelifelinecanada.ca/lifeline-app/
- Project Role: Researcher, Designer, Collaborator
- Project Duration: Aug 2021 – Nov 2023
- Project Status: In Development
- Team Size: 1
- Target Audience: Canadians affected by mental health issues.
Objectives
- Research top-performing mental health apps to identify successful features and user engagement strategies.
- Explore accessibility options to ensure the app is usable for individuals who are hard of hearing or have vision impairments.
- Develop presentation concepts for the app’s user interface and user experience.
Timeline: 1 month
Features
Here are some consistent patterns that emerged when researching popular mental health apps:
2 Types of Navigation Used
Flat Menu Structure
A large, immersive menu that takes up the full screen. Common in onboarding flows or when users first open the app. It’s simple, uncluttered, and good for guiding users to core areas without distraction.
Bottom Tab Navigation
A persistent navigation bar typically found at the bottom of the screen. Allows quick switching between primary sections (e.g., Home, Resources, Journal, Profile). It’s user-friendly and familiar to most mobile users.
Card Based Interfaces
The app uses card-based interfaces to organize content into visually distinct, easily scannable sections. Each card highlights a specific piece of information or feature. Visual cues such as shadows, borders, or icons help indicate which elements are clickable and interactive.
Base Design System
With the overall experience panned out this marks the beginning of our User Interface. By using a consistent set of fonts, colors, and widget styles, and by reusing components wherever possible, the design system promotes efficiency and a cohesive user experience. Here starts of the beginning of the Visuals for of the designed to align with the project’s goals.
Color
Color we chose to include was Pink and Purple integrity, respect and inclusion.
Light mode was a simple mono-chromatic color scheme what uses a light pink.
For dark mode the use black with purple
Typography
Iconography
UI Elements
Technology Stack
- Design: Figma – used for UI/UX design and prototyping.
- Documentation: Google Docs – for planning, notes, and collaborative writing.
- Frontend: React Native with Expo – for building cross-platform mobile applications efficiently.
- Backend: Node.js – handles server-side logic and supports real-time data synchronization.
- Database: MongoDB – stores data such as charities, online chat messages, and other app content.
Note: This technology stack represented the ideal setup for the project. However, due to my limited experience with mobile development at the time, I made the decision to outsource the implementation to an external development team. I remained involved in overseeing the process, ensuring the app aligned with the original design and functional goals.
Final Design


Interact with the project → Coming Soon
See the project in action → Coming Soon
Outcome
The overall outline of the application was completed, providing a solid structural framework. However, many key interactive elements and user engagement features were still missing. This included functionalities such as dynamic user inputs, real-time feedback, and seamless navigation flows that are essential for an intuitive and engaging user experience.
-
As the timeline was short I focused on prioritizing core features and documentation to ensure a clear handoff to the core design team.
-
After I accepted a job at Humber College, I was unable to continue actively working on the project. Fortunately, she was able to find someone else to complete the remaining features.
-
During my free time, I periodically checked in with the CEO and assisted her with side-quests such as the hiring process for app development and more.
Lessons Learned
This project taught me valuable lessons about mobile app design, development, collaboration with external teams, and the importance of clear documentation for seamless handoffs. While my direct involvement ended, I remain committed to supporting the project’s success through volunteering and periodic check-ins.