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