MSU IIT KASAMA Electronic Voting System

Published on February 2017 | Categories: Documents | Downloads: 115 | Comments: 0 | Views: 569
of 121
Download PDF   Embed   Report

Comments

Content

MSU-IIT KASAMA Electronic Voting System: Redesigning Through a User-Centered Approach

An Undergraduate Thesis
Presented to
the Faculty of the Information Technology Department
Mindanao State University - Iligan Institute of Technology

In Partial Fulfillment
of the Requirements for the Degree of
Bachelor of Science in Information Technology

By

Castillo, Jansen P.
Celdran, Raoul Kristoffer D.
General, Nathaniel A.

Romelyn I. Ungab
Faculty Adviser

October 2014

ABSTRACT
Every year, the Mindanao State University – Iligan Institute of Technlogy (MSU -IIT)
conducts elections for the officers of the Kataas-Taasang Sanggunian ng mga Mag-aaral
(KASAMA) and College Executive Councils (CECs). The election of these students is important
for they represent the whole student body of the institute and are responsible for organizing,
coordinating, and directing student affairs in the institute. A number of systems have been
developed for automating the manual process of elections, with the most recent one tested during
the 2013 KASAMA elections at the School of Computer Studies (SCS).
The goal of this study is to redesign the recent KASAMA Electronic Voting System by
addressing problems encountered by previous systems which led to their unsuccessful
deployment. Through a user-centered approach, the researchers aim to develop a system that is
responsive, simple, and easy to use while providing the necessary capabilities for a successful
deployment.
A user testing of 44 participants was conducted to evaluate the system and provide
feedbacks that helped the researchers improve the system. After the testing and updating of the
system based on the participants feedback, information gathered by the researchers provided
signs of positive improvement on the latter.

i

ACKNOWLEDGEMENT
We, the proponents of this project, are very thankful...
To God the most high and our infinite provider, the one who we believe in. We thank
You for giving usthe strength to finish our study and meet our deadlines, for without You we
would not have been able to.
To our energetic, kind and supportive adviser Prof. Romelyn I. Ungab, for always
believing that we can do better and for serving as an inspiration for us to get the best results for
our study.
To our panelists, Prof. Aloha Cristopher H. Ambe and Sir Erik Louwe R. Sala, this study
would have been anything less without your corrections and suggestions, we thank you for your
guidance.
To our friend Demby Abella, for your help on SQL and normalizations. Our project
would have been incomplete without the principles for backend programming that you imparted
on us.
To our close friends and loved ones, Liz, Irene, and Ica, we are grateful and thankful for
your support, you were always our "source of constant strength and inspiration".
To our batch mates, it is sad to think about the separation and the memories that we had
for years. Our paths may change, but the connections and bonds will always be there, no matter
the distance.
Last but not the least, to our parents, brothers and sisters, and the people we love and
those who love us, thank you for your continual support and for understanding our lives as
students. We are grateful that we were able to conquer another chapter of our lives and be ready
for the next; without you, this would have been far from being possible.

- Jansen, Raoul, Nathaniel
ii

TABLE OF CONTENTS
CHAPTER I: RESEARCH DESCRIPTION .....................................................

1

1.1 Background of the Study ........................................................................

1

1.2 Statement of the Problem .......................................................................

9

1.3 General Objective ...................................................................................

9

1.3.1 Specific Objectives ..................................................................

9

1.4 Scope and Limitations of the Study ........................................................

9

1.5 Significance of the Study ........................................................................

10

1.6 Definition of Terms ................................................................................

10

CHAPTER II: REVIEW OF RELATED LITERATURE ................................

13

2.1 Web Design ...........................................................................................

13

2.1.1 Flat Design .......................................................................................

14

2.2 User-Centered Design ........................................................................

14

2.2.1 Design for Situation Awareness: An Approach to User-Centered Design

14

2.2.2 A User-Centered Approach to Web Design for Mobile Devices

15

1. Assess Current Situation ...........................................................

16

2. Understanding Your Users .......................................................

16

3. Prioritize Mobile Users ............................................................

17

4. Design With Mobile Considerations ........................................

17

2.2.3 User-Centered Design (UCD) - 6 Methods .................................

18

2.3 Electronic Voting Systems ..................................................................

21

2.3.1 KASAMA Electronic Voting System (2013) ...............................

21

2.3.1.1 Screenshots of the System .....................................................

22
iii

2.3.2 MSU-IIT KASAMA Electronic Voting System (2012) ...............

24

2.3.3 MSU-IIT KASAMA Online Voting and Tabulating System .......

27

2.3.4 KASAMA Election System (KASAMA-ES) ..............................

28

2.4 Summary of Related System ..............................................................

29

CHAPTER III: CONCEPTUAL FRAMEWORK .........................................

32

3.1 MSU-IIT KASAMA Electronic Voting System (2013) .....................

33

3.2 ADDIE Model ....................................................................................

34

3.2.1 Analysis Phase .............................................................................

35

3.2.2 Learner Analysis ..........................................................................

35

3.2.3 Content Analysis ..........................................................................

35

3.2.3.1 Administrator Module...........................................................

36

3.2.3.2 Board of Election Inspector Module.....................................

36

3.2.3.3 Student Module ....................................................................

36

3.2.4 System Design .............................................................................

37

3.2.4.1 Graphic Design .....................................................................

37

1. Color .........................................................................................

37

2. Color Harmony .........................................................................

38

3.2.5 Web-Based Development Tools ..................................................

40

3.2.5.1 Front-End Development .......................................................

40

3.3 Interactivity ........................................................................................

41

3.3.1 Text Input ....................................................................................

41

3.3.2 Mouse Click ................................................................................

41

3.4 Implementation and Evaluation .........................................................

42

3.4.1 System Evaluation ......................................................................

42

3.4.1.1 User-Centered Testing and Evaluation ................................

42
iv

CHAPTER IV: DESIGN ..................................................................................

44

4.1 Overview of the System ....................................................................

44

4.2 Theoretical Framework ....................................................................

44

4.3 Deployment Diagram .......................................................................

46

4.3.1 Distributed Database ................................................................

47

4.4 Flowcharts ........................................................................................

48

CHAPTER V: RESULTS AND DISCUSSION ...........................................

53

5.1 Test Results .....................................................................................

53

5.2 User-Centered Test and Results ......................................................

53

5.2.1 Post-Task Results .....................................................................

54

5.2.2 Post-Test Results ......................................................................

58

5.2.3 Summary of Results .................................................................

63

CHAPTER VI: CONCLUSION AND RECOMMENDATIONS ..............

65

6.1 Conclusion ......................................................................................

65

6.2 Recommendations ...........................................................................

66

BIBLIOGRAPHY ..........................................................................................

67

APPENDIX A .................................................................................................

69

APPENDIX B .................................................................................................

70

APPENDIX C .................................................................................................

71

APPENDIX D .................................................................................................

72

APPENDIX E .................................................................................................

73

APPENDIX F .................................................................................................

75

APPENDIX G ................................................................................................

77

APPENDIX H ................................................................................................

87

APPENDIX I ..................................................................................................

90
v

USER MANUAL ......................................................................................... ..

97

LIST OF TABLES
Table 2.3.1 User-Centered Design (UCD) - 6 Methods ....................................

19

Table 2.3.2 User Interface .................................................................................

25

Table 2.3.3 Business Rules ...............................................................................

26

Table 2.4 Summary of Related System .............................................................

29

Table 3.2.1 Common Color Meanings ..............................................................

38

vi

LIST OF FIGURES
Figure 1.1.1 KASAMA organization chart .........................................................

4

Figure 1.1.2 Filing of candidacy flowchart .........................................................

5

Figure 1.1.3 Voting flowchart .............................................................................

6

Figure 1.1.4 Counting flowchart .........................................................................

7

Figure 1.1.5 Fishbone Diagram of the problem ..................................................

8

Figure 2.2.2 A User-Centered Approach to Web Design for Mobile Devices ...

16

Figure 2.3.1 Login Screen ...................................................................................

23

Figure 2.3.2 Add Candidate Screen ....................................................................

23

Figure 2.3.3 Ballot .............................................................................................

24

Figure 3 Conceptual Framework .........................................................................

32

Figure 3.2 ADDIE Model ....................................................................................

34

Figure 3.2.1 A color scheme based on analogous colors .....................................

39

Figure 3.2.2 A color scheme based on complementary colors ............................

39

Figure 3.2.3 A color scheme based on nature .....................................................

39

Figure 4.2 Theoretical Framework ......................................................................

45

Figure 4.3 Deployment Diagram .........................................................................

47

Figure 4.4.1 Main Administrator (DSA) flowchart .............................................

48

Figure 4.4.2 Student Administrator flowchart .....................................................

50

Figure 4.4.3 BEI flowchart ..................................................................................

51

Figure 4.4.4 Student (Voter) flowchart ................................................................

52

Figure 5.1 Percentage of Participant Turnouts ....................................................

53

Figure 5.2.1 Login Process ..................................................................................

54
vii

Figure 5.2.2 Search Student ................................................................................

55

Figure 5.2.3 Voting for KASAMA and EC officers ...........................................

55

Figure 5.2.4 Viewing Election Candidates .........................................................

56

Figure 5.2.5 Editing student information (ID number, password, account type)

56

Figure 5.2.6 Viewing/printing election results ...................................................

57

Figure 5.2.7 Logout Process ...............................................................................

58

Figure 5.2.8 Website Navigation ........................................................................

59

Figure 5.2.9 Ease of procedures .........................................................................

59

Figure 5.2.10 User Interface ...............................................................................

60

Figure 5.2.11 System Satisfaction ......................................................................

61

Figure 5.2.12 Adaptability to the System ...........................................................

61

Figure 5.2.13 Opinion on Providing Speedy Elections ......................................

62

Figure 5.2.14 Usefulness of the System .............................................................

63

viii

CHAPTER I
RESEARCH DESCRIPTION
Electronic voting (also known as e-voting) is voting using electronic systems to aid
casting and counting votes. E-voting technology can include punched cards, optical
scan voting systems and specialized voting kiosks which can also involve transmission
of ballots and votes via telephones, private computer networks, or the Internet.
In 2004, a 30 percentage estimate of the voting population in the United States used some
form of e-voting technology, including direct electronic recording (DER) touch screens or
optical scanners, to record their vote for President. Electronic votes are stored digitally in a
storage medium such as a tape cartridge, diskette, or smart card before being sent to a centralized
location where tabulation programs compile and tabulate results. Advocates of e-voting point out
that electronic voting can reduce election costs and increase civic participation by making the
voting process more convenient. Critics maintain that without a paper trail, recounts are more
difficult and electronic ballot manipulation, or even poorly-written programming code, could
affect election results (Rouse, 2011).
1.1 Background of the Study
According to Gibbins (2013), election is “the formal process of selecting a person for
public office or of accepting or rejecting a political proposition by voting”.
The election for the student council of Mindanao State University- Iligan Institute of
Technology (MSU-IIT) involves the office of the Department of Student Affairs (DSA).
The DSA is the office in the Institute which is responsible for providing programs that
will enhance the growth and development of the students. It also supervises and regulates student
activities of campus-based organizations as well as assist student leaders. DSA is also

1

responsible for conducting the annual election for the Kataas-taasang Sanggunian ng mga Magaaral (KASAMA) which also includes the election for the College Executive Council (CEC).
The KASAMA is the supreme student council of MSU-IIT. It is composed of a president,
a vice president and 12 senators who govern in the Institute level. They represent the students in
all policymaking body of the Institute when necessary, as well as represent the students in the
external student affairs. KASAMA is also responsible for organizing, coordinating and directing
student activities in the Institute.
Under KASAMA is the CEC. It is composed of a governor, a vice governor and 8 board
members. These officers govern in the College level down to the Department level. The CEC
also supervises programs and activities conducted by various departments under its jurisdiction.
Before an election is conducted, interested students to run for a position in the election
are required to fill up and submit a Certificate of Candidacy (COC) on or before a given
deadline. The COC contains the name of the applicant, the college, the position and the party list.
Together with the Certificate of Registration (COR) and the Certificate of Good Moral
Character, the COC will then be submitted to the office of the DSA.
After the deadline of the submission of COC’s, the DSA examines each COC. The office
approves or disapproves the application under given qualifications. The complete qualifications
are stated in Section 1 of Article IX of the Constitution and By-Laws of the KASAMA (See
Appendix F).
Official candidates are now given a maximum of 15 days to campaign. Last day of
campaign will be on the day before the election.

2

The election is conducted every3rd Friday of February and will be held in secret balloting.
Enrolled students in the Institute are given the right to vote and elect a new set of officers who
will govern for the next academic year.
Each college has their own precinct. On the day of the election, the voter which is the
student will look for their name in the master list provided. After the voter found his or her name,
he or she will proceed to the member of the COMELEC assigned in the precinct. The voter will
sign on the space before his or her name on the copy of the master list and then the voter is then
given a ballot. After the voter casts his or her vote, the ballot is dropped into the ballot box and
the voter leaves the precinct.
After the voting period is closed, ballot boxes from all schools and colleges are brought
to an area where members of the COMELEC can start the manual counting. One member
examines each ballot and speaks the name of the candidate who gets the vote. A vote is
represented by a tally stick. Another member of the COMELEC tallies the vote on a sheet of
paper and another member on a sheet of Manila paper.
After the last ballot has been examined and the last vote has been tallied, members of the
COMELEC then count the total number of votes by counting the total number of tally sticks
recorded. The DSA releases the official results and proclaims the winners of the election.

3

Figure 1.1.1: KASAMA organizational chart

4

Figure 1.1.2: Filing of candidacy flowchart

Figure 1.1.2 shows the required documents for the manual filing of candidacy process in
the DSA. It is required first that that the student is enrolled in the following semester to avail a
COR which is one the requirements for filing, and in the end the DSA will be the one to
determine if the student is qualified or otherwise.

5

Figure 1.1.3: Voting flowchart

Figure 1.1.3 shows the requirements and the flow of the manual voting which is still
being practiced now in MSU-IIT. The student has to go to the Board of Election Inspector (BEI)
to look for his/her name and sign it to get the ballot and after voting the student will have to drop
the ballot to the ballot box.
6

Figure 1.1.4: Counting flowchart

Figure 1.1.4 shows the manual counting flow of the KASAMA election. One COMELEC
member states the name of a candidate in the ballot with a vote while the other member tallies
the vote on sheet of manila paper, the flow keeps on looping until the ballot has been tallied.

7

Figure 1.1.5: Fishbone Diagram of the problem

Figure 1.1.5 shows the recent system of 2013 KASAMA election which was tested to 44
respondents during the KASAMA election 2013 at the School of Computer Studies (SCS) where
there was an automated implementation during the voting process from the President to Senators
yet did not cover on the CEC local election. The problems about the system are illustrated on the
diagram above, the people are still not satisfied with the systems mobile unresponsiveness,
undistributed database for other colleges to avail the system, date setting of election without
user-interface, adding of candidates and no option for voting on BEI's. For full details of the
results and comments on last year's 2013 test results (See Appendix G).

8

1.2

Statement of the Problem
Users of the 2013 KASAMA Electronic Voting System encountered difficulties in using

the system with respect to its user interface, design, and features. These factors caused the
system’s limited capabilities in terms of user’s satisfaction during its initial deployment.
1.3

General Objective
To redesign the 2013 KASAMA Electronic Voting System through a user-centered

design approach that is responsive, simple and easy user interface for its intended users while
providing the necessary capabilities for an improved deployment.
1.3.1 Specific Objectives
The following specific objectives are necessary to attain the general objective:
1. To use Hypertext Markup Language (HTML) as the backbone of a website
development process.
2. To use Cascading Style Sheets (CSS) for modifying the look and the format of the
system.
3. To use flat design in the design of the menu and the content of the system.
4. To develop a mobile responsive user interface using Bootstrap 3.
5. To evaluate the system through user testing.
1.4 Scope and Limitations of the Study
This study focuses on the redesigning of previous electronic voting systems in MSU-IIT
especially the 2013 KASAMA Electronic Voting System in terms of the user interface and
improvement of the overall user experience. This study does not cover the actual deployment of
the system throughout the institute, although providing the necessary capabilities for such
deployment is included. Furthermore, profound methodologies for security aspects such as
9

database and network security that accompanies with an actual deployment is not included in the
study.
1.5 Significance of the Study

The redesigned KASAMA Electronic Voting System will help resolve issues encountered
by the previous system, help speed up elections, and improve the overall user experience. This
study will develop a system that aims to help eliminate human error in the manual counting of
votes and input of candidates. Since the counting of votes is automated, the manipulation can be
prevented.

User-centered design approach is a less chartered design path among Information
Technology students in this Institution. There is less emphasis on user’s needs in system design.
This study will serve as a reference for other researchers that aim to improve user experience in
their studies.

1.6 Definition of Terms
1. Distributed Database - the main database will be designated for the DSA’s office and
the rest will be distributed to each college in the university.
2. Main Administrator–this main administrator is the Commission on Elections ExOfficio Chairman of the KASAMA.
3. Student Administrator - the student administrator is the one assigned by the main
administrator for each college and handle the elections on his/her precinct.
4. Board of Election Inspector – the BEI is the one assigned by the DSA to assist in
handling the elections.

10

5. Student Voter - a voter is a bona fide student of MSU-IIT enrolled in the semester at
the time the election was held. To be able to vote, the student must approach the BEI on
the precinct to ask for his/her password to login.
6. HTML - HTML is an acronym for Hypertext Markup Language. According to
Margaret Rouse in 2005, HTML is referred to the set of markup symbols or codes
inserted in a file intended for display on a World Wide Web browser page. The markup
tells the Web browser how to display a Web page's words and images for the user.
7. Bootstrap - Bootstrap is a collection of tools for creating websites and web
applications (“Pulse – the heartbeat of BootstrapCDN”, 2013). It contains HTML and
CSS-based design templates for typography, forms, buttons, navigation and other
interface components, as well as optional JavaScript extensions (“Twitter Bootstrap :
LESS is more”, 2013).

8. Web Design - refers to the production and maintenance of websites. It encompasses
different skills and principles such as graphic design, interface design, and user
experience design. Web design normally describes the design process of the front-end
(client side) design of a website with the use of markup language.

9. Flat Design - a style of interface design in which elements, such as boxes, image
frames, and buttons, lose any type of stylistic characters such as drop shadows, gradients,
or textures that give them a three-dimensional look (The Next Web, 2014).

10. User-Centered Design - a process not constrained to interfaces or technologies in
which the needs, wants, and limitations of end users of a product, service, system or
process are given extensive attention at each stage of the design process.
11

11. CSV File - CSV stands for Comma Separated Values. It stores tabular data into plain
text separating each value with a comma which is a file extension that will be read in the
database that contains the list of enrolled students on the current semester.

12

CHAPTER II
REVIEW OF RELATED LITERATURE

A formal and organized process of electing or being elected, especially of members of a
political body (Harper, 2010). KASAMA election is held annually for the government body of
the students who studies in MSU-IIT composed of a President, Vice President, Senators and the
College Executive Council composed of a Governor, Vice Governor and Board members.
2.1

Web Design
Web design generally refers to the production and maintenance of websites. It

encompasses different skills and principles such as graphic design, interface design, and user
experience design. Web design normally describes the design process of the front-end (client
side) design of a website with the use of markup language.
During the early stages of the World Wide Web (late 1980s to early 1990s), websites
were generally text heavy. There was no integrated approach to graphic design. With the
completion of the browser and the standardization of HTML, as well as the emergence of new
technologies such as Cascading Style Sheets (CSS) and JavaScript, web design evolved in a
rapid pace (Niederst, 2006).
Web designers utilize various tools in the design process of websites. They are expected
to have an awareness of usability and if their role involves creating markup abiding to with web
accessibility guidelines (Wikipedia, 2014).

13

2.1.1

Flat Design
According to Turner, flat design is a style of interface design in which elements,

such as boxes, image frames, and buttons, lose any type of stylistic characters such as
drop shadows, gradients, or textures that give them a three-dimensional look (The Next
Web, 2014). Flat design aims to emphasize simplicity, clarity and honesty in materials in
user interfaces (Kelsey, 2013).
The use of flat design gives a fast and fluid feel that brings a compelling, delightful
interface of products (Clayton, 2014).While many websites nowadays use flat design in
their user interfaces, it is also very popular in app and mobile design. Some of the strong
examples of flat design implementation are the interfaces of Apples’iOS 7 and
Microsoft’s Windows 8 and 8.1.
To develop a mobile user experience that aligns to the needs and expectations of
your targeted users, you must involve representative users and their feedback.
2.2

User-Centered Design
User-centered design (UCD) is a process not constrained to interfaces or technologies in

which the needs, wants, and limitations of end users of a product, service, system or process are
given extensive attention at each stage of the design process.
2.2.1 Design for Situation Awareness: An Approach to User-Centered Design
M.R. Endsley and D.G. Jones who are authors of the book Design for Situation
Awareness: An Approach to User-Centered Design, this book focuses on user-centered

14

preferences depending on a systems service and situation. It states that the philosophy of usercentered-design is a way of achieving more effective systems that are discussed below:


A design that challenges designers to mold the interface around the capabilities and the
needs of the operator.



Displays information that is centered around the sensors and technologies that produce it,
which also integrates this information in ways that fit the goals, tasks, and needs of the
users.



A desire to obtain optimal functioning of the overall human-machine system or the
relationship between the system and the user.
As a result of user-centered design, we can greatly reduce errors and improve

productivity without requiring significant new technological capabilities. Along with usercentered design also comes improved user acceptance and satisfaction as a side benefit, by
removing much of frustration common to today's technologies. User-centered design provides a
means for better harnessing information technologies to support human work.
2.2.2 A User-Centered Approach to Web Design for Mobile Devices
V. Friedman and S. Lennartz discusses in this article on the focus of the designers and
the users experience for mobile websites accessed from mobile phones with small screens,
though the process can be applied to building apps as well. As a Web designer, the good news is
that the process is similar to designing desktop websites with some additional mobile-only
considerations that go hand-in-hand with small screens, device features and constraints, and
connectivity issues. The user-centered mobile design life cycle can be thought of as an ongoing
process as shown below:

15

Figure 2.2.2 A User-Centered Approach to Web Design for Mobile Devices

1. Assess Current Situation
By assessing the current situation, it must be determined to find out and study the target
users and what matters to them. The more relevant statistic is on how many of users are
accessing website using mobile devices nowadays. Along with the types of devices and operating
systems that have been used to access a full desktop site. Dig deeper to understand why these
users visit your site using a mobile device on what they are trying to do, and the content and
functionality they are using.
Not all websites need to go mobile now, but if you realize that you need a mobile
website, let’s focus on the reason you need it: your users!
2. Understanding Your Users
User-centered design relies on user involvement throughout the design process, leading to
a solution that users will find useful and want to use. To achieve that, you first need to have a
16

clear understanding of your users, grouped into a prioritized set of user groups whose needs can
be thought of individually. Identifying your key user groups and creating personas will help you
design better for your main users.
As you build a detailed picture of your users and their usage patterns. Apart from an
understanding of your user and their needs, you will also get a better understanding of the types
of mobile devices you have to consider while designing.
3. Prioritize Mobile Users
While evaluating the need for a mobile website, you had a list of features you would like
to offer on your mobile website. Ideally, these requirements would align closely with the user
requirements identified during user research. If they do not align, look at the requirements on
what value will your system add or relate to the users and to ensure that your requirements meet
user needs and goals. Systematically taking into consideration time, effort, and resources
available.
4. Design With Mobile Considerations
The basic design steps and principles of desktop website design apply to mobile design,
with the addition of a few important mobile design considerations. Mobile devices are personal
devices with small screens. As a guide, here are some specific mobile design considerations to
pay attention to while designing for a mobile Web:


Design for Smaller Screen Sizes
The most visible difference between a mobile device and a desktop is the screen size. For

years, the minimum screen resolution has been increasing since the days of 640 x 480. Mobile
phone screen sizes have also been increasing, but even the gorgeous screen of the iPhone 4 is
still small in comparison to a standard 1024×768 desktop design. Even though many smartphone

17

browsers today can miniaturize desktop websites, they inadvertently break the user experience
by making users zoom in and out.


Simplify Navigation
Without a mouse to point and click, mobile users have to rely on tiny keypads, trackballs

and touch to navigate mobile websites. Add in the small screen with the need to complete tasks
quickly and efficiently, and clear and intuitive navigation is crucial to the system.


Prioritize Content
Contents must be brief, smaller screen sizes require even more careful attention to the

content displayed to the user. First things first, unnecessary content must be cut and it must be
prioritized based on its importance.


Minimize User Input
It's a pain to be involved in entering data on miniscule screens. Feature phones have

tedious numeric keypads for input, while smartphones have tiny keyboards, either real or virtual,
which are subject to fat-finger errors.
2.2.3 User-Centered Design (UCD) - 6 Methods
T. Fidgeon discusses the stages that are carried out in an iterative fashion, with the cycle
being repeated until the project's user-centered objectives have been attained. ISO 13407 outlines
4 essential activities in a user-centered design project:


Requirements gathering - Understanding and specifying the context of use



Requirements specification - Specifying the user and organisational requirements



Design - Producing designs and prototypes



Evaluation - Carrying out user-based assessment of the site

18

The following is a typical top-level characterisation of the most popular user-centered
design methods:
Table 2.3.1User-Centered Design (UCD) - 6 Methods

Method

Cost

Output

Sample Size

When to use

Focus Groups

Low

Non-statistical

Low

Requirements
gathering

Usability testing

High

Statistical & non- Low

Design

statistical

& evaluation

Card Sorting

High

Statistical

High

Design

Participatory

Low

Non-statistical

Low

Design

Low

Statistical

High

Requirements

Design
Questionnaires

gathering
& evaluation
Interviews

High

Non-statistical

Low

Requirements
gathering
& evaluation



Focus Groups
A focus group involves encouraging an invited group of intended/actual users of a
site (i.e. participants) to share their thoughts, feelings, attitudes and ideas on a certain
subject.

19

Organising focus groups within an organisation can also be very useful in getting
buy-in to a project from within that company.


Usability Testing
Usability testing sessions evaluate a site by collecting data from people as they
use it. A person is invited to attend a session in which they'll be asked to perform a series
of tasks while a moderator takes note of any difficulties they encounter.
Users can be asked to follow the think-aloud protocol which asks them to
verbalise what they're doing and why they're doing it.
You can also time users to see how long it takes them to complete tasks, which is
a good measure of efficiency (although you should bear in mind that using the 'think
aloud' protocol will slow users down considerably).
Two specialists' time is normally required per session - one to moderate, one to
note problems.



Card Sorting
Card sorting is a method for suggesting intuitive structures/categories. A
participant is presented with an unsorted pack of index cards. Each card has a statement
written on it that relates to a page of the site.
The participant is asked to sort these cards into groups and then to name these
groups. The results of multiple individual sorts are then combined and analysed
statistically.



Participatory Design
Participatory design does not just ask users opinions on design issues, but actively
involves them in the design and decision-making processes.

20



Questionnaires
Questionnaires are a means of asking users for their responses to a pre-defined set
of questions and are a good way of generating statistical data.



Interviews
An interview usually involves one interviewer speaking to one participant at a
time.
The advantages of an interview are that a participant's unique point of view can be
explored in detail. It is also the case that any misunderstandings between the interviewer
and the participant are likely to be quickly identified and addressed.
The output of an interview is almost exclusively non-statistical - it's critical that
reports of interviews are carefully analysed by experienced practitioners.

2.3

Electronic Voting Systems
Electronic voting uses electronic systems to aid in casting and counting votes. Punched

cards, optical scan voting systems, and specialized voting kiosks are some of the electronic
voting technology currently in use today. Electronic voting may involve transmission of ballots
via telephones, computer networks, or the internet.
2.3.1 KASAMA Electronic Voting System (2013)
M.J. Albaran, C.J. Bicoy, and J. Castillo developed the KASAMA Electronic Voting
System. The School of Computer Studies (SCS) used the system during the 2013 elections. It
was a new system developed to simplify the whole voting process of the school and it helped the
students to collect the final results of the election.

21

This project is intended for the whole university to provide students a hassle-free election
with the help of the automated system, yet the system was only deployed in one college since the
database was not distributed. This system helps the COMELEC to get the official results on one
glance after the election period is over. The system developers constructed an automated system
which was used as the main interaction with the voters. Users can approach the BEI on the
precinct to get their passwords to log-in and cast their votes. The software development method
used was Rapid Application Development (RAD) while the following are the observations of the
initial system:
1. Inharmonious color combination of the background and the title text.
2. The website responsiveness is not completely flexible to mobile devices.
3. The date settings is not user-friendly to administrators who have no database
administration background.
4. A BEI cannot vote using the same account type.
5. The system's database is undistributed.
2.3.1.1 Screenshots of the System

The 2013 KASAMA Electronic Voting System encountered problems in terms of
its user interface and user experience, and functionalities. For its functionalities, setting
the election date requires access inside the database. This can be a problem not only in
the security of the system but also for designated administrators with no prior knowledge
to database management. Another issue is the Board of Election Inspector (BEI) account
which does not have the functionality to vote. This can be a hassle to an assigned BEI,
since he/she needs to log out and sign in to his/her student account in order to vote.

22

Moreover, the system was designed to accommodate only one college. Considering that
the KASAMA elections is an institute-wide affair, the mentioned system’s limitation is a
big hindrance to an actual deployment throughout MSU-IIT. Some of these problems are
shown in the figures below:

Figure 2.3.1 Login Screen

As Figure 2.3.1 shows, the login page placeholder says ‘Username’ when it is the
ID number of the student that needs to be inputted. This confused users right from the
start of using the system. The color combination used also distracted some users.

23

Figure 2.3.2 Add Candidate Screen

Figure 2.3.2 shows that adding candidates required the manual input of the
candidate’s name, making it susceptible to human error.

Figure 2.3.3 Ballot

24

As Figure 2.3.3 shows the ballot, the system’s unresponsiveness to the screen
dimensions of other platforms such as mobile devices irked some users who tested to vote
through the system via smartphones.
2.3.2 MSU-IIT KASAMA Electronic Voting System(2012)
The KASAMA Electronic Voting System for managing the KASAMA elections held in
Mindanao State University – Iligan Institute of Technology (MSU-IIT) annually which was
developed by J.E. Bongabong, K.R. Baldonado, and K.J. Laganao. The institute uses the existing
system where it passes through different stages in managing the elections and also uses the
traditional manual system in counting. With the number of students enrolled in IIT, collecting
and counting the votes would be time-consuming and the probability of committing mistakes
would be rampant. A new way of handling the data collection needs to be developed to cater all
the students of the school and to achieve accuracy in the results.
This project is intended for all MSU-IIT students to be able to vote without passing
through a manual election system but by using a web-based voting system. This system enables
student voters to elect officers without hassle and helps COMELEC officers to count the votes
automatically without experiencing counting the ballots one by one.
The software development method used was Rapid Application Development (RAD)
while the following are the findings during the initial system:
1. A Registration Module which uploads the voter details.
2. A Voting Module which uses the Electronic Voting Ballot with an online/web-based user
interface to vote.

25

3. An Admin Module which enables authorized election officials to login-in to gain election
results including: the total number of yes and no votes on measures, the total number of
votes for each candidate.
After the initial findings, the system developers constructed a system that has a webbased front end which acts as a main interaction with the users. Users can register online
beforehand the election proper.
Table 2.3.2 User Interface

1.

A registration module with a boxed figure user
interface.

2.

A voting module with a bright shaded user
interface design.

3.

The system also provides simple menus and
buttons to help voters navigate through the
pages with ease.

4.

A website design with Arial typography.

Table 2.3.3 Business Rules

1.

Students registering should be MSU-IIT
students only. To confirm, students are
required to present their COR and ID to the
COMELEC.

2.

After confirmation, student can register online

26

to the database only once every election.

3.

The student is given only one ballot with the
list of candidates.

4.

After voting, the student should confirm
his/her votes. He should apply rules about
how many candidates he should choose in
every position.

5.

After confirmation, the ballot is automatically
counted and the student is also automatically
logged out of the system. He/She cannot vote
again.

2.3.3 MSU-IIT KASAMA Online Voting and Tabulating System
I.C. Chua, J.C. Lasta, and A. S. Sangil found that the system for the KASAMA general
election is done in a traditional manner. Though voters need not register prior the election period,
they have to go to their specified precincts and lookup their name in the list of qualified voters.
Further details are stated in Section 1 of Article IX B of the KASAMA Constitution and by-Laws
(CBL).
The researchers stated that any election in general costs a lot of manpower and material
resources during the voting and the tallying periods. Similarly the current voting and tabulation
process in the KASAMA general election is inefficient and costly. Along the line, the researchers

27

conducted a study to resolve these issues by implementing the voting process in an online
environment which aims at addressing the problems such as (a) To conduct a study on the
current election system (b) To design the architecture of the electronic voting system and
tabulation system (c) To identify and resolve any potential security risks that will prove to be
harmful to the system and to the election in general (d) To develop the user interface and (e) To
test the system by conducting a mock election and document the results.
The method used was Waterfall Model while the following are the findings during the
initial testing of the system:
1. To implement the web-based application design with HTML and CSS for the frontend.
2. To implement the system as a web-based application using PHP and will utilize the
PostgreSQL DBMS for its backend.
3. To use Unified Modelling Language for its Design Model.
After the initial findings, the system developers were able to do the following:
1. The system has a simple bright shaded user interface front end design.
2. A website design with Arial typography.
3. The system provides electronic ballot to be used in voting proper and will be accessed
through a computer available in every precinct as the main interaction with the voters.
4. The votes are submitted through the internet and into a main computer which will
automatically tally the results.

28

Based on the findings of the system study, the following are the recommendations future
researchers should consider:
1. Research on and integrate a more secure and advanced way of verifying student identity
(i.e. bar code reading, biometric scanning, etc).
2. Formulate a generic code based on the workflow, system rules, and functions of the
system, thus allowing it to be more dynamic, flexible, and not institute-specific.
2.3.4

KASAMA Election System (KASAMA-ES)
There has been electronic voting system thesis as far back as 2006 the KASAMA

Election System developed by C.H. Bautista, A.M. Birao and C.L. Roda. The current KASAMA
elections is held every 2nd semester to elect new set officers for the incoming school year but the
process during the elections is done manually which is unreliable, time-costly and prone to
Electoral Fraud. Electronic Voting is a blanket term used to describe a variety of practices using
technologies, with the use of electronic voting systems, we can fully eliminate the possibility of a
double vote which is the largest source of voting errors on punch card or paper ballot voting
systems this also speeds up the process to a great extent and not only it does hasten the process
but it will also provide more accurate and reliable result.
The method used was Rapid Application Development Model (RAD) and it also uses Unified
Modelling Language (UML) models and diagrams so that the system is more understandable and
informative. Entity Relationship Diagram (ERD) is also used to serve as the basis for database
and the researchers of this system used Borland Delphi 7 and PostgreSQL for the implementation
and development of this system. The user interface type that was used in the application was
similar to a Windows classic type of graphical user interface.
29

2.4

Summary of Related System
Table 2.4 Summary of the features of related Electronic Voting Systems

Features

Related Systems

KASAMA
Electronic
Voting
System
(2013)

MSU-IIT
KASAMA
Electronic
Voting
System

KASAMA
Election
System
(KASAMAES)

(2012)

MSU-IIT
KASAMA
Online
Voting and
Tabulating
System

MSU-IIT
KASAMA
Electronic
Voting
System:
Redesigning
for Usability

Student/Voting
Module











Admin Module











Student Admin
Module



Student Admin
Exclusive Ballot



Registration
Module







30

Log-in Module











Board of Election 
Inspector’s
Module



College Board of
Election
Inspector(BEI)
Exclusive Ballot



Responsive User
Interface



Menu and
Buttons UserFriendly
Interactivity









Pleasant website
design overall
user interface
tone and hue
Font Style
Readability

Distributed
Database













31

As Table 2.4 shows, the latest system has more features compared with the previous
ones, which are solely focused on providing user-centered design approach for the users and be
able to get more satisfaction and ease for the usage of the system.

CHAPTER III
CONCEPTUAL FRAMEWORK

In this section, the KASAMA Electronic Voting System is being discussed thoroughly. In
its overview, the developmental processes were tackled to fully give a better understanding of
what a user-centered electronic voting system is. Knowing all of this can easily start the process
far enough in advance to avoid a predicament situation with the present system.

32

Figure 3 Conceptual Framework

3.1 MSU-IIT KASAMA Electronic Voting System (2013)

The institute performs annual elections held every second semester of the school year. As
initially discussed in the first chapter, the elections last year used the latest system in the School
of Computer Studies (SCS).

Prior to the election proper, the Candidates and their corresponding name, party list, and
position must be registered. Precinct was setup at the SCS grounds, with at most two (2) to four

33

(4) staff members deployed in the precinct to monitor over the voters. Laptops and tablets are
allotted for the precinct which uses Local Area Network as the medium of connections for voters
that prefer to vote on their own mobiles. The system also contains the complete list of enrolled
students on the following semester to confirm if the student is eligible to vote. It will also serve
as the primary voter validation and the account that the student uses to login to the system.

During the election proper, the voters will proceed to their respective precincts and
present their identification cards to the designated staff to return the voters password and be able
to login. They voters will fill up the positions with their candidate/s of choice in the electronic
ballot before submitting the form. By the end of the of the voting period, the results are then
posted in the administrators account and is ready to printed, however the College Executive
Council (CEC) was not included in the election which is not a complete election process for the
KASAMA.

Problems on procedures are encountered such as the adding of candidates which requires
a lot of inputs, which might cause errors in typing the candidates name rather than just selecting
the candidate from the student master list and select only the position and party list of the
candidate. This method will take up so much time and effort to add candidates. Another is the
unresponsiveness of the systems user interface that is not visually user-friendly to mobile voters,
and lastly the administrator has no graphical user interface to set the date of election. If this
whole process of election should be carried out through the use of a Software Application that
will be redesigned and simplify the user interface and other user-centered approach, then it will
be called “MSU-IIT KASAMA Electronic Voting System: Redesigning through a User-Centered

34

Approach.” The relative ease and economical implementation for the system makes it a practical
alternative of the existing system last year.

3.2 ADDIE Model
ADDIE (Analysis, Design, Development, Implementation, and Evaluation) model is
framework that represents a guideline for building instructional designs. Although widely used
for instructional materials, the researchers chose to use the model since it gives much importance
to the target users, is cost effective, and saves time.

Figure 3.2 ADDIE Model

3.2.1 Analysis Phase
During analysis phase, the problem, goals and objectives, and other relevant aspects are
identified by the designer. Thus, it is important to collaborate with the subject-matter expert
(SME) in identifying these characteristics.

35

The initial problem, goals and objectives were defined in the project. To improve and
strengthen these, the researchers approached the Department of Student Affairs (DSA) and
gathered information about the process of the manual KASAMA election, as well as its rules and
bylaws. Previous projects on automated election systems were also acquired with permission
from the IT department. These systems were examined by the researchers and flaws were
determined to serve as basis for the development of an improved system.
3.2.2 Learner Analysis
A survey was conducted on students who have tested one of the previous automated
election systems. The survey was aimed to gather impressions on the system’s user interface and
its

functionalities.

The

respondents

were

encouraged

to

provide

comments

and

recommendations. Problems encountered by the students were included into the issues that this
paper aims to address. Also, a user testing of the system will be conducted in coordination with
the DSA. Information gathered from this will be imparted into the existing learner analysis.
3.2.3 Content Analysis
Electronic voting systems are comprised by data which are classified as important by the
subject-matter expert (SME). The data refers to the subject matter within a field of basis to which
the foundation of the process is dedicated. It also refers to the student data which is used as the
content in the database to be manipulated for the voting process.
In this user-centered test material, the data was carried out by the SME and by the
researchers which are under the field of study. These modules are crucial in managing the voting
process. These module were commonly used by learners and some which are out of their hands
to handle.
36

3.2.3.1Administrator Module
The admin of the system, the DSA, has overall authority of the system. The can
add students/Comma Separated Values (CSV) which carries the lists of students enrolled
within the semester. He/she can add and edit candidates.
Setting of the date to be defined in the database can be done by entering the
specified date in the database and can open voting lines in his/her own college precinct.
3.2.3.2Board of Election Inspector (BEI)
The BEI serves as the assistant of the admin for every college. His/her duties
include accommodating student inquiries such as passwords and other election-related
concerns, and monitoring the electoral procedure within his/her college jurisdiction and
can close voting lines when the elections are done on his/her own college precinct.
3.2.3.3Student Module
The student has no other authority other than voting. Voting is a one-way process,
thus, voters/students are advised to be careful since they can never go back and change
their votes.
3.2.4 System Design
The design of the system aims to be developed by the researchers include suggestions
from the DSA with regards to the necessary functionalities that the system must contain, as well
as recommendations from students based on the conducted learner analysis. Also, the design will
also address the flaws that were observed on previous automated election systems.

37

3.2.4.1 Graphic Design
Since the system is not intended for the sole use of its developers, it must be made in
conjunction with the preferences of its client and intended users. Thus, consultations will be
made with the DSA to make sure that the design adheres to its inclinations as much as possible.
Student opinion will also not be left out, more importantly since they are end-users of the system.
Simply put, the design of the system involves the developers, the DSA, and the students.
Colors that may represent parties that are involved in the KASAMA election will not be
used in order to avoid bias. The researchers also intend to use a flat design approach on the
system. Providing a simple and minimalistic user interface will help users get easily accustomed
to the system.
1. Color
People use color to categorize objects in their daily lives. It can either attract
attention or do the opposite. Thus, in web design it is very important to be careful in
using color because it can bring a negative effect on content such as poor text readability.
Companies usually use color in web design to help users identify their brand. In web
design, colors have common meanings as shown in the figure below (Hoisington and
Minnick, 2013):
Table 3.2.1 Common Color Meanings
Color

Description

Blue

Trust, security, conservative, technology (The most common color used on the
Web)

Green

Nature, money, earth, health, good luck

38

White

Purity, cleanliness, innocence, precision

Red

Power, danger, passion, love, energy

Black

Sophistication, power, death, fear

Gray

Intellect, elegance, modesty

Orange

Energy, balance, warmth, brightness

Yellow

Cheer, optimism, joy, honesty

Brown

Reliability, earth, comfort

Purple

Mystery, spirituality, arrogance, royalty

2. Color Harmony
Harmony can be defined as a pleasing arrangement of parts and in visual
experiences harmony is something that is pleasing to the eye. It engages the viewer and it
creates an inner sense of order and a balance in the visual experience. When something is
not harmonious, it's either boring or chaotic. Color harmony delivers visual interest and a
sense of order (ColorMatters, 2014). Some formulas for color harmony are presented
below:

Figure 3.2.1 A color scheme based on analogous colors

39

Analogous colors are any three colors which are side by side on a 12 part color
wheel, such as yellow-green, yellow, and yellow-orange. Usually one of the three colors
predominates.

Figure 3.2.2A color scheme based on complementary colors

Complementary colors are any two colors which are directly opposite each other,
such as red and green and red-purple and yellow-green. In the illustration above, there are
several variations of yellow-green in the leaves and several variations of red-purple in the
orchid. These opposing colors create maximum contrast and maximum stability.

Figure 3.2.3 A color scheme based on nature

Nature provides a perfect departure point for color harmony. In the illustration
above, red yellow and green create a harmonious design, regardless of whether this
combination fits into a technical formula for color harmony.
3.2.5 Web-Based Development Tools
In creating the web-based training, various web development tools will be used by the
researchers.
40

3.2.5.1 Frond-End Development
The front-end of a system is what the user will see: the interface, the colors. This
is where the user interacts with the system and perform various activities.


Hypertext Markup Language (HTML)
HTML is the backbone of a website development process. HTML codes
will be used to create the overall look of the system.



Cascading Style Sheets (CSS)
Along with HTML, CSS will be used for describing the look and
formatting of document to be presented. It provides the developers better control
of the presentation and look of the system.



JavaScript
JavaScript allows the user to control, communicate, and alter document
content displayed in the website. JavaScript will used to create an interactive and
dynamic website (i.e. dynamic date).



Bootstrap
Bootstrap is collection of tools for web applications. It contains design
templates for interface components such as navigation, typography, and buttons.
Bootstrap 3 will be used to create a responsive website that can adjust to different
window resolutions such as mobile devices.



Adobe Photoshop
41

Photoshop is a powerful tool not just for editing photos but also graphics.
Photoshop will be used in creating logos and other necessary graphical content in
the user interface.
3.3 Interactivity
Interactivity refers to the system’s behavior as experienced by the user. It gauges the
user’s ability to conduct activities.
3.3.1 Text Input
Username and password are primary requirements that will allow to user to
proceed to the next processes of the system (i.e. to vote, to add candidate, etc.). There are
also other procedures that require input from the user such as adding name of party-list.
3.3.2 Mouse Click
Mouse-click is present in almost every process in the system, from choosing
preferred candidates to confirming vote. This, among others require the user to click on
an item to proceed to the next task.
3.4 Implementation and Evaluation
The system will be designed to use a distributed database. The database will be located
and maintained in different locations within the institution. One database will be maintained for
each colleges and one for the Department of Student Affairs (DSA). The Database Management
System for the system’s database will be PostgreSQL. It will be used for storing, modifying, and
retrieving obtained information.

42

PHP will be used to connect the user interface to the database and Apache web server
will also be used.
3.4.1 System Evaluation
To ensure that the deployment of the system will truly serve its purpose, user-centered
testing and evaluation will be done. During this phase, the system will be tested by the
developers and the specific end users according to its functions.
3.4.1.1 User-Centered Testing and Evaluation
User-centered testing was conducted among 44 participants to evaluate the
system's design, user interface, and overall user experience. Questionnaires provided to
the participants during the testing process and post-test interviews was conducted to
gather additional qualitative information regarding the user experience, as well as insights
and suggestions.



Screening Questionnaire
Screening questionnaires was used to determine the participants of the

testing. These questionnaires was distributed to 44 random college students of
MSU-IIT.


Pre-test Questionnaire

43

Before the actual testing of a system, a participant was asked to answer a
pre-test questionnaire. This test provides feedbacks to the researchers about the
user’s expectations on the system.


Post-Task Questionnaire
After completing a specific task, the user answered a question regarding
his/her experience and impression on that task. This test helped point out
possible problems on specific functionalities that may hinder user experience
of the system in the future.



Post-Test Questionnaire
This was used to gather information about the user’s overall experience after

using the system. Questions are related to the system’s interface, adaptability, and
overall satisfaction. Participants will also be encouraged to provide insights and
suggestions.

CHAPTER IV
DESIGN
4.1 Overview of the System
The Redesigned MSU-IIT KASAMA Electronic Voting System is a system that will
replace the previous KASAMA Electronic Voting System that encountered some flaws

44

according to the users preferences on last years' test on the annual KASAMA elections held at
the School of Computer Studies (SCS).

The system arose as a need to simplify the process of the systems technicalities and
procedures. Previous special projects have been made to automate the election process but were
not implemented due to several constraints. In this system, the developers aim and implement the
election process in a better user understanding on the systems interface and environment where
the users (administrators, BEI's, voters), even with less computer knowledge, can easily use the
system without any hassle and be much more convenient to each of them.

4.2 Theoretical Framework
This framework shows the important internal factors of the system that interacts with its
users and provides data that give meaning and purpose to the system itself.

45

Figure 4.2 Theoretical Framework

Figure 3.2 shows design used for the front-end of the system. The user interface
where the user interacts with the system and performs various activities was designed to
be flat, eliminating aspects such as drop-shadows that give menu and buttons a threedimensional look. This was done to provide a simple layout and reduce the chances of the
user being distracted by the look of the system. The tools used in achieving the design of
the system are discussed below:


Hypertext Markup Language (HTML)
HTML was used by the developers as the overall look and feel of the
systems' design.



Cascading Style Sheets (CSS)
Along with HTML, CSS was used for describing the look and formatting
of the documents presented on the system. It was used on modifying the contents
of the HTML tags and overall design such as the menu bar, body, text and
background colors, ballots, buttons and forms.



JavaScript
JavaScript was used by the developers for confirmation functions to let the
user decide safely before performing and action. Also, along with jQuery which is
46

a cross-platform JavaScript library, was used in altering the date using the jQuery
UI date picker to make it simpler for the user to change a date. Overall JavaScript
was used to create an interactive and dynamic website.


Bootstrap
Bootstrap was used as the design template for the interface components to
deliver a responsive system design. Bootstrap 3 which was the recent version of
bootstrap was used to create a responsive website that can adjust to different
window resolutions such as mobile devices that brings responsiveness to the
navigation, typography, buttons, icons and the overall look of a web-based
system.



Adobe Photoshop
Photoshop was used by the developers in editing custom logo designs.

4.3 Deployment Diagram
The deployment diagram represents the relations between the organizations (DSA,
colleges) involved in the system. This Diagram describes the behavior of the systems
deployment.

47

Figure 4.3 Deployment Diagram

Figure 4.3 shows the flow of the system deployment. The Computer Center will be the
source of the Comma Separated Values(CSV) file which contains the list of enrolled students
which will be passed to the DSA's main administrator, the DSA will then be the main server of
the database for each college. The student administrator and the BEI will then be the responsible
workforce for their colleges. In addition, the student will approach the BEI for their passwords so
they can vote. Furthermore, both can use mobile devices. Further information are discussed
below:
4.3.1

Distributed Database
The main database will be designated for the DSA’s office and the rest will be

distributed to each college in the university. Each college will have its own precinct and
will have its own server. As shown on Figure 4.3, The DSA will act as the Main
Administrator which points to the Student Administrator (assigned per college by the
DSA). The Student Administrator on each college will be the one to assign a BEI to help
distribute passwords to Students. Also, the BEIs' and the Students will have a luxury to
use mobile devices in using the system since it is responsive to mobile platforms.
48

4.4 Flowcharts
These flowcharts are graphical representations of the processes and actions the users are
going to do. These users are the individuals involved as shown before in the deployment diagram
(See Figure 4.3).

Figure 4.4.1 Main Administrator (DSA) flowchart

Figure 4.4.1 shows the process flow chart of the Main Administrators' account who has
overall authority of the system. Further function functionalities are discussed below:
View/Edit Student Profile:
49

a. Account type (student admin, BEI)
b. ID number
c. Password
Edit Account Type:
a. Admin

e. COE-BEI

i. SCS-BEI

b. CASS-BEI

f. CON-BEI

j. Student

c. CBAA-BEI

g. CSM-BEI

d. CED-BEI

h. SET-BEI

Add Candidate:
a. Select college

c. Select student

b. Add party list

d. Select position

Date Setting:
a. Set date

b. Edit date

c. Appearance

Results:
a. View election results

b. Print election results

50

Figure 4.4.2 Student Administrator flowchart

51

Figure 4.4.2 shows the process flow chart of the Student Administrators' account which
serves as a branch of the main admin with limited authority over the system. Further function
functionalities are discussed below:
a. Vote

d. Close Voting Lines

b. View/edit (ID number, password)

e. View/Print Election results (CEC)

c. Assign BEI

Figure 4.4.3 BEI flowchart

52

Figure 4.4.3 shows the process flow chart of the BEI's account which serves as the
assistant of the student admin. Further function functionalities are discussed below:
a. Vote
b. View (ID number, name, password, voting status)
c. View election results (CEC)

Figure 4.4.4 Student (Voter) flowchart

Figure 4.4.4 shows the process flow chart of the student account. The student has
no other authority other than voting. Voting is a one-way process, thus, voters/students
are advised to be careful since they can never go back and change their votes.
53

CHAPTER V
RESULTS AND DISCUSSION
This chapter shows the result of the testing and evaluation conducted for this study. The
testing phase included an initial and final testing. 52 potential users were screened and a total of
44 participants were selected. These participants were asked to answer a pre-test, post-task, and
post-test questionnaires.
5.1 Test Results
The figure below shows the percentage of student participants per college.

Participants
12%

CASS

12%

CED

5%

7%

10%

CSM
COE
SET

7%
40%

7%

SCS

CON
CBAA

Figure 5.1 Percentage of Participant Turnouts

5.2 User-Centered Test and Results
The initial testing consisted of 26 participants, 15 of which tested using a PC and 11
using a smart phone. After some revisions based on user suggestions, a final testing was

54

conducted among 18 participants, 7 tested using a PC and 11 using a smart phone. Overall, 22
students tested the system using a PC while 22 tested using a smart phone.
5.2.1 Post-Task Results:
The users were tested using the student administrator account. This was done to
save time, also since the functionalities found within the BEI and student accounts are
encompassed by the student administrator account.
 Login Process

Figure 5.2.1 Login Process

The login process among the participants was generally easy for both platforms. After the
initial testing, the error handling was improved based on a suggestion of one participant into
making validation errors text color into red to provide a more clear information for the user since
the system previously presented a lighter color (See Appendix H).

55

 Search Student

Figure 5.2.2 Search Student

Searching for students through their first name, last name or ID number was generally
easy among testers of both platforms.
 Voting for KASAMA and EC officers

Figure 5.2.3Voting for KASAMA and EC officers

56

The participants did not have hard time on voting. One suggestion, which was to use
counters on checkboxes for senators and board members, was implemented by the researchers.
 Viewing Election Candidates

Figure 5.2.4 Viewing Election Candidates

Based on the figure above, the participants did not encounter any problems in viewing the
candidates for both the KASAMA and the CEC.
 Editing student information (ID number, password, account type)

Figure 5.2.5Editing student information (ID number, password, account type)

57

Although no errors were encountered during the task of editing student information, some
participants were observed to have taken some time understanding the task. Considering that this
functionality is only available for student administrators and not the majority of student voters
during the actual elections, the provision of a user manual will help alleviate difficulties that
users of this account may encounter.
 Viewing/printing election results

Figure 5.2.6 Viewing/printing election results

The viewing of election results of the CEC went smoothly among the participants. Some
did not immediately find the print icon which was placed at the upper left corner of the results.
Thus, the researchers decided to emphasize the icon by repositioning it at the upper right corner
and put it in a border to further indicate its function (See Appendix F).

58

 Logout Process

Figure 5.2.7 Logout Process

The participants were all able to log out from the system without any problems. Overall,
the testing among the participants using the two platforms did not encounter any critical errors in
performing the tasks specified as shown in the previous charts. The results between the two
platforms were also similar, both producing favorable results from the users.

5.2.2 Post-Test Results
After the actual testing, the participants were provided questionnaires to provide
their feedback and impression on the system. Some of these aspects were compared with
the 2013 KASAMA Electronic Voting System. These are as follows:

59

 Website Navigation
3% 2% 0%

18%

Very Easy
Easy
Neutral
Difficult
Very Difficult
77%

Figure 5.2.8 Website Navigation

Based on the figure shown, the results of the overall experience of navigating through the
website was favorable among the participants. The only participant (2%) which gave a Difficult
rating did not provide the researchers a reason/feedback to justify the rating.
 Ease of Procedures

Figure 5.2.9 Ease of procedures

60

As compared to the 2013 KASAMA Electronic Voting System, the current system
provided a better experience among its users in terms of completing task/s. This result is
significant considering that the previous system's testing only required the users to vote, while
the current system's testing which includes various tasks.
 User Interface

Figure 5.2.10 User Interface

In terms of the user interface, the current system has a greatly reduced unsatisfactory
rating compared to the previous system. This can be attributed to the flat design used in the
system, which used as less color as possible and a simple interface. The responsiveness of the
system may have also played a role in providing users an easy experience in using the system
through a mobile device, in this case a smart phone.

61

 System Satisfaction

Figure 5.2.11 System Satisfaction

The user satisfaction of the current system was significantly better compared to the 2013
KASAMA Electronic Voting System as shown in the figures above. Only 1 person was not
satisfied with the system, once again not giving any reason to justify the rating.
 Adaptability to the System
0%
19%
less than 10 minutes
10-15 minutes
15 minutes or more
81%

Figure 5.2.12 Adaptability to the System

62

Based on the figure shown above, adaptability to the system among the participants is
generally fast. This is significant considering the fact that most participants have average
computer skills.
 Opinion on Providing Speedy Elections

Figure 5.2.13 Opinion on Providing Speedy Elections

Opinion on the current system's ability to speed up elections is significantly greater
compared the previous system. This results may have been affected by some other aspects of the
system, such as ease of use and user interface, which may have influenced the users' ratings.

63

 Usefulness of the System
2% 0% 0%

16%
Very Useful

Useful
Neutral
Not Useful
Very Not Useful
82%

Figure 5.2.14 Usefulness of the System

Users gave good impressions on the system's usefulness. These impressions may have
been greatly influenced again by the experience provided by the system to the participants.
Lastly, Mr. Edward Banawa, head of the DSA, gave good impressions on the system
especially its responsive capability. He also expressed his desire for such a system to be
deployed. Although the actual deployment of the system is beyond the scope of the study, the
researchers emphasized that the system has the necessary capabilities needed. However, other
aspects in terms of network and database security must be taken into account for an actual
deployment.

5.2.3 Summary of Results

Based on the results gathered from the user evaluation conducted, the redesigned
electronic voting system gathered positive results in areas that this study aims to improve.
There were some instances that the participants asked of the researchers’ assistance
64

during the system evaluation. Nonetheless, the participants did not encounter any
significant problems that hampered their overall experience with the system. Adaptability
was also fast. Logging in and out, voting, among others were generally easy among all
users.

The flat user interface design was well-accepted by majority of the users,
although there were some who were not convinced with the system’s design. In terms of
the user interface design, system satisfaction, and ease of performing tasks, the current
system has significantly better rating and feedback from the users compared to the
previous system. As in seen in the figures above, there is no significant difference in the
ratings of the participants for different aspects of the system between PC and mobile
versions.

65

CHAPTER VI
CONCLUSION AND RECOMMENDATIONS
This chapter presents the conclusion and recommendations by the researchers based on
the results gathered and interpreted, as well as other comments from key personnel.
6.1 Conclusion
The researchers were able to attain the users’ needs with regards to the system and addressed
these in the study. The user-centered design approach in redesigning an existing system is
appropriate for it answered the user’s concerns that they experienced in the initial design.
Though this process is beneficial in general, the number of iterations of exposing the design to
the users may never be enough to satisfy all the users. Some users have differing opinions thus
the proponents made design decisions based on the majority’s point of view. This entails a
number of users still unsatisfied.

The researchers used Hypertext Markup Language (HTML) as the backbone of the website
development process and Cascading Style Sheets (CSS) for modifying the look and the format of
the system’s design which is simple and flat, providing users a straightforward user interface,
also the responsiveness of the system is made possible with the use of Bootstrap 3 making it
flexible to different platforms such as mobile devices. The undistributed database design of the
previous system has been resolved which made electronic election of multiple colleges
simultaneously possible during in the event of an actual election in MSU-IIT.
66

The evaluation phase, conducted using a PC and a mobile device, produced largely positive
results from the participants. The user interface was well-accepted and navigation through the
website was generally easy among the participants. Compared to the 2013 KASAMA Electronic
Voting System, the current system gained significantly better rating and feedback from the users
in terms of the user interface, ease of procedures, and overall system satisfaction.

It is concluded that the system is ready for the next stage of implementation, which is the
actual deployment in the institute. However, further tests must be conducted to gauge the
system’s security and ability to handle large numbers of simultaneous users as well as
unpredictable events like network and power interruptions.

6.2 Recommendations
The following are the recommendations of the researchers for future studies aimed at
improving this study:
1. Research on and providebetter measures in keeping the system updated in terms of
the user interface and functionalities.
2. Conduct additional iterations of user evaluations to obtain more substantial feedback
and better results.
3. Research on and possibly connect an updated system to the institute’swebsite.
4. Research on and provide better measures in safeguarding student votes as well as its
security from outside attacks.
5. Research on and provide methods to improve the system’s ability to handle errors,
network and power interruptions, and large numbers of users without crashing.

67

Furthermore, the researchers recommend theuse of other methodologies that
incorporate a user-centered approach that can deliver better system outcomes especially
on the user’s point of view.
BIBLIOGRAPHY
Book:
Hoisington, C.L., Minnick, J.L. (2013). Adobe Dreamweaver CS6. Canada: Nelson Education,
Ltd.
Endsley, M. (2003). Designing for Situation Awareness: An Approach to User-Centered.
Retrieved from
http://www.google.com.ph/books?id=eRPBkapAsggC&printsec=frontcover#v=onepage&q&f=f
alse
Gibbins, J. (2013). Encyclopedia Britannica. Retrieved from
http://www.britannica.com/EBchecked/topic/182308/election
Niederst, J. (2006). Web Design in a Nutshell. Retrieved from
http://books.google.co.uk/books?id=bdf4vS2n7N8C&printsec=frontcover#v=onepage&q&f=fals
e
Journals:
Friedman, V. (2014). A User-Centered Approach to Web Design For Mobile Devices. Smashing
Magazine. Retrieved from http://www.smashingmagazine.com/2011/05/02/a-user-centeredapproach-to-web-design-for-mobile-devices/
Campbell-Dollaghan, K. (2013). What is Flat Design?.Gizmodo. Retrieved from
http://gizmodo.com/what-is-flat-design-508963228
Clayton, S. (2014). Modern Design at Microsoft. Microsoft. Retrieved from
http://www.microsoft.com/en-us/news/stories/design/
Blogs:
Fidgeon, T. (2013). User-Centered design (UCD) - 6 methods [Schools]. Retrieved from
http://www.webcredible.com/blog-reports/web-usability/user-centered-design.shtml
Ghanta, R. (2013, March 20). Pulse - the heartbeat of BootstrapCDN [Business]. Retrieved from
https://www.leftronic.com/blog/pulse-the-heartbeat-of-bootstrapcdn/

68

Turner, A.L. (2014). The Next Web [Business]. Retrieved from
http://thenextweb.com/author/amberturner/
Literature Review:
Cabalhin, E., Dy Closas, K. A., & Langoyan, J. (2010). Requistion. Web-based Requisition
System (WebRS) for MSU-IIT Procurement Process.1-7.
Albaran, M.J., Bicoy, C.J., & Castillo, J. (2013). Electronic Voting System. KASAMA
Electronic Voting System.
Bongabong, K.R., Baldonado, K.J., & Laganao, K.J. (2012). Electronic Voting System. MSUIIT KASAMA Electronic Voting System.
Chua, I.C., Lasta, J.C., & Sangil, A.S. (2012).Electronic Voting System. MSU-IIT KASAMA
Online Voting and Tabulating System.
Bautista, C.H., Birao, A.M., & Roda, C.L. (2006). Electronic System. KASAMA Election
System (KASAMA-ES).
Web Sources:
Trubac, A. (2005). HTML(Hypertext Markup Language). HTML(Hypertext Markup Language).
Retrieved from http://searchsoa.techtarget.com/definition/HTML
Otto, M., & Thornton, J. (2011). Twitter Bootstrap. Twitter Bootstrap:LESS is more. Retrieved
from http://www.connected-uk.com/2013/11/twitter-bootstrap-less-is-more
PostgreSQL Global Development Group. (1995). PostgreSQL. Postgresql: The world’s most
advanced open source database. Retrieved from http://www.postgresql.org/about
Smith, G. (2009). Theme Thursday. 43 Must Read PHP Articles and Resources. Retrieved from
http://www.gracesmith.co.uk/43-must-read-php-articles-and-resources
Aihara, D.S. (2014). Model-View-Controller. Study About the Relationship Between the ModelView-Controller.1-149. Retrieved from
http://www.bth.se/fou/cuppsats.nsf/all/567e0c462fa33949c12576d4004573f1/$file/thesis%20%20diogo%20aihara.pdf
Harper, S. (2010). Election. Retrieved from http://en.wikipedia.org/wiki/Election
Berners-Lee, T. (1995, January). Web Content Accessibility Guidelines. Retrieved from
http://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines

69

APPENDIX A
User Testing on KASAMA Electronic Voting System
Scenario List
Scenario 1
Login into your account.

Scenario 2
Familiarize the system by navigating through the menu buttons.





Vote
Candidate menu
Accounts menu
Administrator menu

Scenario 3
Search for student information (ID number, name, voting status) using the search bar.

Scenario 4
Cast your vote through the Vote menu.

Scenario 5
Edit student:


Assign a BEI
70



Edit Password (ID number)

Scenario 6
View and print election results

APPENDIX B
User Test on KASAMA Electronic Voting System
Screening Questionnaire
Name: _________________________________________________________
College: _____

Age: _______

Contact No: _________________________

Email Address: _____________________________
Instructions: Encircle the answer of your choice
1. Please rate your computer skills.
a. Expert
b. Average
c. Poor
2. What is usually your purpose in using computers? You can choose more than 1.
a.
b.
c.
d.

School Matters
Games
Social Media
Other

3. Have you ever experienced using an electronic voting system before?
a. Yes
b. No
If yes, please rate your overall impression of the system in terms of its user interface and ease
in achieving your objectives
a. Excellent
b. Good
71

c. Bad
4. Are you willing to try the KASAMA Electronic Voting System?
a. Yes
b. No

Thank you for your time.
APPENDIX C
User Test on KASAMA Electronic Voting System
Pre-test Questionnaire
Name: ____________________________

College: __________

1. As a college student of MSU-IIT, what details would you want to know from the
KASAMA Electronic Voting System?
__________________________________________________________________
__________________________________________________________________
__________________________________________________________________

2. What are your expectations for the design of a KASAMA Electronic Voting System?
Please list at least three items.
(1)
(2)
(3)

_________________________________________________________________
_________________________________________________________________
_________________________________________________________________

72

APPENDIX D
User Test on KASAMA Electronic Voting System
Post-task Questionnaire
Rate the following tasks. Encircle your choice.
1. Login process.
Very Easy 1

2

3

4

5

Very difficult

4

5

Very difficult

4

5

Very difficult

4

5

Very difficult

2. Searching for student from list.
Very Easy 1

2

3

3. Voting for KASAMA and EC officers.
Very Easy 1

2

3

4. Viewing election candidates.
Very Easy 1

2

3

5. Editing student information (ID number, password, account type).
Very Easy 1

2

3

4

5

Very difficult

4

5

Very difficult

6. Viewing/printing election results.
Very Easy 1

2

3

73

7. Logout process.
Very Easy 1

2

3

4

5

Very difficult

APPENDIX E
User Test on KASAMA Electronic Voting System
Post-test Questionnaire
Encircle your answer. We encourage you to provide feedback and insights.
1. How was the process of navigating through the website using the menu buttons?
Very easy

2.

1

2

3

4

5

Very difficult

How easy/difficult was it for you to perform the tasks given?
Very easy

1

2

3

4

5

Very difficult

3. How satisfied are you with system's user interface design?
Very satisfied

1

2

3

4

5

Very unsatisfied

4. Please rate how satisfied you are with the system.
Very satisfied

1

2

3

4

5

Very unsatisfied

5. How much time do you think can you fully adapt in this system?
o Less than 10 minutes
o 10-15 minutes
o More than 15 minutes

74

6. How do you find the font style and color used on the user interface?
Very pleasant

1

2

3

4

5

Very unpleasant

Feedback:
___________________________________________________
___________________________________________________
___________________________________________________

7. In your opinion, how effective will the system be in providing speedy elections?
Very effective

1

2

3

4

5

Not effective

Feedback:
___________________________________________________
___________________________________________________
___________________________________________________

8. How would you rate the usefulness of the system you tested?
Very useful

1

2

3

4

5

Not useful

Feedback:
___________________________________________________
___________________________________________________
___________________________________________________

9. If you have additional feedback or insights regarding the system, we encourage you to let us
know.
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________

75

APPENDIX F
Article IX B of the Consitution and By-Laws of the Kataas-taasang Sanggunian ng mga Magaaral.
ARTICLE IX
CONSTITUTIONAL COMMISSIONS
B. COMMISSION ON ELECTIONS

Section 1 The COMELEC shall be composed of one faculty member and three students from
each college/school. The Director of Students Affairs (DSA) shall be the ex-officio Chairman of
the COMELEC.
a. The members of the COMELEC shall be chosen by the Director of the Department of
Students Affairs (DSA) in consultation with the Assistant Deans or Assistant Directors of
the different colleges/schools.
b. The DSA Director shall propose and prepare a budget of the COMELEC and submit
the same to the KASAMA President and the latter shall see to it that the money needed
for election expenses shall be available at least one month before the KASAMA general
elections.
c. Should the KASAMA fail to allocate the needed amount, the DSA Director is
authorized to withhold the said amount from the KASAMA general fund to ensure that
this would not delay the holding of the KASAMA general elections.

Section 2 The COMELEC shall have the following powers and functions:
a. Formulate campaign rules and regulations and other matters deemed necessary to
ensure free, honest and orderly election;
b. Approve and register candidates subject to the qualifications prescribed in Sec. 1 Art.
X of this Constitution;
c. Register and accredit political parties;

76

d. Decide on the number and location of polling places and the appointment of poll
watchers;
e. Announce election returns within two school days after the election;
f. Accept and act immediately on any complaint and/or motion for recounting which must
be filed within twenty-four (24) hours after the elections results are announced;
g. Proclaim all election winners on or before the fourth day after the election;
h. Suspend election as may be deemed necessary;
I. Announce failure of the election as may be required by circumstances; and
J. Enforce and administer all laws and regulations relative to the conduct of election.

77

APPENDIX G
KASAMA Electronic Voting System Survey Results (2013)

1

Timesta
mp

2

2/28/20
14
5:22:33
2/28/20
14
22:20:2
1
2/28/20
14
22:23:5
7
2/28/20
14
22:24:3
0
2/28/20
14
22:26:0
6

3

4

5

6

7

2/28/20

The
system
is
conveni
ent and
easy to
use

The
graphic
s,
colour,
media
elemen
ts, and
content
s are
clear
and
appeali
ng

Provide
s
appropri
ate
feedbac
k to user
respons
es

The
progra
m
runs
smoot
hly
withou
t delay

The
syste
m can
make
the
KASA
MA
Electio
n
faster

As a
whole,
you
are
satisfie
d with
the
KASA
MA
Electro
nic
Voting
Syste
m

Strongly
Agree

Strongl
y
agree

Strongly
Agree

Strong
ly
Agree

Strong
ly
Agree

Strongl
y
Agree

Strongly
Agree

Strongl
y
Agree

Agree

Strong
ly
Agree

Strong
ly
Agree

Strongl
y
Agree

Strongly
Agree

Strongl
y
Agree

Strongly
Agree

Strong
ly
Agree

Strong
ly
Agree

Strongl
y
Agree

Strongly
Agree

Strongl
y
Agree

Strongly
Agree

Strong
ly
Agree

Strong
ly
Agree

Strongl
y
Agree

Neutral

Disagr

Neutral

Neutra

Agree

Neutral

Comments

Course

Ye
ar

I've been wondering, what if the students
purposely or accidentally gave the wrong
student id number? Shouldn't you guys verify
that too? haha. Anyway, the System really is
GREAT.

77

8

9

10

14
22:26:4
6
2/28/20
14
22:27:0
9
2/28/20
14
22:31:0
5

2/28/20
14
22:33:2
0

ee

l

Agree

Agree

Agree

Agree

Agree

Agree

Strongly
Agree

Agree

Agree

Strong
ly
Agree

Neutra
l

Agree

Strongly
Agree

Strongl
y
agree

Strongly
agree

Strong
ly
agree

Strong
ly
agree

Strongl
y
agree

11
2/28/20
14
22:37:3
2

12

13

Neutral ako answer sa kun makapas2 cya sa
election, kai Gamay lng ganiha ang slots sa
pag vote, maybe, pwde tingali gamitun ang
comp.lab para daghan2 ang pwde maka vote.
Ganiha, it will cause a risk to borrow more
laptops of the student para daghai makabotar
in just one session. Pero payts kaau ganiha,
aus kaau! Superb kaau ang Election. Congrats!
:)
wala ko kabalo nga ID number diay ang
username. nangutana ma ko sa akong tapad
unsay ibutang sa username -_- haha.
there can be chances na ang student kay
manghulam ug ID sa lain, mao ang mupirma
and mangayo ug passcode. ani na problema,
dapat ang comelec kay mutan.aw jud ug ayo
ug mao ba ang naa sa picture sa ID ug ang
gagunit sa ID...OR there can be another
solution.? my concern is that, pag.abot sa
pag.check ug kinsa nay muboto and paghatag
sa passcode, possible gihapon na mka.vote
twice ang isa ka.student by using another
student's ID. hope ma.solbad ni na.problem. :)

2/28/20
14
22:40:0
5
2/28/20
14
22:41:3

Strongly
Agree

Agree

Agree

Agree

Strong
ly
Agree

Strongl
y
Agree

Strongly
Agree

Strongl
y
Agree

Strongly
Agree

Strong
ly
Agree

Strong
ly
Agree

Strongl
y
Agree

the KASAMA election would be better if this
system will be implemented :)

78

14

15

8
2/28/20
14
22:54:2
6
2/28/20
14
23:03:2
7

Strongly
Agree

Strongl
y
Agree

Strongly
Agree

Strong
ly
Agree

Strong
ly
Agree

Strongly
Agree

Agree

Strongly
Agree

Strong
ly
Agree

Strong
ly
Agree

Strongl
y
Agree

Gusto ko makabalo pagbuhat ani. Awa lang
mo. HAHAHAHAH.

BSIT

II

The whole system is great! Just improve more
on the graphics and media elements. Make it
more catchy and official-looking like add the
school's logo and kasama's, pwede pud SCS
logo para char, taga scs bitaw gabuhat! XD
JITS logo pud. hahaha! :D
It would be nice if we will not use our ID
numbers.. just the password itself can use to
login to the system.. Because it can create a
record or a database that can know who we are
voting..

BS-IT

3

ESETB

2

BSIT

3

BSIS

4

eset-b

3rd

16

2/28/20
14
23:43:0
7

Strongly
Agree

Neutral

Strongly
Agree

Strong
ly
Agree

Strong
ly
Agree

Strongl
y
Agree

17

3/1/201
4
0:46:40
3/1/201
4
0:06:45

Strongly
Agree

Agree

Agree

Agree

Strongly
Agree

Agree

Strongly
Agree

Strong
ly
Agree

Strong
ly
Agree
Strong
ly
Agree

Strongl
y
Agree
Strongl
y
Agree

3/1/201
4
1:54:57
3/1/201
4
6:10:42

Strongly
Agree

Neutral

Neutral

Agree

Agree

Neutral

Disagr
ee

Neutral

Strong
ly
Agree
Strong
ly
Agree

Neutral

BSIT

1st
Ye
ar

21

3/1/201
4
7:04:49

Strongly
Disagre
e

Neutral

Agree

1st
Ye
ar

3/1/201
4
6:42:08

Strongly
Agree

Strongl
y
agree

Agree

Strongl
y
Disagr
ee
Strongl
y
Agree

BSCS

22

Strong
ly
Disagr
ee
Strong
ly
Disagr
ee
Strong
ly
Agree

BSIT

4

18

19

20

Strong
ly
Disagr
ee
Strong
ly
Agree

Nice kaayo. Bahalag late ko sa klase nako
ganiha, naka vote japun ko maski naa ko sa
classroom. Haha. E implement na unta na sa
whole IIT para dili na time consuming and
hassle-free ang election. :)
Very easy og pwede ma access sa mobile if dili
naka makatagad sa linya. :D

*during when the user inputs the wrong
password, the lacks feed back after. not sure if
his/her password is still incorrect or if we lost

79

connection. :)
23

3/1/201
4
7:05:26

Neutral

Agree

Disagre
e

24

3/1/201
4
7:06:10

Strongly
Agree

Agree

Strongly
Agree

25

3/1/201
4
7:06:31

Strongly
Agree

Agree

Strongly
Agree

Neutra
l

26

3/1/201
4
7:07:02

Agree

Strongl
y
agree

Strongly
Agree

Strong
ly
Agree

27

3/1/201
4
7:35:46

Agree

Agree

Agree

Strong
ly
Agree

Strong
ly
Agree

28

3/1/201
4
11:31:1
1
3/1/201
4
12:34:4
1

Agree

Strongl
y
Disagr
ee
Agree

Neutral

Strong
ly
Agree

Strong
ly
Agree

Strongl
y
Agree

Agree

Agree

Strong
ly
Agree

Agree

29

Strongly
Agree

Strong
ly
Disagr
ee
Strong
ly
Agree

Neutra
l

Strong
ly
Disagr
ee
Strong
ly
Disagr
ee
Neutra
l

Strongl
y
Disagr
ee
Strongl
y
Disagr
ee
Strongl
y
Disagr
ee
Strongl
y
Disagr
ee
Agree

The issue of security and trust will be very
critical for this system. The concept of
automated election that is happening in the
national election covers the same problem but
still there's this hard copy of ballot that will
lessen the doubt for trusted election returns.

Okay lang man ang system. I mean, job well
done. Kuan lang diay, ang katong sa radio
buttons, naa unta'y clear button, kay naa ko'y
nadunggan nga if masayop lang ka'g click kay
di na dayon ma revert. Ma count na dyn to imo
gi vote, nasayop ra unta to. And also, it's also
good na gi integrate pod nnu sa mobile. Sa tab
man ko nag vote, and amazing experience.
Pero idk if sa browser lang to, pero mura sya
ug naka zoom lang man gd ang mga text. Like
kelangan paka mag scroll2 to the left and to the

BSIT

2n
dyr

BSCS

1
yr.

BSIT

3

BSIS

1st
ye
ar

BS CS

3rd

BSCS

4

BSIT

4

80

right. Naka word wrap nalang unta to para
scroll down paubos nalang. :) bcn wla rato na
wrap sa container. Aw :p

30

3/1/201
4
12:36:3
1

Agree

Neutral

Neutral

Agree

Strong
ly
Agree

Strongl
y
Agree

Well anyway, congratulations. Job well done jd
japon. ^___^
Technical Improvements:
System feedback would be much better if it
implemented on the client side instead of
server side. Actions such as clicking a button,
unclicking a button, and counting the number of
checkboxes checked should be provided real
time feedback(can be achieved using jquery
and ajax).
Using jquery and ajax can also improve
validation of input. In this way input are
validated even before submitting the whole
form.
Database implementation would be better if it
will support concurrency locks to ensure data
integrity(Hooray if this is implemented alreadyclap clap).

BSIT

4

Heuristic improvement:
It would be better if a photo of each candidate
will be provided in the UI, because some of the
students know the candidates better by face
than their names.
selections can also be improved if it would use
tiles(ala windows 8) with highlighting instead of
checkboxes and radio buttons(I just heard
someone yesterday complaining of the size).
Process Improvement:
The system did speed up the process of voting
and counting, however there are still a number
of steps before the actual voting process that
still slows down the whole process. As per
experience, the number of steps are as follows:

81

1. Look for your name in the master List
2. Print your signature in the separate voter's
list
3. Submit your ID number to the BEI and ask
for a password
4. Log-in with your account name and given
password
5. Confirm vote
6. Submit
These steps can be reduced up to 2-3 steps if
we integrate the biometric identification system
with the electronic voting system.
1. Submit identification through the biometric
system(the user will then be automatically
identified)
2. Select candidates to vote and confirm.
3. submit

31

3/1/201
4
12:36:3
1

Agree

Neutral

Neutral

Agree

Strong
ly
Agree

Strongl
y
Agree

Overall I would give a geisha bow for the
system and for the team who devoted time to
pull this off(you guys deserve a clap clap). I
know that this system can go a long way and
that you guys can carry out these
improvements(I'm pretty sure).
We can lend some helping hands if you would
need some.
for the love of SCS.
Hooray guys!
Congratulations.
Technical Improvements:
System feedback would be much better if it
implemented on the client side instead of
server side. Actions such as clicking a button,
unclicking a button, and counting the number of
checkboxes checked should be provided real
time feedback(can be achieved using jquery
and ajax).
Using jquery and ajax can also improve
validation of input. In this way input are

BSIT

4

82

validated even before submitting the whole
form.
Database implementation would be better if it
will support concurrency locks to ensure data
integrity(Hooray if this is implemented alreadyclap clap).
Heuristic improvement:
It would be better if a photo of each candidate
will be provided in the UI, because some of the
students know the candidates better by face
than their names.
selections can also be improved if it would use
tiles(ala windows 8) with highlighting instead of
checkboxes and radio buttons(I just heard
someone yesterday complaining of the size).
Process Improvement:
The system did speed up the process of voting
and counting, however there are still a number
of steps before the actual voting process that
still slows down the whole process. As per
experience, the number of steps are as follows:
1. Look for your name in the master List
2. Print your signature in the separate voter's
list
3. Submit your ID number to the BEI and ask
for a password
4. Log-in with your account name and given
password
5. Confirm vote
6. Submit
These steps can be reduced up to 2-3 steps if
we integrate the biometric identification system
with the electronic voting system.
1. Submit identification through the biometric
system(the user will then be automatically
identified)
2. Select candidates to vote and confirm.

83

3. submit
Overall I would give a geisha bow for the
system and for the team who devoted time to
pull this off(you guys deserve a clap clap). I
know that this system can go a long way and
that you guys can carry out these
improvements(I'm pretty sure).
We can lend some helping hands if you would
need some.
for the love of SCS.
Hooray guys!
Congratulations.
32

33

34

35

3/1/201
4
20:53:3
8
3/1/201
4
20:53:5
4
3/1/201
4
20:55:1
7
3/1/201
4
20:57:5
7

Agree

Agree

Agree

Agree

Agree

Agree

Informat
ion
System

3

Strongly
Agree

Strongl
y
Agree

Strongly
Agree

Strong
ly
Agree

Strong
ly
Agree

Strongl
y
Agree

BSIS

3

Strongly
Agree

Neutral

Strongly
Agree

Strong
ly
Agree

Strong
ly
Agree

Strongl
y
Agree

BSIT

1st

Strongly
Agree

Agree

Neutral

Neutra
l

Strong
ly
Agree

Agree

BSIS

3rd
ye
ar

BSIT

3

BSIT

1

ok kaau inyo system pero naa kot nadunggan
sa uban tao nga naa daw bug gamay pero
kung sa mobile kay ok ra kaau :)
i love you joseph and idol tka!

36

37

3/1/201
4
21:01:0
1
3/1/201
4

Agree

Neutral

Disagre
e

Strong
ly
Agree

Strong
ly
Agree

Neutral

Strongly
Agree

Strongl
y

Agree

Agree

Strong
ly

Strongl
y

unya naay natabang imo mga kauban??
Where do you get your data for the Student
IDs? i believed some ENROLLED Alumni can
vote.
It'll be better if there are more laptops or
mediums to be use to make the election more

84

38

39

40

41

42

43

21:01:1
1
3/1/201
4
21:02:0
5
3/1/201
4
21:05:3
2

3/1/201
4
21:17:1
6
3/1/201
4
22:01:3
0
3/2/201
4
0:30:36
3/2/201
4
20:33:4
8

Strongly
Disagre
e
Agree

agree

Agree

Agree

convenient and fast.

Strongl
y
Disagr
ee
Agree

Strong
ly
Disagr
ee
Strong
ly
Agree

Strongl
y
Disagr
ee
Strongl
y
Agree

marc albaran. idol! sure na ang future

BSCS

2n
d

BS IT

1

BSIT

3

BSIS

II

BSIT

1

ESETB

2

ESET-A

3

Strongly
Agree

Agree

Strongly
Agree

Agree

Strong
ly
Agree

Strongl
y
Agree

i like this idea. it would make voting faster than
ever. i like the way it looks, simple yet accurate,
no need to make additional graphics or
whatsoever, the important there is the system
itself, as a whole i am satisfied with this, and i
push natin to, para mapadali ang voting
process next election. GO SCS!!!! #wolSCSves
:D
Katung "unmark" thing. :) Tapos, ang
background-theme something! All in all, ayus
siya (y)

Agree

Agree

Neutral

Strong
ly
Agree

Strong
ly
Agree

Agree

keep it up

Strongly
Agree

Strongl
y
Agree
Disagr
ee

Strongly
Agree

Strong
ly
Agree
Neutra
l

Strong
ly
Agree
Disagr
ee

Strongl
y
Agree
Strongl
y
Disagr
ee

Disagre
e

Agree

Agree

Disagre
e

sure mo ato nga voting system? so very
disappointed ato. wala ninyu gi pa test sa
public daan, wat if sayup ang program ato? wla
pud ninyu gi tagaan ug enough space ang mga
tawo nga mu butar. SO VERY DISAPPOINTED
lageeeee. wat if mag failure of election?
unsaon man tu? HUNA-HUNAA SA UNTA OY
:(
SOVERYYYYYYYYYYYYYYYYYYYYYYYYYD
ISAPPOINTED.

44

4/4/201
4

Agree

Strongly
Agree

Strong
ly

Strong
ly

Agree

85

20:16:5
2

Agree

Agree

86

APPENDIX H
Screenshots of the System

Screenshot 1: Login Screen

Screenshot 2: Login Validations

Screenshot 3: Student Administrator Main Menu

87

Screenshot 4: BEI search

Screenshot 5: Ballots

88

Screenshot 6: Edit Account Type

Screenshot 7: Student Administrator Results

89

APPENDIX I
Curriculum Vitae
Jansen P. Castillo
037 Zone 4 Barangay BagongSilang
Lanao del Norte, Philippines, 9200
Mobile no.: +63905-602-8671
Email: [email protected]

“No one is dumb who is curious. The people who don’t ask questions remain clueless throughout
their lives.” –Neil deGrasse Tyson
PROJECT EXPERIENCE


2013 KASAMA electronic voting system
 Software Engineering Class team project
 As part of this class team project, worked on webpage design. Our team delivered
a functioning hotel booking system on the final submission. (CodeIgniter,PHP
and HTML Programming).

EDUCATION
Mindanao State University – Iligan Institute of Technology
School Year 2010-2014
Bonifacio Avenue, Tibanga, Iligan City, Lanao del Norte, Philippines
Bachelor of Science in Information Technology – Major in Multimedia Systems

La Salle Academy
2006-2010
Brother Raymund Jeffrey Street, Pala-o, Iligan City
Highschool/Secondary Education Diploma

90

TRAININGS OR SEMINARS ATTENDED


11thIligan City Computing Fair

September, 2013

MSU-IIT



Software Freedom Day

September, 2012

MSU-IIT

SKILLS AND INTERESTS


Web Design using HTML/CSS



Knowledge in multimedia development tools(Photoshop, Dreamweaver, Flash, After
Effects)



Blogging (Wordpress and Drupal)



Basic Java programming



Proficient in Microsoft Office Applications (MS Word, MS Excel, MS PowerPoint) and
Prezi Desktop Presentation Program



Computer Hardware and Software Installation and Troubleshooting



Photography

AFFILIATIONS/MEMBERSHIP


Knights of the altar of Saint Michaels parish Cathedral
 Member, S.Y. 2005 – 2010



La Salle Academy Alumni Association

PERSONAL INFORMATION
Nick Name: Jan

Place of Birth: Iligan City

Age: 21 years old

Citizenship: Filipino

Gender: Male

Languages Spoken: English, Tagalog, Cebuano

Legal Status: Single
Religion: Roman Catholic
Date of Birth: March 3, 1993

91

Raoul Kristoffer D. Celdran
015 Celdran Compound, Macapagal Avenue, Tubod
Lanao del Norte, Philippines, 9200
Mobile no.: +63916-427-5287
Email: [email protected]

"Now, if you know what you’re worth, then go out and get
what you’re worth. But you gotta be willing to take the hits,
and not pointing fingers saying you ain’t where you wanna
be because of him, or her, or anybody. Cowards do that and
that ain’t you. You’re better than that!" - Rocky Balboa
WORK EXPERIENCE
Brother Brew Traders, Corp.
Tubod, Iligan City
Data Encoder – Trainee
July 2014 – October 2014



Inputs sales and inventory reports into the system
Assisted in maintaining monthly and annual sales and inventory reports compilation

PROJECT EXPERIENCE


Hotel Booking System
 Software Engineering Class team project
 As part of this class team project, worked on webpagedesign. Our team delivered
a functioning hotel booking system on the final submission. (CodeIgniter,PHP
and HTML Programming).



Cowboys Hates Cockroaches flash game desktop application
 Game Development Class team project
 As part of this class team project, worked on storyboarding and design. Our team
delivered a functioning game on the final submission. (Adobe Flash CS5
Professional, Flash Programming).



Diamond Carwash Business
 Project Management Class team project
 As part of this class team project, worked on the logo. Our team delivered a mock
business project for our final.

92



Conducted and Presented Usability Test on Iligan Computer Institute(ICI) website
 Team project



University School Website Design
 Penn Foster online project

EDUCATION
Mindanao State University – Iligan Institute of Technology
School Year 2010-2014
Bonifacio Avenue, Tibanga, Iligan City, Lanao del Norte, Philippines
Bachelor of Science in Information Technology – Major in Multimedia Systems
Penn Foster College
May 2014 – September 2014
La Salle Academy
2006-2010
Brother Raymund Jeffrey Street, Pala-o, Iligan City
Highschool/Secondary Education Diploma
TRAININGS OR SEMINARS ATTENDED


11thIligan City Computing Fair
September, 2013
MSU-IIT
 Committee
 Conducted Game Exposition in Game Development class project

SKILLS AND INTERESTS










Web Design using HTML/CSS
Web Programming using PHP/Javascript
Database design and management in PostgreSQL
Knowledge in multimedia development tools(Photoshop, Dreamweaver, Flash, After
Effects)
Blogging (Wordpress and Drupal)
Basic Java programming
Proficient in Microsoft Office Applications (MS Word, MS Excel, MS PowerPoint) and
Prezi Desktop Presentation Program
Computer Hardware and Software Installation and Troubleshooting
Photography

93

AFFILIATIONS/MEMBERSHIP




Association of IIT Alumni Foundation, Inc. (AIITAFI)
 2010 – present
Junior Information Technology Society (JITS), MSU – IIT
 Member, S.Y. 2010 – 2014
La Salle Academy Alumni Association

PERSONAL INFORMATION
Nick Name: Topet
Age: 21 years old
Gender: Male
Legal Status: Single
Religion: Roman Catholic
Date of Birth: August 1, 1993
Place of Birth: Iligan City
Citizenship: Filipino
Languages Spoken: English, Tagalog, Cebuano

94

Nathaniel A. General
Purok I, Sitio Central
Brgy. Luna, 8400 Surigao City, Philippines
Mobile no.: +639358736016
Email: [email protected]
“Life is what we make it, always has been, always will be.” –Grandma Moses

WORK EXPERIENCE
Freelance Online Article Writer
August 2012 – October 2012
PROJECT EXPERIENCE


Electronic Class Record System
 Software Engineering Class team project
 Assigned in providing necessary documentation for the project.



Doodle Outbreak v1.0 (an Adobe Flash tower defense game)
 Introduction to Games: Theory and Design class team project
 In charge of the game design, graphics, and scripting.



Pepe’s Adventures (an Adobe Flash point-and-click courseware)
o Instructional Software Design and Development class team project
o Lead designer, tasks include illustrations and other graphics.



Granny’s Comfort
 Project Management and Quality Systems class team project
 A business proposal that aims to establish a business that provide equipment and
necessities for the elderly.



College Student Hub (a project proposal)
o Technical Writing class team project
o Assigned in providing necessary documentation for the project.



Usability Test on Iligan Computer Institute(ICI) website
 Class team project

95

EDUCATION
Mindanao State University – Iligan Institute of Technology(2010-2015)
Bonifacio Avenue, Tibanga, 9200 Iligan City, Lanao del Norte, Philippines
Bachelor of Science in Information Technology – Major in Multimedia Systems
TRAININGS/SEMINARS ATTENDED


11thIligan City Computing Fair
September, 2013
MSU-IIT
 Committee
 Conducted Game Exposition in Game Development class project

SKILLS AND INTERESTS









Graphic design and illustration
Adobe Applications (Photoshop, Illustrator, Flash)
Microsoft Office Applications (MS Word, MS Excel, MS PowerPoint)
Computer Hardware and Software Installation and Troubleshooting
Web Design
Project Management
Writing
Photography

AFFILIATIONS/MEMBERSHIP



Association of IIT Alumni Foundation, Inc. (AIITAFI)
 2010 – present
Junior Information Technology Society (JITS), MSU – IIT
 Member, S.Y. 2010 – 2014

PERSONAL INFORMATION
Nick Name: Nat-Nat, Natty, Yel

Date of Birth: June 21, 1993

Age: 21 years old

Place of Birth: Surigao City

Gender: Male

Citizenship: Filipino

Legal Status: Single

Languages Spoken: English, Tagalog,

Religion: Roman Catholic

Cebuano, Surigaonon

96

97

1.1 About the System
KASAMA Electronic Voting System is a system created for the yearly election of
officers intended for the KASAMA – the official supreme student government of the Mindanao
State University-Iligan Institute of Technology. Using the decade old election system to collect
votes is no longer considered efficient due to the various recurring errors. So time has arrived
that the paper based traditional voting system which has already proven itself an inefficient and
slow procedure is about to change. The system that is being followed currently, from data
collection procedure to counting of the votes is a manual process. So, we are proposing an
electronic voting system for the institute. Users of the system are able to manage student and
candidate profiles. The system also provides password-protected user accounts for data security.
Moreover, the system also offers the users to view the student reports, candidate reports and
voting result reports. These reports can be retrieved whenever it is needed, may it be daily,
monthly or annually. Therefore, switching from manual system to a computerized system would
help the institute to achieve efficiency, consistency and data integrity for the KASAMA voting
process.

1.2 Intended Users and System Features
The system provides four user types: main administrator, student administrator, Board of
Election Inspector (BEI) and the student. Each user is required to log in first before he/she can
access the system and to log out before he/she can exit from the system. Table 1.1 illustrates the
system’s features including the different access rights for different user types.

System Features Main
(DSA)

Admin Student Admin

Upload
List

Student 

View
List

Student 



Edit
Type

Account 



Edit ID number





Edit password





Student 



Search

BEI

Student




98

Profile
Student 

View
Profile

Select Candidate



View Candidate



Delete Candidate



Cast Vote
Print
Result

Election 













Table 1.1 Table of system and corresponding access limitations
1.3 Operating Environment
To ensure maximum system performance, the work station at least have the following
requirements.





One workstation where the central database resides
Three or more workstations connected by a router
PostgreSQL Server installed in every workstation
WAPPSTACK cross-platform web server solution stack package installed in every
workstation

1.4 Preliminary Requirements
For security and access control purposes, users must be logged-in order to access the
system. Refer to the table below for the default log-in combination for each type of user.
Main Administrator: http://localhost/election/kasama/dsa
Username

Admin

Password

DSA Password

Student Administrator: http://localhost/election/kasama
Username

ID number

99

Password

Student Password

Account Type

Admin

College

College

BEI: http://localhost/election/kasama
Username

ID number

Password

Student Password

Account Type

BEI

College

College

Student: http://localhost/election/kasama
Username

ID number

Password

Student Password

Account Type

Student

College

College

1.5 Conventions
The user manual follows a font convention for easier access. This system uses Helvetica
for all buttons, confirmations, greetings and labels. Screenshots used in this Manual are in
Windows 8.1.
1.5.1 Buttons
Buttons

Description
This button is used to log in the system.
This button is used to cancel actions in the
system.

100

This button is used when the user wants to save
the record in the database.
This button is used to submit and store the
votes in the database.

1.5.2 Icons
Icons

Description
This icon is used when the administrator would
like to print the voting result.
This icon is used to indicate that the student
has voted already.
This icon is used to indicate that the student
hasn't voted yet.
This button is used to add candidates into the
database by choosing a student.
This icon is used when the administrator wants
to delete a record or a single record in the
database.
This button is used when the user wants to edit
a record in the database.
This icon is used when the administrator wants
to delete all records from the database.

1.6 Contact Us
For questions, comments and suggestions, e-mail us at the following:
Name

Email Address

Celdran, Raoul Kristoffer D.

[email protected]

101

Castillo, Jansen P.

[email protected]

General, Nathaniel A.

[email protected]

Chapter 2: Getting Started
2.1 Login Screen (Main Administrator DSA)
The Log-in Screen (Figure 2.1) appears once the system is executed. When using the
system for the first time, the user should use the combination of username and password as stated
in the (1.4 Preliminary Requirements). The user should click "log-in" button to access the
system.

Figure 2.1 Login Screen

Figure 2.1 Prompts the following if an error occurs.
2.2 Login Screen (Students)
The Log-in Screen (Figure 2.2) appears once the system is executed. When using the
system for the first time, the user should use the combination of username, password, account
102

type and college as stated in the (1.4 Preliminary Requirements). The user should click "log-in"
button to access the system. Also, this is the common module used by the three different
accounts of students which are student admin, BEI(Board of Election Inspector) and the students
in general who are only voters.

Figure 2.2 Login Screen

Figure 2.2 Prompts the following if an error occurs.
Chapter 3: Main Administrator and Candidate Module (DSA)
The first user is the main administrator. Upon successful login, you will be directed to the
main menu as seen in Figure 3 Main Administrator Main Menu.

103

Figure 3 Main Administrator Main Menu
Welcome to the Main Administrator main menu. On the upper part of the main menu
screen, you will see a navigation bar containing tasks that the Main Administrator can do. First,
note that you can log out at any time by clicking on the [Logout] button on the upper right
portion of the screen. Upon doing so, you will be directed back to the Login Screen (Main
Administrator DSA - Figure 2.1).
3.1 Guide Strip
The guide strip on the middle of the page shows the steps of the tasks the main
administrator can do. Steps are labeled from "left to right" as shown on Figure 3 which are the
sequences of task.
3.2 Additional Tasks
All of the tasks are simply discussed on the Guide Strip above. However, some
responsibilities are not part of the sequence of tasks which are discussed below:
3.2.1 Deleting of Students
As shown on Figure 3 on the "Add Students" section, the red trash icon must be
clicked in order to delete all student lists.

104

Figure 3.2.1 Delete Students
Figure 3.2.1 shows the "Add Students" Section, and by clicking the red trash icon, all
students will be deleted, this can be done preferably every time before elections because new
student list will be provided.

Figure 3.2.1 Prompts the confirmation box
As shown on the confirmation box, the student list will fail if candidate lists are not
deleted first.
3.2.2 Deleting of Candidates
Figure 3.2.2 shows the list of candidates, the purple minus icon must be clicked in order
to delete a single candidate.

Figure 3.2.2

105

Figure 3.2.2 Prompts the confirmation box
As shown on the confirmation box, the main administrator can still decide to continue or
prevent the action.
3.2.3 Deleting (all) Candidates
Based on Figure 3, on the "View Candidates" section, the main administrator must
choose on the list of colleges or from the KASAMA Institute candidates on what list to delete
first.

Figure 3.2.3 List of Colleges and the KASAMA Institute

Figure 3.2.3 Delete (all) Candidates
After choosing from the list, the user will be redirected to the candidates page, like as
shown on Figure 3.2.2, a red trash icon is displayed on the lower left corner of the page.
106

Figure 3.2.3 Prompts the confirmation box
As shown on the confirmation box, the main administrator can still decide to continue or
prevent the action. However on deleting the candidates, the main administrator must choose from
the List of Colleges and the KASAMA Institute as shown on Figure 3.2.3 in order to delete all
candidates from a specific department.
Chapter 4. Student Administrator Module (College)
The second user is the student administrator that has been assigned by the DSA for every
college. Upon successful login, you will directed to the main menu as seen Figure 4 Student
Administrator Main Menu.

Figure 4 Student Administrator Main Menu
Welcome to the Student Administrator main menu. On the upper part of the main menu
screen, you will see a navigation bar containing tasks that the Administrator can do. First, note
that you can log out at any time by clicking on the [Logout] button on the upper right portion of
the screen. Upon doing so, you will be directed back to the Login Screen (Students - Figure 2.2).

107

4.1 Guide Strip
The guide strip on the middle of the page shows the steps of the tasks the main
administrator can do. However, steps are not sequential, the strip serves only as a guide for the
student administrator.
Chapter 5. Board of Election Module (BEI) Module
5.1 [VIEW STUDENT LIST]
The third user is the BEI which is assigned by the student administrator. Upon successful
login, you will be directed to the main menu as seen in Figure 5.1.1 BEI Main Menu.

Figure 5.1.1 BEI Main Menu
Figure 5.1.2 [Search student]

Figure 5.1.2.1
Hence, it shows that the searched student hasn't voted yet.

Figure 5.1.2.2
Hence, is shows that the searched student has already voted.

108

5.2 [VOTE]
As a student BEI, you won't have to log-in to a student voters account since you also
have a ballot in your own module. First of all, click the BEI tab and then click Vote, and you will
be directed to the screen in Figure 5.2.1 [BEI Exclusive Ballot] where you can vote.

Figure 5.2.1 Ballot

Hence, if you are successful you will directed to Figure 5.2.2 Vote for CEC to vote for your
College Executive Council(CEC).

109

Figure 5.2.2 Vote for CEC

Hence, if there are no errors, you will redirected to the Thank you screen shown on Figure 5.2.3
Thank you screen.

Figure 5.2.3 Thank you screen
5.3 [CEC Results]
If you wish to view the College Executive Council(CEC) results on your college, they are always
available at the BEI tab and click the [CEC Results] button, and you will directed to Figure
5.3.1 CEC Results. In case you might be wondering, the Election results for the whole
university will only be available in the Department of Student Affairs(DSA).

110

Figure 5.3.1 CEC Results
Chapter 6: Student Module
6.1 [VOTE]
Upon successful log-in of the student he/she will then be directed to the electronic ballot
shown in Figure 5.2.1, the same as what the BEI will see on the system.

111

Sponsor Documents

Or use your account on DocShare.tips

Hide

Forgot your password?

Or register your new account on DocShare.tips

Hide

Lost your password? Please enter your email address. You will receive a link to create a new password.

Back to log-in

Close