HCI-Final-Project-Format (Final Edit)

BOOKEASY
A Project
Presented to the Faculty of the
Institute of Information Systems and Technology
Bachelor of Science in Information Technology
Marinduque State College
In Partial Fulfillment
of the requirements for the subject
INTRODUCTION TO HUMAN COMPUTER INTERACTION
By:
Charlene Joy Layao

Charedel De Mesa
ALDRIN R. REQUIZ
Instructor
December 9, 2021
Republic of the Philippines Courses Offered:
MARINDUQUE STATE COLLEGE Boac Campus:

BS Information Technology
BS Information Systems
COLLEGE OF ENGINEERING, INFORMATION AND INDUSTRIAL TECHNOLOGY (AACCUP Accredited Level 3)
INSTITUTE OF INFORMATION SYSTEMS AND TECHNOLOGY Santa Cruz Campus:

Panfilo M. Manguera Sr. Rd., Tanza, Boac, Marinduque (AACCUP Accredited Level 3)
IIST Tel. No.: (042) 704-0193 IIST E-mail Address: sics.msc@gmail.com
Website: www.mscmarinduque.edu.ph
TABLE OF CONTENTS
Page
Title Page ………………………………………. 1
Table of Contents ………………………………………. 2
Overview of the Project ………….…………………………… 3
Requirement Specification ……………………………………… 4
Use Case Diagram ……………………………………… 5
User Story of the Project ……………………………………… 6-9
Project Navigation Structure ..……….…………………………… 10
Screenshots of the User Interface ………….…………………………… 11
Course Outcomes Self-Assessment ………….…………………………… 12
Bookeasy 2


I. OVERVIEW OF THE PROJECT
Information and Communication Technology (ICT) is a vital part of everyone’s life in today’s time.
Around the world, the number of people who use technological innovation is rapidly increasing. They prefer
to use technology since its facilities and accelerates their work. They complete their tasks and other
activities simply by clicking, which saves time and effort.
Many Filipinos love to have fun and spend their time outdoor with their friends, family’s coworkers
and etc. specially to eat at their favorite restaurants, cafés, and go to beautiful places such as resorts or
hotels. Going out to their comfort zone and visiting their special place results to lessen the boredom,
stress and gives them comfort and relaxation. The traditional and manual process of booking have been
people way to book for their favorite spots or places but when the great pandemic comes, everything turns
out to be rigorous. This online booking may encounter possible problems like cancelation of booking,
delayed payments, reservations lost, and people may doubt if this website is legitimate or legal.
The above-mentioned problems may be avoided if the online booking website has a Ranking and
Feedback from other person and a message to contact the administrator and the owner or manager of the
chosen destination. This project aims to give people an easy way of booking into their current favorite
places in this time of pandemic.
Bookeasy 3


II. REQUIREMENT SPECIFICATION
 Functions of the Project

1. The system shall provide each individual an account to access the website.
2. The system after providing the account, it will display the home page with search bar
in the top, the menu tab or tab bar and different categories (either it’s a restaurants,
cafés, hotels or resorts)
3. After selecting categories or searching for your destination, the system will display
different pictures, names, contact information, and links of the destinations or places.
4. Then, when the chosen place has been chosen/clicked. The system will show the link
for requirements of that hotel or the booking form.
5. The system will verify the information you have published or inputted.
6. The system will display the payment method.
7. The system will allow the administrator to manage the information accessed by the
website.
8. The system will display the confirmation message.
 Features of the Project

1. The system shall be designed with a Language Translator
2. The system shall be designed with a Map Locator System
3. The system has Social Links for promotion services
4. The system has a Ranking and Feedback for ensuring the website’s authenticity.
Bookeasy 4


III. USE CASE OF THE PROJECT
Log-in/creates
Account
Admin
Search a
Destination
Fill up the Booking

Form and Pay
online
Bookeasy User
Rank and
Feedback of
Destination
Rank and
Feedback of
Website
Owner/ Manager
Contact and
Message the owner
or manager of the
Destination
Figure 1.0 Use Case Diagram of Booking Website
Bookeasy 5


IV. USER STORY OF THE PROJECT
1. Use Case Title: Log-in or create account

Description: The User creates or Login an account
Primary Actor: Bookeasy User
Goal: To Log-in or Sign-Up an account to access the website
Pre-Conditions: All necessary fields should be provided
Post-Conditions: Successfully Log-in and access the website
Table 1.0 Use Case Scenario of Logging in/Creating an Account

Actor System
1. Open Google 3. Different website related to what you search will
2. Browse the Bookeasy.com appear.
4. Click the website or the link of 5. The website will pop up the form for
Bookeasy.com logging/creating an account.
6. Click Log in or create an account 7. The website will display the confirmation
message.
2. Use Case Title: Search a Destination

Description: The User Searching a Destination
Goal: Find what they want and what they want to go to.
Pre-Conditions: You must have stable connections to search.
Post-Conditions: Successfully find the destination.
Table 2. 0 Use Case Scenario of searching a destination.

Actor System
1. Open Google 4. Displaying Home page
2. Browse the Bookeasy.com 7. Destination/Place list of the destinations related to
Bookeasy 6


3. Click the website or its link what you search will appear
5. Go to the Search Bar 9. Displaying the destination and its all about
6. Search your Destination information.
8. Click your Destination that you want.
3. Use Case Title: Fill Up the Booking Form and Pay online
Description: The User fill up the Booking Form
Goal: To successfully booked in and pay the expenses to the desired destination.
Pre-Conditions: All necessary fields should be provided and you should have a payment account.
Post-Conditions: Successfully submit your information/details or booked in and paid the expenses to the
desired destination.
Table 3.0 Use Case Scenario of filling up the booking form and online paying.
Actor System
1. Open Google 4. Displaying the Home page
2. Browse the Bookeasy.com 7. Destination/Place list of the destinations related to
3. Click the website or its link. what you search will appear
5. Go to the Search Bar 9. Displaying the destination and it’s all about
6. Search your Destination information.
8. Click your Destination that you want 12. Displaying the booking form.
10. Scroll down 15. Displaying “Generating your response”
11. Click the link for booking in 17. Displaying payment method
13. Fill Up the form and supply needed 20. The website will display the confirmation
information message.
14. Click “Book”
16. Click “Ok”
18. Choose your payment method
19. Click “Pay”
Bookeasy 7


4. Use Case Title: Rank and Feedbacks of Destination

Description: The User will rank and write feedback about the destination
Goal: To give rank and Feedbacks about the visited destinations.
Pre-Conditions: You need to first get to and experience the destination you want before you can rate and
give feedback.
Post-Conditions: Successfully Rank and give feedback to the destination.
Table 4.0 Use Case Scenario of ranking and writing feedback to the destination.
Actor System
1. Open Google 5. Displaying your account/profile
2. Browse the Bookeasy.com 7. Displaying the Website Feedbacks and Reviews
3. Click the website or its link and the Destinations Feedbacks and reviews.
4. Click your account/profile icon 9. Displaying different Ranking and Feedbacks of
6. Click “Ranking and Feedbacks” your chosen destination for other visitors of the
8. Click the “Destinations Ranking and destinations and the opinion box.
Feedback “ 12. Displaying the Ranking
10. Click the opinion box and input your 15. The confirmation message will pop up
opinion. 16.. “Thank you!” statement will appear.
11. Click “Ok”
13. Give a rank/rate
14. Click “Post “
5. Use Case Title: Rank and Feedbacks of Website

Description: The User will give a rank/rate and write feedback about the website
Goal: To find out if the website is real, it is good or approved by others, especially first timers who use it
Pre-Conditions: You need to first get to and experience the website before you can rate and give
feedback.
Post-Conditions: Successfully Rank and Write feedback to the website and the destination.
Bookeasy 8


Table 5.0 Use Case Scenario of ranking and writing feedback to the website.
Actor System
2. Browse the Bookeasy.com 7. Displaying the Website Ranking and Feedbacks
3. Click the website or its link and the Destinations Ranking and Feedbacks.
4. Click your account/profile icon 9. Displaying different ranking and Feedbacks for
6. Click “Ranking and Feedbacks” other users of Bookeasy and the opinion box.
8. Click the “Website Ranking and 13. The system will display the confirmation
Feedback “ message.
10. Click the opinion box and type your
experience using the website.
11. Give a rank/rate
12. Click “Post”
6. Use Case Title: Contact/Message the owner or manager of the place/destination.

Description: To contact the owner/manager for other concerns about the destination.
Goal: To successfully communicate with the owner/manager of the place/destination.
Pre-Conditions: You must know first the contact number or information of the owner/manager and all
necessary fields should be provided.
Post-Conditions: Successfully sent your concerns or contact the owner/manager.
Table 6.0 Use Case Scenario of contacting/messaging the owner/manager of the destinations.
Actor System
2. Browse the Bookeasy.com 8. Displaying messages format
3. Click the website or its link. 11. The system will display the confirmation
4. Click your account/profile icon message.
6. Click “Messages”
Bookeasy 9


7. Click “create message”

9. Supply needed Information
10. Click “sent”
V. PROJECT NAVIGATION STRUCTURE
BOOKEASY
Home Cafe’ Hotel and Restaurant Resorts
Your Account For You For You For You
Top Cafe’ Top Hotel & Top Resorts

For You Restaurants
Popular Destination Premium Premium Premium
Trending Now Affordable Expensive Expensive
About us On-deals On-deals
Figure 2.0 Navigation Structure of Bookeasy Website
Bookeasy 10


VI. SCREEN SHOTS OF THE USER INTERFACE
Figure 3.0 Home View of Bookeasy Website
[Don’t forget to put a discussion for every figure]

This figure shows the main form of the system where the user can see the login button and the
voting status. The voter will only need to click the User Login if they want to log in. The voting status is
also shown to determine how many voters have voted or participated in the election from different
schools.
Bookeasy 11


VII. COURSE OUTCOMES SELF-ASSESSMENT

As a student in this course, please rate your level of attainment on each Course Intended Learning
Outcome (CILO) by writing your rating/score on the corresponding column.
Rating/Score: (5 – very satisfied; 4 – satisfied; 3 – neutral; 2 – dissatisfied; 1 – very dissatisfied)
CILO Course Outcomes Student 1 Student 2

State and understand the MSC VMGO, IIST Goals and 4 4
CILO1
Quality Policy
Describe the basic concepts and interaction between the 5 5
CILO2 Human and the Computer to design more convenient
features in using software in a real word setting.
Conduct an evaluation on the usability of an existing mobile 4 5
CILO3
application and web-based system.
Create and use appropriate Interactive Design Models (Use 5 4
Case Diagram and Navigation Structure) that shows the
CILO4
navigational interaction of users to a mobile application or
web-based system.
CILO5 Identify good software design to bad software design 5 5
Create a prototype of a proposed software using a 4 4
CILO6 Traditional (Hand-sketched) or Digital Prototyping Tool
(Mockplus).
Create a prototype following the underlying rules and 4 4
CILO7
principles of a good User Interface and User Experience.
AVERAGE
REMARKS
Student Name Signature
1. Charlene Joy L. Layao _______________________
2. Charedel O. De Mesa _______________________
Bookeasy 12

HCI-Final-Project-Format (Final Edit)

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HCI-Final-Project-Format (Final Edit)

Uploaded by

Copyright:

Available Formats

BOOKEASY

Charlene Joy Layao

MARINDUQUE STATE COLLEGE Boac Campus:

INSTITUTE OF INFORMATION SYSTEMS AND TECHNOLOGY Santa Cruz Campus:

Title Page ………………………………………. 1

Table of Contents ………………………………………. 2

Overview of the Project ………….…………………………… 3

Requirement Specification ……………………………………… 4

Use Case Diagram ……………………………………… 5

User Story of the Project ……………………………………… 6-9

Project Navigation Structure ..……….…………………………… 10

Screenshots of the User Interface ………….…………………………… 11

Course Outcomes Self-Assessment ………….…………………………… 12

MARINDUQUE STATE COLLEGE Boac Campus:

INSTITUTE OF INFORMATION SYSTEMS AND TECHNOLOGY Santa Cruz Campus:

I. OVERVIEW OF THE PROJECT

MARINDUQUE STATE COLLEGE Boac Campus:

INSTITUTE OF INFORMATION SYSTEMS AND TECHNOLOGY Santa Cruz Campus:

II. REQUIREMENT SPECIFICATION

 Functions of the Project

 Features of the Project

MARINDUQUE STATE COLLEGE Boac Campus:

INSTITUTE OF INFORMATION SYSTEMS AND TECHNOLOGY Santa Cruz Campus:

III. USE CASE OF THE PROJECT

Fill up the Booking

Figure 1.0 Use Case Diagram of Booking Website

MARINDUQUE STATE COLLEGE Boac Campus:

INSTITUTE OF INFORMATION SYSTEMS AND TECHNOLOGY Santa Cruz Campus:

IV. USER STORY OF THE PROJECT

1. Use Case Title: Log-in or create account

Table 1.0 Use Case Scenario of Logging in/Creating an Account

2. Use Case Title: Search a Destination

Table 2. 0 Use Case Scenario of searching a destination.

MARINDUQUE STATE COLLEGE Boac Campus:

INSTITUTE OF INFORMATION SYSTEMS AND TECHNOLOGY Santa Cruz Campus:

MARINDUQUE STATE COLLEGE Boac Campus:

INSTITUTE OF INFORMATION SYSTEMS AND TECHNOLOGY Santa Cruz Campus:

4. Use Case Title: Rank and Feedbacks of Destination

5. Use Case Title: Rank and Feedbacks of Website

MARINDUQUE STATE COLLEGE Boac Campus:

INSTITUTE OF INFORMATION SYSTEMS AND TECHNOLOGY Santa Cruz Campus:

6. Use Case Title: Contact/Message the owner or manager of the place/destination.

MARINDUQUE STATE COLLEGE Boac Campus:

INSTITUTE OF INFORMATION SYSTEMS AND TECHNOLOGY Santa Cruz Campus:

7. Click “create message”

V. PROJECT NAVIGATION STRUCTURE

Home Cafe’ Hotel and Restaurant Resorts

Your Account For You For You For You

Top Cafe’ Top Hotel & Top Resorts

Popular Destination Premium Premium Premium

Trending Now Affordable Expensive Expensive

About us On-deals On-deals

Figure 2.0 Navigation Structure of Bookeasy Website

MARINDUQUE STATE COLLEGE Boac Campus:

INSTITUTE OF INFORMATION SYSTEMS AND TECHNOLOGY Santa Cruz Campus:

VI. SCREEN SHOTS OF THE USER INTERFACE

Figure 3.0 Home View of Bookeasy Website

[Don’t forget to put a discussion for every figure]

MARINDUQUE STATE COLLEGE Boac Campus:

INSTITUTE OF INFORMATION SYSTEMS AND TECHNOLOGY Santa Cruz Campus:

VII. COURSE OUTCOMES SELF-ASSESSMENT

Rating/Score: (5 – very satisfied; 4 – satisfied; 3 – neutral; 2 – dissatisfied; 1 – very dissatisfied)