Web Development Portfolio

HappyMinds Website 2023

Happyminds is an online mental health and well-being platform. They're based in Nepal and aim to provide online counselling and therapy services to Nepali people in and outside of Nepal. Their services are based online, you can be at your comfort and speak with your counsellor or mental health provider. As they connect you with one of our best counsellors, they also ensure to handle your data with discretion.

Name of Project: HappyMinds.Health - Website 2023
Year: 2023
Workstation: Freelance
Positions Held: Creative Full Stack Developer
Tools Used: PHP, Laravel Framework, jQuery, Bootstrap, GSAP, etc.

Introducing Happy Minds

Happyminds is a mental well-being platform that promotes mental health awareness, provides a global platform to connect with mental health professionals, and offers partnerships for mental wellbeing. Their healthcare services are inclusive and accessible globally for everyone. They offer mental health services 7 days a week, with a diverse team of professionals specializing in over 65 mental health conditions.

Project Summary

In the quiet hum of our digital world, where ideas meet execution, the project of HappyMinds began with a phone call. The founder “Ms. Shreya Giri” reached out, seeking not just a website revamp, but a transformation.

It all started with a conversation, a meeting fueled by a vision for a revamped online presence. Ms. Shreya explained, with the limitations of their existing website built in WordPress, yearned for an aesthetically designed website that would not only be visually striking but also seamlessly align with the company’s identity.

The initial meeting was more than just a discussion; it was a collaborative brainstorming session. Ideas flowed freely, and with excitement. We delved into the core of HappyMinds – its mission, values, and the unique services it offered.
Welcome to the HappyMinds Project Portfolio – where pixels party, code tells tales, and the vibe is 100% HappyMinds.

Chapter 1: Scope of Work and Sitemap

The initiation of the actual work starts from defining a clear scope of work and a completely new sitemap for the website. The deliverables of the project was categorized into 3 phases.

Phase 1 – Website Development

Frontend Development for the website for Happy Minds

  • Creative Landing Page
  • About Navigation
    • Story Page
    • Team Page
    • Clients Page
  • Our Services
    • One to one counselling page with book an appointment option
    • Group sessions with enquire for an appointment option
    • Employee Assistant program with redirect to business page – request for proposal option
  • Media Navigation
    • Articles page
    • Blogs page
    • News and Events page
  • Contact Us page

 

Backend Development to make the site semi-dynamic

  • Counselling Management
  • Admin User Management
  • Team Management
  • Client Management
  • Service Management
  • Article Management
  • Blog Management
  • News Management
  • Communication Management

 

A Powerful CMS

A powerful CMS had to be developed to help manipulate the modules of the backend and replicate the changes on the frontend. CMS will be easy to use, with proper UI and very user-friendly.

Phase 2 – Quiz Application Integration

After completion of Phase 1, we would initially deploy the website on the live server chosen by Happy Minds. I personally recommend that they switch to Namecheap Shared Hosting (Stellar Plus).

On the 2nd Phase, the I'd be responsible to integrate quiz applications onto the website. It will be an assessment test for each of the services provided, to which the Admin user of the website CMS can easily add new questions and answers dynamically, whenever required, without being dependent on the developer.

Phase 3 - Dual Language (English + Nepali) Integration

After completely developing the website and integrating the quiz application and also ensuring that all the static content is now fixed and finalised, the entire website would be manually translated to Nepali by the team. Upon receiving the content in Nepali, I was responsible for integrating the content into the website with a language toggle button displayed on top of the navigation bar of the website.

Chapter 2: Elevate

After the brief conversation, listing down the scope of work and setting a sitemap for the website, I got to meet some great graphic designers/illustrators, who provided full support on creating amazing visuals to be used on the website. We started with pen and papers, then outlined the first design concept for the landing page of the website.

First Idea Outline - HappyMinds

This was the first visualization of the landing page, and here's where my role started.

Chapter 3 - Enter Technology

The website was planned to be fully animated with a top class parallax effect illustrating the company's motto of providing mental health well-being services around the world. The following technologies were used to pull that off -

Stack Technology/Framework
Frontend HTML5, CSS3, Bootstrap5+, GSAP3, jQuery
Backend PHP 8+, Laravel Framework 10+, Laravel Livewire 3+
Database MySQL, JSON
Content Delivery Network Cloudflare and Lite Speed Cache

The key to the awesome parallax effect was GSAP. GSAP is a powerful and widely used JavaScript animation library for creating high-performance, fluid, and interactive animations on the web. It provides a robust set of tools and features for animating HTML elements, SVG, and more. It is known for its ease of use, flexibility, and performance optimization.

The aforementioned techs were used to develop the entire website, with respect to the asset and content received from both the Designer Team and Happyminds Team. A wonderful team work resulted in efficient collaboration during the development of the website. It took a tentative of 3-4 months and we were able to finalize the website with what it is now.

Old Screenshot Demo

Old Homepage - Happy Minds      

 

   

New Website Screenshot Demo