Hi, I am Hafsa Tariq Ali. For the #BuildforBusinessHackathon, I decided to create a landing page for 4-STEP-TPS.

The 4-STEP-Training Program for Social Media Addiction (4-STEP-TPS) Program was developed in 2024 as a research project under the supervision of Dr. Qasir Abbas at Government College University Faisalabad (GCUF). The Program was co-founded by Ayesha Tariq Ali and Sabahat Shahid, 2 MS Scholars at the Department of Applied Psychology for their MS Clinical Psychology research project. Based on an extensive research foundation, the 4-STEP-TPS is the first Program intervention to comprehensively address all the factors involved in the development as well as maintenance of social media addiction.

Project Overview:

As a participant of the 4-STEP TPS Program, I noticed that they didn’t have any online presence. Despite offering their services for several months, they only communicated with their participants using WhatsApp. Forming a plan, I pitched my front-end development skills and the team allowed me to feature their program as part of my hackathon project.

Initial Meetings and Team Collaboration:

The 4-STEP-TPS team and I had weekly meetings discussing the progress of the website and what changes needed to be done. Initially, they provided me with their logo and some content. They said they wanted a professional, academic website. A website so simple that all eligible age gaps internationally could easily navigate through. With this much information, it was up to me to bring their vision to life.

Content and Features:

The team provided the following key elements to include on the website: Background of the Training Program: A brief introduction to the 4-STEP-TPS program. Key Factors: Introduction of a few factors studied in the program, with a focus on "FoMO" (Fear of Missing Out), which is relatable to audiences of all ages. Initial Results: Visual graphics of their initial results to showcase the program's effectiveness. Clinical Trial: Information about their accepted clinical trial to add credibility.

Background and Content:

I asked them what they wanted me to include in the website, and they provided a few things: a little background of the training program, a few factors which they were studying (they asked me to display only a few because their program is very comprehensive and would introduce multiple factors). They asked me to introduce the factor “FoMO”, as it was extremely relatable to audiences of all ages. I asked them for their initial results as I was aware that this program has been active for a long time.

Visuals and Clinical Trials:

The team was very kind and cooperative to provide me with visual graphics of their initial results. I was also introduced to their clinical trial, which was accepted. So, we decided to add that as well for a layer of authority.

Sub-Pages:

Then came the chance to build the sub-pages of the website. For the “About” page, we introduced the researchers behind this research program and the structure of the training program.

The team then decided to introduce the idea of a FREE 15 minute call to determine whether an interested candidate is a fit for this program or not. Additionally, we created a “Get Started” button that links to their eligibility assessment and onboarding form.

During the last team meetings, the team requested that we add some social feedback into the main page. So I added a few reviews provided by their initial participants.

Finalization and Deployment:

The team felt that the color scheme was very calming. As they themselves are psychologists, they agreed to my typography styles. Once the website was created, we did a demo as a team. They said it was a user-friendly website with many initiative buttons. However, they requested me to change the background color of the sidebar sandwich menu to white, as it was transparent before. After that last final change, I deployed the website to a free hosting site.

This hackathon project allowed me to use my front-end development skills to create something for good. The final meeting with the 4-STEP-TPS team ensured that I was able to give life to their ideas and provided a valuable online presence for their research program.

I would like to thank Sam @unclebigbay143 and Shamz Bridge @shamzbridge for organizing this hackathon! It was a lovely experience seeking help and assistance from you!

#BuildforBusinessHackathon #CodeWithUnclebigbay

Relevant Links:

YouTube Demo: https://youtu.be/sScqdmgNcuk Live Website: https://4-step-tps.netlify.app Github Repo: https://github.com/hafsahtariqali/4-step-tps.git Hashnode Blog: https://hafsatariqali.hashnode.dev/build-for-business-hackathon-project-documentation-4-step-tps-landing-page

I would like to thank Sam @unclebigbay143 and Shamz Bridge @shamzbridge for organizing this hackathon! It was a lovely experience seeking help and assistance from you!