HCI PROJECT

TEAM 15
SHIVEN SINGHAL
TRISHIT GUPTA
NISHANT MISHRA
FACULTY: Kamalakannan J
B2+TB2

TOPIC: VISTA PORTAL: A FREELANCING PORTAL WITH FACE LOGIN

REVIEW 1

1. Title and Description of the Project

Vista Portal:
The project aims at providing jobs and work to all the people who lost
their job and their means of earning money due the COVID-19 pandemic
and have a financial crisis in their household. This web interface will
connect these people(freelancers) with those who want to get their
work done and they will be paid if the work is accomplished.
People can post their jobs, the requirements, money they will give,
description of the work. Freelancers can choose the work according to
their skills. It will have two portals one for Login of freelancer and other
for the Contractor.
Our project also has a Real time Chat App for a better communication
between the freelancer and the Contractor. There is also Facial
Recognition Login to free people from the hassle of remembering Login
ids and Password.
This web interface will surely connect the needy people and they will be
able to earn some money during the COVID19 Pandemic which has been
setback for many people across the country.
 Limitations of the current HCI design

 In the current design (like some freelancing sites: Fiverr,

Freelancer) there is a Poor UI design and the design is quite
complicated for a first timer.
 The application works on limited devices and few web browsers
 People often tend to forget the login id and password and then
make a new account.
 There is no option in the site for the communication between the
contractor and the freelancer to explain the requirements the
specific needs, resulting in miscommunication between the two
 There is no Web-Page for seeing the added jobs on the freelancer
side they need to search the App to find them.
 Having less functional requirements and features.
 There is no payment verification in the exisiting Web Application.

Objective and Motivation behind the Project
The main idea behind the HCI project is to provide work and jobs to all
the people who lost jobs in the COVID-19 pandemic and facing financial
problems. As COVID-19 has given birth to a lot of uncertainity and
unnecessary pressure
So by making this portal:
 We can ease the process of connecting the contractors with the
needy people
 Contribute to improve the economy of the country.
 Provide a platform with work-payment flow.
 Increasing Job oppurtunities during the tough times.

USER ANALYSIS AND TARGET AUDIENCE:

Target audience
The types of users for a freelance portal:-
People looking to hire
People looking to work for clients
People who have lost jobs in COVID
The reason why many people choose to freelance is :-
• Job flexibility-time location etc
• Helps in skill growth
• Could be helpful in earning part time money
• Choose their own projects
• As we know due to the covid19 outbreak many ppl have lost their jobs
hence this portal provides a job security to them.
From a perspective of a client the reasons why they hire freelancers are:-
• Access to specialized talent
• Cost savings compared to hiring full time employees
• Faster deliverables
• Large talent pool to choose from

USER ANALYSIS
Age/Generation-people of all ages can use if they have the required skills
Language-90% of users prefer English
Users are Computer Literate.
Platform Type- Desktop
Interface Type-Menu Driven

SUGGESTIONS AND ADDITIONS IN OUR PRODUCT:

1)-User Interface must be simple and purposeful.

2)-The application must work on all devices and web browsers
3)-Easy and Secure login via Facial recognition using OpenCV
4)-Real-time app chat to improve communication between contactor and the
workers/freelancers, chat app made using socket.io
5)-Separate Option to see all the pending projects for the users
6)-Easy and Secure payment through QR code, Hassle free payment and
transfer money in one tap

TOOLS AND TECHNOLOGY USED:

• DESIGNING LAYOUTS – CANVA
• FOR WIREFRAMING – FIGMA
• FOR FACIAL RECOGINITION LOGIN SYSTEM WE HAVE
CONSIDERED USING DEEP LEARNING MODEL ALONG WITH
REACT JS FOR FRONT END
• FRONT END- REACT JS
• BACKEND( SERVER SIDE)- PYTHON FLASK
• FOR QR CODE SCANNER WE NEED 3 LIBRARIES FROM PYTHON-
OPENCV,NUMPY,PZBAR,
• We are using this library in our project for processing each
frame from a video captured by a device
• These steps include creating a Flask server that contains our
deep learning model and creating a ReactJS app for login.
ReactJS application could communicate with our deep learning
model with the help of the Flask server.
Facial recognition is concerned with identifying who is the person in
the image by detecting the face while facial verification determines if
the given two images are of the same person or not. Here, to build
our login system we will require a model that can detect faces from
the images and convert the facial details into a 128-dimensional
vector which we can use later for facial recognition or verification
purposes.
CHAT APPLICATION TECH:
• Serve the HTML, CSS and JavaScript client files to the users
• Start the Socket.io connection
• Receive events from clients (like a new chat message) and
broadcast them to other clients
Chat client responsibilities
• Load socket.io client library from a CDN
• Establish connection with the Socket.io running in our server
• Ask the user to enter his name so we can identify him in the
chat
• Emit and receive events to/from Socket.io running in our server
 • Add our own messages to the chat via JavaScript

DESIGN LAYOUTS

HOME PAGE:

SIGN UP PAGE OF FREELANCER AND CONTRACTOR:

LOGIN PAGE:
FACE LOGIN:
FREELANCER HOMEPAGE:

VIEW WORK PROFILE PAGE:

CONTRACTOR HOME PAGE:

POST WORK PAGE (CONTRACTOR):

FREELANCER PROFILE:

CONTRACTOR PROFILE:
EDIT PROFILE:

WORK DETAILS OF CONTRACTOR:

CHAT APPLICATION TO COMMUNICATE BETWEEN THE TWO:

CONTRACTOR CONTACTING FREELANCER:

DESGINED USING CANVA

REVIEW 2
TASK ANALYSIS:

CONTRACTOR:
Task Analysis of Contractor :
1. Signup/Login
1.1 Fill the Login Details
1.1.1 Fill the Name,Email,Password
1.2 Setup/Verify the Face Login
1.2.1 Show the Face in the Web Camera and Enter the Auth Code
2. Create/ Add Project
2.1 Go to the Profile Page
2.1.1 Click On Add work
2.2 Fill in the Required Details of the Project
2.2.1 Job Description
2.2.2 Select the Category and Attach Files of the Required Files
3. Manage Freelancers
3.1 Contact FreeLancer
3.1.1 Post a Message OR Ping Them
3.1.2 Call the freelancer on the provided No.
3.2 View the profile who has taken up the work
3.2.1 Click on the details on the taken project and other info such price, estimated
delivery time etc.
3.3 Chat with Freelancer
4. Payment
4.1 Scan the QR Code
4.2 Verify the Bank Details with the freelancer before proceeding ahead
4.3 Click on Confirm and Payment is successful
4.4 After Payment , Give Ratings to the work of the freelancer.

FREELANCER:
Task Analysis of Freelancer

1. Signup/Login
1.1 Fill the Login Details
1.1.1 Fill the email, password etc.
1.2 Setup/Verify Face Login
1.2.1 Show the Face to the Web Camera and the Auth Code
2. View Projects
2.1 Select the Required Skill
2.1.1 Go to the Profile and Select Skills
2.2 Set the Max/Min Money for the given work
2.3 View Project Details
2.3.1 View Job Description
2.3.2 Can contact and have a chat with the freelancer
3. Manage Projects
3.1 Go the contractor profile
3.2 Give updates regarding the development of the project
4. Receive Payment
4.1 Go to the Profile
4.2 Confirm the Bank details with the contractor
4.3 Share the QR CODE
4.4 Receive and confirm the Payment
5. Give Rating
5.1 Go the contractor’s Profile
5.2 Add the Ratings for the behaviour of the contractor
WIREFRAMING OF:
CONTRACTOR:
FREELANCER:
INPUT/OUTPUT DEVICES:
 Subtask Interface Choice Justification Alternative
1. Login to the Face Login via the Easiest Method Using Touch Menu
Portal camera
2. Navigation Speech Commands Helps all people with or Normal haptic interface
through the without disabilities
portal

3. Search for Touch Menu More reliable than Through voice

freelancer/ other methods commands
contractor

4. Send a message Dictate the document Enables people with or Normal haptic typing,
to contractor/ content using voice without disabilities to manually
Freelancer commands send messages

5. Scanning a QR Recognize the QR code Quick and easy method Via manual phone
code for via camera number typing
payment

6. Talk to Auditory Interface Better form of Through normal typing

freelancer/ communication
Contactor

POSTER:-