ST. CECILIA’S COLLEGE – CEBU INC.

A De La Salle Supervised School

Poblacion Ward II, Minglanilla, Cebu

“ELF” A Website on Making Personal Friendship

With Your Classmates or Batch Mates

During Online Class

Submitted to: Ma’am. Che Lisondra Submitted by: The Cognitive Duo
List of the member:
Darren D. Reales
Ian L. Tarega

Submitted Date: 7/13/2022

I. Abstract
 Some of the students nowadays have really gone with being alone, especially
in today's situations. It really affects their behavior in times of talking to their
classmates during online classes. There are some kinds of students who
have a different outlook. Despite the fact of being shy, it is considered a
problem that we are going to work out. Hence, right now, at online classes or
virtual classes, several of the students have only known or close to their
classmates. Some of the students don't have close classmates, which may
cause them to end up being alone. The researcher comes up with making a
website for the students, thus, this will make their lives more reliable during
online classes. Before proceeding, we create a simulation or a prototype and
show to the students in order to observe their reaction. As a result, the
student’s reactions are very outstanding as they found themselves more
interested in our prototype. By using the website, they could meet with any
student or the so called "user". The name of the website is called "ELF" A
Website on Making Personal Friendship With Your Classmates or Batch
Mates During Online Class. "ELF" means Everlasting Friends. The purpose of
the study is to create a friendship and a bond with the users. By using the
website, the user could create a bond with their classmates or schoolmates.
This website has a good effect that boosts the students' physical, social, and
mental health. We are all aware that because we do not know our classmates
or batch mates personally, it is difficult for us to interact with them during
online classes. As a result, we're lonely in class, and students are afraid to
even ask simple questions to their classmates because they don't know who
they are. We can guarantee that the users or students will have a pleasant
online class with ELF because this app not only entertains oneself with its
features but also helps create friends and connect with them by creating
bonds online, which is what all students need during online classes.

II. Introduction
Our website is called “ELF”. ELF is short for Everlasting Friends a website
that is built to create a bond between students at each of their respective
levels or even their seniors in school. This is mostly made for students who
are currently enrolled in online classes. The users will put an alias name and
each user will automatically have a friend and that is all their classmates, if
they want to expand it they can make it happen by simply searching their
name into the home page section and then adding them. It is up to the person
if they want to introduce themselves, like telling their real name in chatting
with them. Since every users were anonymous they will have the courage to
interact with other people or to their classmates until they will end up having a
bond and be friends with each other. You can also form a group chat here but
on our website, we call it “Squad Chat” we call it that so that you will feel like
you are at school with your new friends you created and bonded with. All
things such as inappropriate words and anything that could hurt a person or
make some negativity comments or chats will be censored. This is to protect
all the users, and there will be no sending of a picture in private messages, it
can only happen in the Squad Chat and still, all the inappropriate pictures and
any negative will be censored or will not be sent. The users who will send
such pictures or will keep on saying inappropriate words will be given a
warning three times and after that, they will be banned for weeks. This also
gave an entertaining page like posting pictures such as educational, funny
meme that is appropriate to the viewers, and news about the school and
news about the world and our country. We also have Movie section, to watch
educational and inspirational movies only and some sci-fi movies that are
suitable and appropriate for everyone and the school, a user cannot watch it
alone it must be with a friends so that they could create a bond. The school
will mostly decide what movie will be put on. As for during watching movies
you can watch and still see your friends faces as if you guys were there
physically, because there is a button were you can either want to see the
faces of your friends display on the lower right of the movie or at the right
most if the movie was on full screen mode, during watching movies or not it’s
really up to the users if they want to see their friends faces. We choose to
plan and make this kind of website because most students during online class
were mostly alone and had no classmates or at least batch mates that can be
considered a friend. As a result, they aren’t just lonely, but no one will help
them get through to all the burdens they were facing today and in the future.
Which could lead to depression or mental health issues. We want to fix it with
this website of ours, hoping this could help them create friends and make a
bond and have a relationship friend-wise to each other.
Problem Scenarios

The problem scenarios of the study is that, some of the students are not close
enough to their classmates or even to create friendships with them. The
students also feel shy at times of asking their classmates about particular
problems of the subject. The student will end up being alone or not really
satisfied with their classmate because they seem like they are out of place.
Furthermore, some of the problem scenarios where the students will no
longer have interaction with one another. In Online classes, there are some
problems especially to the new students, it is really hard for them to open up
or engage with others because there are scenarios that when there are days
that you were absent then the teacher are giving some activities or
assignments, on that case the new student will be missed the activities has
given. The student may also affect their mental health as well as their
physical health as a result of being lonely and having no other to talk to during
online classes.
Statement of the Problem
This project aims to help all the students to create a relationship and bond
with each other, friend-wise. To have a good experience of online learning.
Less loneliness to some students especially the new students. Specifically,
this seeks answers to the following questions.

1.) What is the description of every student in terms of behavior, personal

beliefs, sexual orientation or gender?

2.) What does a student do when they are trying to make new friends and the
hindrance to doing such a thing during online classes?

3.) Is there any significant difference in the way students make new friends in
terms of behavior, personal beliefs, sexual orientation or gender?

4.) What project should be done to help all students create such friendly
relationships during these online classes?
Design

Design Survey:

Facebook - Based on the information from what I've gathered on this app
or website system, some of the users may encounter any kind of issue
that would make them unsatisfied. The users were very frustrated when
trying to use the system. As a result, some users used the browser to log
in to Facebook. They encountered some lagging and sometimes it says
"sorry, something went wrong". There were also some outages where
users encountered some delays when their connections and computers
were stable and posting videos or photos wouldn't be uploading.
Moreover, some of the users can't access their business page, view
recent images, etc. Facebook only have the censored on pictures and
videos but not on words especially to the inappropriate ones. 

Twitter – This system was related to our topic since it is based on

connecting to the other users. According to our research, I found several
issues with the app. Hence, the users sometimes found out that it keeps
redirecting them to the error page to log out or refresh. Sometimes they
cannot even repost or forward a post or people called them “retweet”.
Users also encounter problems that same with Facebook. When they
try to access any other page it says “Something went wrong, Please retry”.
As a result of finding some comments from the users, they found
themselves discontented with using the website.
Messenger – This system was also related to our topic because the
purpose of this app is to connect to other users. The users also
experience some issues with this app. Based on the information that we
collect from the websites or comments from the users that Messenger has
also problems with the systems. Facebook Messenger is available on a
variety of devices. It also has a dedicated web app that lets you access
your messages from any browser. Unfortunately, when using Google
Chrome to access the platform, consumers have had problems. According
to reports, Facebook Messenger calls on Chrome are not working
properly. Some customers said their camera or microphone was broken,
while others couldn't even initiate a video conversation. In most cases, this
issue is caused by incorrect configurations and a lack of system
permissions. It could, however, be the result of defective servers,
damaged browsing data, or a slow internet connection. Same with
Facebook, Messenger only have censored to videos and pictures only but
not for those inappropriate words.
 Low Fidelity Prototype

Figure 1 The Log – in page of the website

Figure 1.1 The Home page of the website

Figure 1.2 The chat page of the website

High Fidelity Prototype screenshot
Figure 2 Log – in page of the website

Figure 2.1 Home page of the website

Figure 2.2 Chat page of the website

DESIGN

As a result of the High-fidelity prototype, you can see that there are some differences
between the Low fidelity prototypes. There are only 3 images input which are the
Landing page, Home-page, and the Chat page of the website. The app that the
researchers used to create this High-fidelity prototype is Figma. The first picture is the
Landing page. As you can see, it is where users log in or sign in to an account. The next
picture is the Home-page. Some users know about this picture in which they can see
any post from the other users. The last picture is the Chat page. As demonstrated, this
picture identifies where users can see other users who are active and this is where both
users having a conversation.
 Figure 3 Form Design

As you can see in the log – in page the user can clearly see the letters and we used
words instead of icon for back and about us so that the user can clearly read and know
the purpose of those two were. We make the “LOG – IN” button wider so that the user
can easily click it even though the user was multi-tasking. Same goes with the log – in
input box we make it bigger and wider so that the user can read it clearly and will have a
little less time on mistakes especially with checking with the spelling of the user’s
username. We make it simple so that it the users will not think too much to every button
or letter that were present in that page. Now after you click the “LOG – IN” button it then
brings you to the next page which is the home of our website. Kind of like Facebook,
after you log – in it then brings you to their homepage. Same goes to our website it will
bring you also to our homepage and this is what is looks like.

Figure 3.1 Result Design

Here you can see the homepage of our website. We put icons with letter so that the
users will not really be confused to what is it and as for the profile, instead of making it
an icon we put their the user’s profile picture he or she uses so that it would easily be
understand and easy to find. We put also the logo of ELF in their next to it is our search
bar, its purpose is, when the users want to add friends the users can search for their
names in there and then they can just press the name of the person they desire to see
or add. After pressing the desire person the user can either add or just read the
description of the other users and then go back to home and completely ignore it. The
users whom the other users add have a right to either accept or deny the users. You
can also see in our homepage the list of your online friends and squads and also all the
post of your friends and also the announcement the admin make.

Implementation

The researchers implement a method for students to form friendships by using our
website to interact with their classmates or batchmates during online classes. By using
the website, you will see how the website would help students interact with other
students. The website had many different entertainments. In fact, this is a process
where we can see how long you get along with your classmates or batchmates. Indeed,
this is where it starts to get to know each other.

With this study, we did this because, as we can see, in the situation that we have right
now, some of the students don’t have any classmates to come with them because
perhaps the students are transferees. As a result, the student would end up being
alone. Online classes affect the mental health of students, parents, and even teachers.
They can worsen existing mental health problems in people who already have them.
Imagine what it is like for a student to spend hours in front of Zoom every day without
social interaction and playtime with their friends. Parents are now acting like teachers
and are more involved in their children’s schoolwork. Teachers and professors have
increased workloads and are pressured to deliver quality learning without face-to-face
classes. The researcher also felt the same way, so we conducted this study for us
students in order to have a nice experience in the class.
The developer of the study provides gamification in which the students can get along by
playing games or watching movies. In movies, we only put a motivational movie for the
student. Boosting engagement in this way is really useful in online learning where
participants might not have the natural rapport of being in a physical classroom
together. Use this website in times when you’ve felt the same way. This problem we
have right now will never last long because this website can possibly improve your
health and change your life. Be part of ELF, your gateway to success.

Evaluation with Figma simulator or other simulator application

The simulator application that we use is called “Figma”. Figma is easy to use and less
complicated than all the other simulator application we have used and it is less
annoying like we don’t really need to create a new file for the next page like any other
apps, in Figma we can just stay in one file and do it there all we have to do is to connect
it with whatever page we want. Some tools that aren’t in other apps are present in
Figma which is a really big help for me and my partner when we were making the
prototype like the “column” I don’t know if there is column tools to other apps but Figma
has it, and its very useful for aligning things there is also auto align which makes the
works less hassle. Though Figma is great and easy to use there is some issues of
Figma that I have to deal with while using it. Figma has less widgets which makes it
very limitable to what it can do, like there is no text box where you can input some
information like username, passwords and etc. when we want to input some
information. It is just a plain box that cannot be inputted. If we want to add new widgets
such us icons we still have to download it. With all those minor problems overall Figma
is great and if I were able to rate it out of 5 then I would have given it a 4 out of 5.

Surveying

Our target users for our website are students of a certain school so we asked 20
of our fellow classmates to try our prototype. We choose them because so far they are
the perfect subject and most close to ask for help with our prototype. So far they like our
prototype and some ask for some things to change, some were a little change, some
were big change. Majority of the respondents wants a little change of the design, when I
ask what color they prefer as a background and they all respond that they want a darker
background. As for the questions about the goal of the website, so far what we got were
much more positive responds, they say that they like the idea because it can easily
make friends with a classmates since they are already friends and the name were
anonymous which gives confidence to most introvert people. Through it they can know
each other from the scratch like from real name to strong friendships bonds. They were
most thrilled by what kind of bonds that they can do on our website, and after they saw
that they can bond each other through educational games and watching educational
movies, it makes most our respondents happy and give us a positive response about
our website.

Result

After taking the survey and collecting data out of it, we first study all the majority’s
wants. After reading the data, we then first talk to each other about making some few
changes. Then we soon start with the changes, the very first change such as removing
unnecessary button or links, then we added more design to it, to make it even more
inviting. The following things we change were the backgrounds, we change it because it
is one of the most suggested, and so we change it to darker background, the one would
it fit the rest of the designs. The most change that was done was in the chat page
because before we planned it more brighter but since the majority wants darker and the
minority want it a bit brighter, we then came up with the perfect solution of the problem,
we ended up adding a new feature and that is the “Theme or Color”, its purpose is to
give the users their own rights to pick which background theme or color they like, that
way both the majority and minority will be glad with the changes we did. Then some
respondents wanted to see things such as adding a friends, we didn’t have that kind of
page the moment we let our prototype be tested, and so we ended up putting a add
friend page, where the users search the name of their desire user and then open its
profile then add them. This were the result after taking the survey, it was a real fun
experience for the both of us doing it, since it’s given us even more creative idea and
make it into even less flawed prototype.

Reflection

Doing this certain kind of projects comes with a lot of challenges, especially
during this pandemic where we barely know our classmates in our class. One things for
sure though, through this we both are friends with each other now, for being a partner in
this project, which we are thankful. It is not only make us learn something personal but
also lots of things educational wise, such as data mining, GUI, and for us one of the
importance is making this prototype, this really helps a lot especially for the both of us
since we wanted to design some website and through this project we were able to do it.
Even though it is not HTML or something, it is still close into making a website which
gives us a lot of fun on making on it. Sure it has its challenges but with it we learn to
persevere and not look at those challenges as a hindrance but rather a lesson to learn,
even though some challenges really did hurt us. Through it we both became more a
better person when it comes to doing this kind of project and realize the importance of
teamwork which lead us to rely on one another which gives us both benefits in order to
work with this project more efficiently.

Acknowledgement

We would like to thank you ma’am Lisondra for giving us the idea on what would
be our study through giving example of its own. We also would like to thank you to all
social media such as Facebook, Twitter, and Instagram to really help us shape our
project and make it more form. Then lastly we would like to give both of our friends a
thank you for completing the idea of our project. Our friends were the reason on how we
built those kinds of features that was display on our prototype. We also would like to
thank you for our respondents for giving us a hand on making our project even better.
We both would like to express our gratitude to all people that help us and inspired us to
build this project, we couldn’t have done it without them.
Conclusion

ELF is a website that can make you connect to your classmates during this online
classes, we all know that during online class it’s been difficult for us students to interact
with our classmates or batch mates since we don’t really know them personally. As a
result we are lonely during classes and students is shy to even ask something little to
their classmates because they don’t know each other. With ELF we can guarantee the
users or the students to have a pleasant online class because this app doesn’t only to
amuse oneself by its feature but also help create friends and connect with them by
creating bonds online which what all students during this online classes needed.
Through it they will not feel lonely and have a confidence to make friends and someone
they can share story from or even help them with their school works. With all of this
things ELF can do, I am certain that it will remain to every users mind, for it is a website
that is very easy to use, like you really don’t need the instruction to read for you to know
what that certain thing is, which is a huge benefits to a students who isn’t active on
social media. It has all its basic necessities on a social media world and things a user
need in order to connect with their friends such as, conversation with a friends through
chat or calls, to bond with them through playing games and watching movies just like
most of the friends do when they want to spend time with each other. With all of it we’re
certain that the users will like it and will remain to their mind.