-
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
-
i
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.
-
ii
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
-
iii
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
-
iv
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
-
v
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
-
vi
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
-
vii
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
-
viii
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
-
1
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
-
2
responsible for conducting the annual election for the
Kataas-taasang Sanggunian ng mga Mag-
aaral (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 COCs, 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.
-
3
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.
-
4
Figure 1.1.1: KASAMA organizational chart
-
5
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.
-
6
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.
-
7
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.
-
8
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).
-
9
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
systems limited capabilities in terms of users 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
-
10
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 users 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 DSAs office and
the rest will be distributed to each college in the
university.
2. Main Administratorthis main administrator is the Commission
on Elections Ex-
Officio 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.
-
11
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.
-
12
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.
-
13
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).
-
14
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
ApplesiOS 7 and
Microsofts 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
-
15
preferences depending on a systems service and situation. It
states that the philosophy of user-
centered-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 user-
centered 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:
-
16
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, lets 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
-
17
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 1024768 desktop design.
Even though many smartphone
-
18
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
-
19
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-
statistical
Low Design
& evaluation
Card Sorting High Statistical High Design
Participatory
Design
Low Non-statistical Low Design
Questionnaires Low Statistical High Requirements
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.
-
20
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.
-
21
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.
-
22
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.
-
23
Moreover, the system was designed to accommodate only one
college. Considering that
the KASAMA elections is an institute-wide affair, the mentioned
systems 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.
-
24
Figure 2.3.2 Add Candidate Screen
Figure 2.3.2 shows that adding candidates required the manual
input of the
candidates name, making it susceptible to human error.
Figure 2.3.3 Ballot
-
25
As Figure 2.3.3 shows the ballot, the systems 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.
-
26
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 web-
based 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
-
27
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
-
28
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.
-
29
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.
-
30
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
(2012)
MSU-IIT
KASAMA
Online
Voting and
Tabulating
System
KASAMA
Election
System
(KASAMA-
ES)
MSU-IIT
KASAMA
Electronic
Voting
System:
Redesigning
for Usability
Student/Voting
Module
Admin Module
Student Admin
Module
Student Admin
Exclusive Ballot
Registration
Module
-
31
Log-in Module
Board of Election
Inspectors
Module
College Board of
Election
Inspector(BEI)
Exclusive Ballot
Responsive User
Interface
Menu and
Buttons User-
Friendly
Interactivity
Pleasant website
design overall
user interface
tone and hue
Font Style
Readability
Distributed
Database
-
32
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.
-
33
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
-
34
(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
-
35
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.
-
36
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 systems 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.
-
37
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.
-
38
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
-
39
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
-
40
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.
-
41
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
-
42
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 systems behavior as experienced by
the user. It gauges the
users 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 systems database will be PostgreSQL. It will be
used for storing, modifying, and
retrieving obtained information.
-
43
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
-
44
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
users 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 users overall
experience after
using the system. Questions are related to the systems
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
-
45
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.
-
46
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 three-
dimensional 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
-
47
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.
-
48
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 DSAs 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.
-
49
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:
-
50
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
-
51
Figure 4.4.2 Student Administrator flowchart
-
52
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
-
53
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.
-
54
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.
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
12%
7%
10%
7%
7% 40%
5%
12%
Participants
CASS
CED
CSM
COE
SET
SCS
CON
CBAA
-
55
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).
-
56
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
-
57
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)
-
58
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).
-
59
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:
-
60
Website Navigation
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
77%
18%
3% 2% 0%
Very Easy
Easy
Neutral
Difficult
Very Difficult
-
61
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.
-
62
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
Figure 5.2.12 Adaptability to the System
81%
19%
0%
less than 10 minutes
10-15 minutes
15 minutes or more
-
63
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.
-
64
Usefulness of the System
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
82%
16%
2% 0% 0%
Very Useful
Useful
Neutral
Not Useful
Very Not Useful
-
65
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 systems
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.
-
66
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 users 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 majoritys
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 systems 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.
-
67
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 u