MSU IIT KASAMA Electronic Voting System

MSU-IIT KASAMA Electronic Voting System: Redesigning Through a User-Centered ApproachAn Undergraduate Thesis Presented to the Faculty of the Information Technology Department Mindanao State University - Iligan Institute of Technology In Partial Fulfillment of the Requirements for the Degree of Bachelor of Science in Information Technology By Castillo, Jansen P. Celdran, Raoul Kristoffer D. General, Nathaniel A. Romelyn I. Ungab Faculty Adviser October 2014 ABSTRACT Every year, the Mindanao State University – Iligan Institute of Technlogy (MSU -IIT) conducts elections for the officers of the Kataas-Taasang Sanggunian ng mga Mag-aaral (KASAMA) and College Executive Councils (CECs). The election of these students is important for they represent the whole student body of the institute and are responsible for organizing, coordinating, and directing student affairs in the institute. A number of systems have been developed for automating the manual process of elections, with the most recent one tested during the 2013 KASAMA elections at the School of Computer Studies (SCS). The goal of this study is to redesign the recent KASAMA Electronic Voting System by addressing problems encountered by previous systems which led to their unsuccessful deployment. Through a user-centered approach, the researchers aim to develop a system that is responsive, simple, and easy to use while providing the necessary capabilities for a successful deployment. A user testing of 44 participants was conducted to evaluate the system and provide feedbacks that helped the researchers improve the system. After the testing and updating of the system based on the participants feedback, information gathered by the researchers provided signs of positive improvement on the latter. i ACKNOWLEDGEMENT We, the proponents of this project, are very thankful... To God the most high and our infinite provider, the one who we believe in. We thank You for giving usthe strength to finish our study and meet our deadlines, for without You we would not have been able to. To our energetic, kind and supportive adviser Prof. Romelyn I. Ungab, for always believing that we can do better and for serving as an inspiration for us to get the best results for our study. To our panelists, Prof. Aloha Cristopher H. Ambe and Sir Erik Louwe R. Sala, this study would have been anything less without your corrections and suggestions, we thank you for your guidance. To our friend Demby Abella, for your help on SQL and normalizations. Our project would have been incomplete without the principles for backend programming that you imparted on us. To our close friends and loved ones, Liz, Irene, and Ica, we are grateful and thankful for your support, you were always our "source of constant strength and inspiration". To our batch mates, it is sad to think about the separation and the memories that we had for years. Our paths may change, but the connections and bonds will always be there, no matter the distance. Last but not the least, to our parents, brothers and sisters, and the people we love and those who love us, thank you for your continual support and for understanding our lives as students. We are grateful that we were able to conquer another chapter of our lives and be ready for the next; without you, this would have been far from being possible. - Jansen, Raoul, Nathaniel ii .....................3.....TABLE OF CONTENTS CHAPTER I: RESEARCH DESCRIPTION ..................... 18 2.................... 21 2.........................6 Definition of Terms .............2......................................................................... 9 1.............................................. 10 CHAPTER II: REVIEW OF RELATED LITERATURE .....3 Electronic Voting Systems ............1 Background of the Study ......................................1 Specific Objectives .................................1................... 22 iii . 1 1....................................3..........................................................3......................2............ 9 1........................... 13 2.............................................1 Design for Situation Awareness: An Approach to User-Centered Design 14 2........................................... Understanding Your Users ....................................3 General Objective ..................................... 13 2...1 KASAMA Electronic Voting System (2013) ................... 9 1.......................... 9 1....................................1 Flat Design .......................2.........................1............................1 Screenshots of the System ............ Design With Mobile Considerations ............. 1 1......................................................2 Statement of the Problem ..........................1 Web Design . 10 1.. Prioritize Mobile Users ................................................................ 21 2............2 User-Centered Design ............6 Methods ......................... 17 2............................. 14 2............................................. 16 2.................4 Scope and Limitations of the Study ........5 Significance of the Study .........2 A User-Centered Approach to Web Design for Mobile Devices 15 1............................ 14 2.........3 User-Centered Design (UCD) ..................... 16 3....... Assess Current Situation .... 17 4........................................................ .................4 Implementation and Evaluation ..... 42 iv ................. 40 3...............2........................ 35 3.......4....2.......................3 Interactivity ..........3............2 Board of Election Inspector Module...... 40 3...........................1 MSU-IIT KASAMA Electronic Voting System (2013) .............................................. 27 2......... 32 3.............................................................3...........................................................................3 Content Analysis ...........................................2 ADDIE Model ................................................3 MSU-IIT KASAMA Online Voting and Tabulating System ........2.........1 Graphic Design ......................2.............................. 42 3................... 35 3............... 36 3.............2..4 KASAMA Election System (KASAMA-ES) .. 37 3................4 System Design .......................3...................... 35 3............................................. 41 3...5..................................2 MSU-IIT KASAMA Electronic Voting System (2012) ...............4 Summary of Related System ........................................3.2 Mouse Click ............ 37 1...... 28 2....... 34 3...........................................................2 Learner Analysis ........................... Color .....5 Web-Based Development Tools .................3.. 36 3..........4....................... 38 3.2.....................................................2....... 42 3...... 33 3............................................................... 41 3...............................................................................1 Administrator Module...........3........2...2..................................................................... 37 2......2........4........... 29 CHAPTER III: CONCEPTUAL FRAMEWORK ................................................................ Color Harmony .....................1............1 User-Centered Testing and Evaluation . 24 2.................................1 System Evaluation ................3..................1 Analysis Phase .....3................... 41 3.. 36 3...2.........................1 Front-End Development ............1 Text Input .......3 Student Module ...................... ...................................2.................................................................................................................... 53 5............................................... 67 APPENDIX A ................... 44 4.......................... 70 APPENDIX C ............................................ 48 CHAPTER V: RESULTS AND DISCUSSION ...........................3 Summary of Results ..........4 Flowcharts ................................................................................................................3..................... 65 6.. 75 APPENDIX G ...................... 90 v .............. 69 APPENDIX B ..............2................................................................................................................................................... 63 CHAPTER VI: CONCLUSION AND RECOMMENDATIONS .............................2 Theoretical Framework ..............................................................2 Post-Test Results ............................... 58 5..... 72 APPENDIX E .......................................................................... 46 4.................. 44 4...........................1 Distributed Database ..................... 71 APPENDIX D ........................................................1 Conclusion ..........................................................1 Test Results .....2..................................CHAPTER IV: DESIGN ................................................................................................................2 Recommendations ..........................2 User-Centered Test and Results ................. 53 5....................................................................................................................................... 54 5............................. 87 APPENDIX I ............. 44 4.............................................................. 66 BIBLIOGRAPHY ........................ 65 6....3 Deployment Diagram ...................1 Post-Task Results ........................................................................................................................................................................................................... 77 APPENDIX H ..................................... 73 APPENDIX F ........... 47 4...................... 53 5..........................................1 Overview of the System ..................................................................................................................................................... ....... ....4 Summary of Related System ..............USER MANUAL .................. 26 Table 2.........................................1 Common Color Meanings ............................3............................6 Methods ... 29 Table 3.................................................1 User-Centered Design (UCD) .............2................... 19 Table 2................................2 User Interface ............................. 38 vi ...........................................3...... 97 LIST OF TABLES Table 2............3............................. 25 Table 2.......3 Business Rules ....................................... ........ 48 Figure 4......................... 39 Figure 4................................2 A color scheme based on complementary colors .....3 Deployment Diagram . 47 Figure 4.........3....2...... 4 Figure 1...............................4..................3............ 51 Figure 4.........................4.............2...........2 Filing of candidacy flowchart ...1................................ 6 Figure 1................................................3 A color scheme based on nature .....2 Student Administrator flowchart .......1 A color scheme based on analogous colors ..3.....................................1...............4 Counting flowchart ............................................................1..................................1 Login Process ................. 32 Figure 3........ 24 Figure 3 Conceptual Framework ................... 50 Figure 4..........................1 KASAMA organization chart ................................................3 Ballot ......2 A User-Centered Approach to Web Design for Mobile Devices .........................................4..................... 39 Figure 3.......1 Percentage of Participant Turnouts ............. 8 Figure 2... 5 Figure 1........... 7 Figure 1.....................................2........2..............................................2 Theoretical Framework ................ 53 Figure 5................................................... 34 Figure 3.LIST OF FIGURES Figure 1.............................................1.....................................................................................3 BEI flowchart ............................................................... 23 Figure 2.......................................................................................................................5 Fishbone Diagram of the problem ....................4. 23 Figure 2. 39 Figure 3...1 Main Administrator (DSA) flowchart ...........................................2 ADDIE Model ......................................................1 Login Screen ............. 16 Figure 2..........................3 Voting flowchart ..2..................................1................ 52 Figure 5. 45 Figure 4. 54 vii .................................2 Add Candidate Screen ..........4 Student (Voter) flowchart .... ...................................2.........2.................................................................11 System Satisfaction ............................................ 61 Figure 5...... 63 viii ......................................2...................7 Logout Process ...................8 Website Navigation ....2........2.....................12 Adaptability to the System ...........................2 Search Student ......................................................................... account type) 56 Figure 5..4 Viewing Election Candidates .............................. 61 Figure 5.................................. 59 Figure 5. 60 Figure 5..................2.....................Figure 5............................ 55 Figure 5...14 Usefulness of the System ...................6 Viewing/printing election results ................. 56 Figure 5.. password.................2. 59 Figure 5.................10 User Interface .......................5 Editing student information (ID number.........2..............................................13 Opinion on Providing Speedy Elections .....9 Ease of procedures ............................ 62 Figure 5................ 57 Figure 5...........3 Voting for KASAMA and EC officers .....2............... 58 Figure 5... 55 Figure 5.2..........2............................2............2. optical scan voting systems and specialized voting kiosks which can also involve transmission of ballots and votes via telephones. including direct electronic recording (DER) touch screens or optical scanners. private computer networks. to record their vote for President. Critics maintain that without a paper trail. E-voting technology can include punched cards. 2011). or smart card before being sent to a centralized location where tabulation programs compile and tabulate results. Electronic votes are stored digitally in a storage medium such as a tape cartridge. DSA is also 1 . It also supervises and regulates student activities of campus-based organizations as well as assist student leaders.1 Background of the Study According to Gibbins (2013). could affect election results (Rouse. 1.Iligan Institute of Technology (MSU-IIT) involves the office of the Department of Student Affairs (DSA). or even poorly-written programming code. election is “the formal process of selecting a person for public office or of accepting or rejecting a political proposition by voting”. diskette. or the Internet. a 30 percentage estimate of the voting population in the United States used some form of e-voting technology. The election for the student council of Mindanao State University. The DSA is the office in the Institute which is responsible for providing programs that will enhance the growth and development of the students. Advocates of e-voting point out that electronic voting can reduce election costs and increase civic participation by making the voting process more convenient. recounts are more difficult and electronic ballot manipulation.CHAPTER I RESEARCH DESCRIPTION Electronic voting (also known as e-voting) is voting using electronic systems to aid casting and counting votes. In 2004. The office approves or disapproves the application under given qualifications. Under KASAMA is the CEC. Before an election is conducted. It is composed of a governor. The complete qualifications are stated in Section 1 of Article IX of the Constitution and By-Laws of the KASAMA (See Appendix F). 2 . These officers govern in the College level down to the Department level. KASAMA is also responsible for organizing. as well as represent the students in the external student affairs. They represent the students in all policymaking body of the Institute when necessary. The KASAMA is the supreme student council of MSU-IIT. The CEC also supervises programs and activities conducted by various departments under its jurisdiction. 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. Last day of campaign will be on the day before the election. the college. the position and the party list. It is composed of a president. Together with the Certificate of Registration (COR) and the Certificate of Good Moral Character. coordinating and directing student activities in the Institute. the COC will then be submitted to the office of the DSA. After the deadline of the submission of COC’s. The COC contains the name of the applicant. the DSA examines each COC. a vice president and 12 senators who govern in the Institute level. a vice governor and 8 board members.responsible for conducting the annual election for the Kataas-taasang Sanggunian ng mga Magaaral (KASAMA) which also includes the election for the College Executive Council (CEC). Official candidates are now given a maximum of 15 days to campaign. The election is conducted every3rd Friday of February and will be held in secret balloting. Enrolled students in the Institute are given the right to vote and elect a new set of officers who will govern for the next academic year. Each college has their own precinct. On the day of the election, the voter which is the student will look for their name in the master list provided. After the voter found his or her name, he or she will proceed to the member of the COMELEC assigned in the precinct. The voter will sign on the space before his or her name on the copy of the master list and then the voter is then given a ballot. After the voter casts his or her vote, the ballot is dropped into the ballot box and the voter leaves the precinct. After the voting period is closed, ballot boxes from all schools and colleges are brought to an area where members of the COMELEC can start the manual counting. One member examines each ballot and speaks the name of the candidate who gets the vote. A vote is represented by a tally stick. Another member of the COMELEC tallies the vote on a sheet of paper and another member on a sheet of Manila paper. After the last ballot has been examined and the last vote has been tallied, members of the COMELEC then count the total number of votes by counting the total number of tally sticks recorded. The DSA releases the official results and proclaims the winners of the election. 3 Figure 1.1.1: KASAMA organizational chart 4 Figure 1.1.2: Filing of candidacy flowchart Figure 1.1.2 shows the required documents for the manual filing of candidacy process in the DSA. It is required first that that the student is enrolled in the following semester to avail a COR which is one the requirements for filing, and in the end the DSA will be the one to determine if the student is qualified or otherwise. 5 Figure 1.1.1.3 shows the requirements and the flow of the manual voting which is still being practiced now in MSU-IIT. 6 . 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.3: Voting flowchart Figure 1. 4: Counting flowchart Figure 1. the flow keeps on looping until the ballot has been tallied.4 shows the manual counting flow of the KASAMA election.Figure 1.1. 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. 7 .1. date setting of election without user-interface.1. undistributed database for other colleges to avail the system. the people are still not satisfied with the systems mobile unresponsiveness. The problems about the system are illustrated on the diagram above.5: Fishbone Diagram of the problem Figure 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. For full details of the results and comments on last year's 2013 test results (See Appendix G).1. 8 . adding of candidates and no option for voting on BEI's.Figure 1. 1. simple and easy user interface for its intended users while providing the necessary capabilities for an improved deployment. design.3 General Objective To redesign the 2013 KASAMA Electronic Voting System through a user-centered design approach that is responsive. To evaluate the system through user testing. To use Hypertext Markup Language (HTML) as the backbone of a website development process. 5. 2.1 Specific Objectives The following specific objectives are necessary to attain the general objective: 1. Furthermore. 4.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. This study does not cover the actual deployment of the system throughout the institute.3.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. 1. These factors caused the system’s limited capabilities in terms of user’s satisfaction during its initial deployment. 3. 1. although providing the necessary capabilities for such deployment is included. and features. To develop a mobile responsive user interface using Bootstrap 3. To use Cascading Style Sheets (CSS) for modifying the look and the format of the system.1. profound methodologies for security aspects such as 9 . To use flat design in the design of the menu and the content of the system. 2. Since the counting of votes is automated. This study will develop a system that aims to help eliminate human error in the manual counting of votes and input of candidates. Distributed Database .database and network security that accompanies with an actual deployment is not included in the study. Board of Election Inspector – the BEI is the one assigned by the DSA to assist in handling the elections. 4. 10 .6 Definition of Terms 1.the student administrator is the one assigned by the main administrator for each college and handle the elections on his/her precinct. 3. This study will serve as a reference for other researchers that aim to improve user experience in their studies. the manipulation can be prevented.5 Significance of the Study The redesigned KASAMA Electronic Voting System will help resolve issues encountered by the previous system.the main database will be designated for the DSA’s office and the rest will be distributed to each college in the university. There is less emphasis on user’s needs in system design. help speed up elections. 1. Student Administrator . Main Administrator–this main administrator is the Commission on Elections ExOfficio Chairman of the KASAMA. 1. and improve the overall user experience. User-centered design approach is a less chartered design path among Information Technology students in this Institution. HTML is an acronym for Hypertext Markup Language. 9. 2013). 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. and buttons. Web design normally describes the design process of the front-end (client side) design of a website with the use of markup language. 8.a process not constrained to interfaces or technologies in which the needs. interface design.a voter is a bona fide student of MSU-IIT enrolled in the semester at the time the election was held. The markup tells the Web browser how to display a Web page's words and images for the user.Bootstrap is a collection of tools for creating websites and web applications (“Pulse – the heartbeat of BootstrapCDN”. such as boxes. or textures that give them a three-dimensional look (The Next Web.a style of interface design in which elements. 6. and limitations of end users of a product. 10. 11 . Web Design . gradients. service. It contains HTML and CSS-based design templates for typography. To be able to vote. 2013). 2014). navigation and other interface components.5. image frames. 7.refers to the production and maintenance of websites. It encompasses different skills and principles such as graphic design. HTML . and user experience design. the student must approach the BEI on the precinct to ask for his/her password to login. buttons. as well as optional JavaScript extensions (“Twitter Bootstrap : LESS is more”. wants. Flat Design . Bootstrap . According to Margaret Rouse in 2005. User-Centered Design . forms. Student Voter . lose any type of stylistic characters such as drop shadows. system or process are given extensive attention at each stage of the design process. CSV stands for Comma Separated Values. CSV File . 12 .11. 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. Vice President. Web design normally describes the design process of the front-end (client side) design of a website with the use of markup language. 13 . Senators and the College Executive Council composed of a Governor. especially of members of a political body (Harper. During the early stages of the World Wide Web (late 1980s to early 1990s). There was no integrated approach to graphic design. 2010). web design evolved in a rapid pace (Niederst. as well as the emergence of new technologies such as Cascading Style Sheets (CSS) and JavaScript. With the completion of the browser and the standardization of HTML. 2014). websites were generally text heavy. 2.1 Web Design Web design generally refers to the production and maintenance of websites. and user experience design. 2006). Web designers utilize various tools in the design process of websites. interface design. It encompasses different skills and principles such as graphic design. KASAMA election is held annually for the government body of the students who studies in MSU-IIT composed of a President. They are expected to have an awareness of usability and if their role involves creating markup abiding to with web accessibility guidelines (Wikipedia.CHAPTER II REVIEW OF RELATED LITERATURE A formal and organized process of electing or being elected. Vice Governor and Board members. 2014). and limitations of end users of a product. image frames. delightful interface of products (Clayton. service. such as boxes.R. 2014). flat design is a style of interface design in which elements. 2. Jones who are authors of the book Design for Situation Awareness: An Approach to User-Centered Design. or textures that give them a three-dimensional look (The Next Web. 2.G. 2013). wants. this book focuses on user-centered 14 . To develop a mobile user experience that aligns to the needs and expectations of your targeted users.1 Design for Situation Awareness: An Approach to User-Centered Design M. system or process are given extensive attention at each stage of the design process. it is also very popular in app and mobile design. you must involve representative users and their feedback.2. Some of the strong examples of flat design implementation are the interfaces of Apples’iOS 7 and Microsoft’s Windows 8 and 8. clarity and honesty in materials in user interfaces (Kelsey.2 User-Centered Design User-centered design (UCD) is a process not constrained to interfaces or technologies in which the needs. lose any type of stylistic characters such as drop shadows.While many websites nowadays use flat design in their user interfaces. Endsley and D.1.2. The use of flat design gives a fast and fluid feel that brings a compelling. and buttons.1 Flat Design According to Turner.1. gradients. Flat design aims to emphasize simplicity. The user-centered mobile design life cycle can be thought of as an ongoing process as shown below: 15 . by removing much of frustration common to today's technologies. device features and constraints.2 A User-Centered Approach to Web Design for Mobile Devices V. which also integrates this information in ways that fit the goals. and connectivity issues.preferences depending on a systems service and situation. tasks. Friedman and S. As a Web designer. User-centered design provides a means for better harnessing information technologies to support human work. 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. we can greatly reduce errors and improve productivity without requiring significant new technological capabilities. Along with usercentered design also comes improved user acceptance and satisfaction as a side benefit. 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. 2. though the process can be applied to building apps as well.2. It states that the philosophy of usercentered-design is a way of achieving more effective systems that are discussed below:  A design that challenges designers to mold the interface around the capabilities and the needs of the operator.  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. and needs of the users.  Displays information that is centered around the sensors and technologies that produce it. Understanding Your Users User-centered design relies on user involvement throughout the design process.2 A User-Centered Approach to Web Design for Mobile Devices 1.2. let’s focus on the reason you need it: your users! 2. Not all websites need to go mobile now. To achieve that. Assess Current Situation By assessing the current situation. leading to a solution that users will find useful and want to use. The more relevant statistic is on how many of users are accessing website using mobile devices nowadays.Figure 2. Along with the types of devices and operating systems that have been used to access a full desktop site. but if you realize that you need a mobile website. it must be determined to find out and study the target users and what matters to them. you first need to have a 16 . 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. you had a list of features you would like to offer on your mobile website.clear understanding of your users. Systematically taking into consideration time. but even the gorgeous screen of the iPhone 4 is still small in comparison to a standard 1024×768 desktop design. you will also get a better understanding of the types of mobile devices you have to consider while designing. Even though many smartphone 17 . 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. 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. Ideally. 3. with the addition of a few important mobile design considerations. effort. these requirements would align closely with the user requirements identified during user research. Mobile phone screen sizes have also been increasing. Prioritize Mobile Users While evaluating the need for a mobile website. 4. Design With Mobile Considerations The basic design steps and principles of desktop website design apply to mobile design. the minimum screen resolution has been increasing since the days of 640 x 480. As a guide. For years. Apart from an understanding of your user and their needs. and resources available. grouped into a prioritized set of user groups whose needs can be thought of individually. Mobile devices are personal devices with small screens. 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. If they do not align. either real or virtual. Feature phones have tedious numeric keypads for input.6 Methods T. which are subject to fat-finger errors. while smartphones have tiny keyboards.Carrying out user-based assessment of the site 18 . trackballs and touch to navigate mobile websites. ISO 13407 outlines 4 essential activities in a user-centered design project:  Requirements gathering . First things first. unnecessary content must be cut and it must be prioritized based on its importance. Fidgeon discusses the stages that are carried out in an iterative fashion.  Prioritize Content Contents must be brief.Understanding and specifying the context of use  Requirements specification . with the cycle being repeated until the project's user-centered objectives have been attained.  Minimize User Input It's a pain to be involved in entering data on miniscule screens. smaller screen sizes require even more careful attention to the content displayed to the user. they inadvertently break the user experience by making users zoom in and out. 2. Add in the small screen with the need to complete tasks quickly and efficiently.  Simplify Navigation Without a mouse to point and click.2.Specifying the user and organisational requirements  Design . and clear and intuitive navigation is crucial to the system. mobile users have to rely on tiny keypads.browsers today can miniaturize desktop websites.3 User-Centered Design (UCD) .Producing designs and prototypes  Evaluation . 6 Methods Method Cost Output Sample Size When to use Focus Groups Low Non-statistical Low Requirements gathering Usability testing High Statistical & non.3. participants) to share their thoughts.1User-Centered Design (UCD) .Low Design statistical & evaluation Card Sorting High Statistical High Design Participatory Low Non-statistical Low Design Low Statistical High Requirements Design Questionnaires gathering & evaluation Interviews High Non-statistical Low Requirements gathering & evaluation  Focus Groups A focus group involves encouraging an invited group of intended/actual users of a site (i. attitudes and ideas on a certain subject.The following is a typical top-level characterisation of the most popular user-centered design methods: Table 2.e. 19 . feelings. but actively involves them in the design and decision-making processes. The results of multiple individual sorts are then combined and analysed statistically. 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. which is a good measure of efficiency (although you should bear in mind that using the 'think aloud' protocol will slow users down considerably). A participant is presented with an unsorted pack of index cards.  Participatory Design Participatory design does not just ask users opinions on design issues. 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.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. Two specialists' time is normally required per session . 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. 20 .one to moderate. one to note problems. You can also time users to see how long it takes them to complete tasks.  Card Sorting Card sorting is a method for suggesting intuitive structures/categories. The School of Computer Studies (SCS) used the system during the 2013 elections. 21 . Castillo developed the KASAMA Electronic Voting System. 2.J. Punched cards. Albaran. Electronic voting may involve transmission of ballots via telephones. It is also the case that any misunderstandings between the interviewer and the participant are likely to be quickly identified and addressed. 2. 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. or the internet. 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.it's critical that reports of interviews are carefully analysed by experienced practitioners. and specialized voting kiosks are some of the electronic voting technology currently in use today.J. and J.1 KASAMA Electronic Voting System (2013) M. computer networks. Bicoy. optical scan voting systems.3 Electronic Voting Systems Electronic voting uses electronic systems to aid in casting and counting votes.  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. The output of an interview is almost exclusively non-statistical .3. C. 22 .This project is intended for the whole university to provide students a hassle-free election with the help of the automated system. 2.1 Screenshots of the System The 2013 KASAMA Electronic Voting System encountered problems in terms of its user interface and user experience. 3. The website responsiveness is not completely flexible to mobile devices.1. Users can approach the BEI on the precinct to get their passwords to log-in and cast their votes. 2. This can be a hassle to an assigned BEI. 4. The software development method used was Rapid Application Development (RAD) while the following are the observations of the initial system: 1. 5. yet the system was only deployed in one college since the database was not distributed. 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. A BEI cannot vote using the same account type. Another issue is the Board of Election Inspector (BEI) account which does not have the functionality to vote. This system helps the COMELEC to get the official results on one glance after the election period is over. Inharmonious color combination of the background and the title text. For its functionalities. and functionalities. The date settings is not user-friendly to administrators who have no database administration background. setting the election date requires access inside the database. since he/she needs to log out and sign in to his/her student account in order to vote.3. The system developers constructed an automated system which was used as the main interaction with the voters. The system's database is undistributed. the login page placeholder says ‘Username’ when it is the ID number of the student that needs to be inputted. Some of these problems are shown in the figures below: Figure 2.Moreover.1 Login Screen As Figure 2.1 shows.3. This confused users right from the start of using the system. The color combination used also distracted some users. 23 . the mentioned system’s limitation is a big hindrance to an actual deployment throughout MSU-IIT. Considering that the KASAMA elections is an institute-wide affair. the system was designed to accommodate only one college.3. 3.3.Figure 2. Figure 2.3 Ballot 24 . making it susceptible to human error.2 shows that adding candidates required the manual input of the candidate’s name.2 Add Candidate Screen Figure 2.3. Baldonado. 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.E.3. Laganao. 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. A Voting Module which uses the Electronic Voting Ballot with an online/web-based user interface to vote. 25 . and K.As Figure 2. Bongabong. K. the system’s unresponsiveness to the screen dimensions of other platforms such as mobile devices irked some users who tested to vote through the system via smartphones. A Registration Module which uploads the voter details.3. 2. 2.J. 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.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. With the number of students enrolled in IIT.R. The software development method used was Rapid Application Development (RAD) while the following are the findings during the initial system: 1. 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.3 shows the ballot. students are required to present their COR and ID to the COMELEC. A registration module with a boxed figure user interface. 3.2 User Interface 1. 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. Table 2. the system developers constructed a system that has a webbased front end which acts as a main interaction with the users. the total number of votes for each candidate. After the initial findings.3. 2. 2. student can register online 26 .3. Table 2.3. Users can register online beforehand the election proper.3 Business Rules 1. 4. After confirmation. A voting module with a bright shaded user interface design. To confirm. The system also provides simple menus and buttons to help voters navigate through the pages with ease. A website design with Arial typography. Students registering should be MSU-IIT students only. C. 4. The researchers stated that any election in general costs a lot of manpower and material resources during the voting and the tallying periods. they have to go to their specified precincts and lookup their name in the list of qualified voters. 3. Chua. the student should confirm his/her votes. the ballot is automatically counted and the student is also automatically logged out of the system.to the database only once every election. He/She cannot vote again. Similarly the current voting and tabulation process in the KASAMA general election is inefficient and costly. J. the researchers 27 . S. Lasta. Sangil found that the system for the KASAMA general election is done in a traditional manner. Along the line. The student is given only one ballot with the list of candidates. and A. Further details are stated in Section 1 of Article IX B of the KASAMA Constitution and by-Laws (CBL). After voting. 2. 5.C. He should apply rules about how many candidates he should choose in every position.3. Though voters need not register prior the election period.3 MSU-IIT KASAMA Online Voting and Tabulating System I. After confirmation. 2. 4. To use Unified Modelling Language for its Design Model. After the initial findings. A website design with Arial typography. To implement the system as a web-based application using PHP and will utilize the PostgreSQL DBMS for its backend. The votes are submitted through the internet and into a main computer which will automatically tally the results. 28 . the system developers were able to do the following: 1.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. 2. The method used was Waterfall Model while the following are the findings during the initial testing of the system: 1. 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. To implement the web-based application design with HTML and CSS for the frontend. 3. 3. The system has a simple bright shaded user interface front end design. 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. 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. 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. time-costly and prone to Electoral Fraud. the following are the recommendations future researchers should consider: 1. 2. system rules. Electronic Voting is a blanket term used to describe a variety of practices using technologies.3. 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. Bautista.H. thus allowing it to be more dynamic. etc). flexible. Roda.Based on the findings of the system study.M. and not institute-specific. 29 . The user interface type that was used in the application was similar to a Windows classic type of graphical user interface. Formulate a generic code based on the workflow. with the use of electronic voting systems. and functions of the system.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. biometric scanning.e. A. Birao and C. bar code reading. 2.L. Research on and integrate a more secure and advanced way of verifying student identity (i. 2.4 Summary of Related System Table 2.4 Summary of the features of related Electronic Voting Systems Features Related Systems KASAMA Electronic Voting System (2013) MSU-IIT KASAMA Electronic Voting System KASAMA Election System (KASAMAES) (2012) MSU-IIT KASAMA Online Voting and Tabulating System MSU-IIT KASAMA Electronic Voting System: Redesigning for Usability Student/Voting Module      Admin Module      Student Admin Module  Student Admin Exclusive Ballot  Registration Module    30 . Log-in Module      Board of Election  Inspector’s Module  College Board of Election Inspector(BEI) Exclusive Ballot  Responsive User Interface  Menu and Buttons UserFriendly Interactivity     Pleasant website design overall user interface tone and hue Font Style Readability Distributed Database       31 . the developmental processes were tackled to fully give a better understanding of what a user-centered electronic voting system is. CHAPTER III CONCEPTUAL FRAMEWORK In this section.4 shows. the latest system has more features compared with the previous ones.As Table 2. 32 . 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. In its overview. Knowing all of this can easily start the process far enough in advance to avoid a predicament situation with the present system. the KASAMA Electronic Voting System is being discussed thoroughly. party list. Precinct was setup at the SCS grounds. the Candidates and their corresponding name. with at most two (2) to four 33 .Figure 3 Conceptual Framework 3. Prior to the election proper.1 MSU-IIT KASAMA Electronic Voting System (2013) The institute performs annual elections held every second semester of the school year. the elections last year used the latest system in the School of Computer Studies (SCS). As initially discussed in the first chapter. and position must be registered. Problems on procedures are encountered such as the adding of candidates which requires a lot of inputs. 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. It will also serve as the primary voter validation and the account that the student uses to login to the system. 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. 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. the results are then posted in the administrators account and is ready to printed. By the end of the of the voting period. 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. then it will be called “MSU-IIT KASAMA Electronic Voting System: Redesigning through a User-Centered 34 . They voters will fill up the positions with their candidate/s of choice in the electronic ballot before submitting the form. This method will take up so much time and effort to add candidates. and lastly the administrator has no graphical user interface to set the date of election. however the College Executive Council (CEC) was not included in the election which is not a complete election process for the KASAMA. Another is the unresponsiveness of the systems user interface that is not visually user-friendly to mobile voters.(4) staff members deployed in the precinct to monitor over the voters. During the election proper. 1 Analysis Phase During analysis phase. and other relevant aspects are identified by the designer. goals and objectives. is cost effective. Development. Thus.” The relative ease and economical implementation for the system makes it a practical alternative of the existing system last year.Approach. Implementation. 35 .2. Figure 3. Design. and Evaluation) model is framework that represents a guideline for building instructional designs. 3. the researchers chose to use the model since it gives much importance to the target users. the problem. and saves time. Although widely used for instructional materials.2 ADDIE Model ADDIE (Analysis.2 ADDIE Model 3. it is important to collaborate with the subject-matter expert (SME) in identifying these characteristics. In this user-centered test material. the researchers approached the Department of Student Affairs (DSA) and gathered information about the process of the manual KASAMA election. Also. Previous projects on automated election systems were also acquired with permission from the IT department. To improve and strengthen these. Problems encountered by the students were included into the issues that this paper aims to address. a user testing of the system will be conducted in coordination with the DSA.2 Learner Analysis A survey was conducted on students who have tested one of the previous automated election systems. 36 .The initial problem.2. These modules are crucial in managing the voting process. the data was carried out by the SME and by the researchers which are under the field of study. Information gathered from this will be imparted into the existing learner analysis. goals and objectives were defined in the project. 3. 3. The data refers to the subject matter within a field of basis to which the foundation of the process is dedicated. as well as its rules and bylaws. These systems were examined by the researchers and flaws were determined to serve as basis for the development of an improved system. The survey was aimed to gather impressions on the system’s user interface and its functionalities.3 Content Analysis Electronic voting systems are comprised by data which are classified as important by the subject-matter expert (SME). It also refers to the student data which is used as the content in the database to be manipulated for the voting process. These module were commonly used by learners and some which are out of their hands to handle. The respondents were encouraged to provide comments and recommendations.2. 2. He/she can add and edit candidates.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. 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. the design will also address the flaws that were observed on previous automated election systems. 3.3. thus. Voting is a one-way process. the DSA. Also. voters/students are advised to be careful since they can never go back and change their votes. His/her duties include accommodating student inquiries such as passwords and other election-related concerns. 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.2.2. The can add students/Comma Separated Values (CSV) which carries the lists of students enrolled within the semester.3.3Student Module The student has no other authority other than voting. 37 . 3. 3.1Administrator Module The admin of the system. has overall authority of the system.3.2Board of Election Inspector (BEI) The BEI serves as the assistant of the admin for every college. colors have common meanings as shown in the figure below (Hoisington and Minnick. Simply put. Thus. the DSA. conservative. 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. It can either attract attention or do the opposite. Colors that may represent parties that are involved in the KASAMA election will not be used in order to avoid bias. the design of the system involves the developers. technology (The most common color used on the Web) Green Nature. In web design.4. Providing a simple and minimalistic user interface will help users get easily accustomed to the system. good luck 38 . Color People use color to categorize objects in their daily lives. Student opinion will also not be left out.1 Graphic Design Since the system is not intended for the sole use of its developers.3. earth. The researchers also intend to use a flat design approach on the system. health. 1. more importantly since they are end-users of the system.1 Common Color Meanings Color Description Blue Trust. Thus.2. consultations will be made with the DSA to make sure that the design adheres to its inclinations as much as possible. and the students. it must be made in conjunction with the preferences of its client and intended users. security. money. 2013): Table 3.2. energy Black Sophistication. 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.White Purity. spirituality. brightness Yellow Cheer. comfort Purple Mystery. honesty Brown Reliability. When something is not harmonious. passion.2. elegance. Some formulas for color harmony are presented below: Figure 3. Color harmony delivers visual interest and a sense of order (ColorMatters. warmth. joy. death. arrogance.1 A color scheme based on analogous colors 39 . innocence. earth. danger. it's either boring or chaotic. cleanliness. balance. precision Red Power. power. It engages the viewer and it creates an inner sense of order and a balance in the visual experience. love. 2014). optimism. modesty Orange Energy. fear Gray Intellect. royalty 2. 2. such as red and green and red-purple and yellow-green.5 Web-Based Development Tools In creating the web-based training. Usually one of the three colors predominates. regardless of whether this combination fits into a technical formula for color harmony. red yellow and green create a harmonious design. Figure 3. These opposing colors create maximum contrast and maximum stability. Figure 3. yellow.2. various web development tools will be used by the researchers. 3. In the illustration above.2.3 A color scheme based on nature Nature provides a perfect departure point for color harmony. such as 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. 40 .2A color scheme based on complementary colors Complementary colors are any two colors which are directly opposite each other.Analogous colors are any three colors which are side by side on a 12 part color wheel. and yellow-orange.  JavaScript JavaScript allows the user to control.5. CSS will be used for describing the look and formatting of document to be presented. and alter document content displayed in the website.  Bootstrap Bootstrap is collection of tools for web applications. communicate.2. JavaScript will used to create an interactive and dynamic website (i. dynamic date).1 Frond-End Development The front-end of a system is what the user will see: the interface.3. It provides the developers better control of the presentation and look of the system. HTML codes will be used to create the overall look of the system.  Adobe Photoshop 41 . It contains design templates for interface components such as navigation. Bootstrap 3 will be used to create a responsive website that can adjust to different window resolutions such as mobile devices. the colors.e. and buttons. 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. typography.  Cascading Style Sheets (CSS) Along with HTML. to vote. etc.4 Implementation and Evaluation The system will be designed to use a distributed database.Photoshop is a powerful tool not just for editing photos but also graphics.3.3. modifying.e.1 Text Input Username and password are primary requirements that will allow to user to proceed to the next processes of the system (i. 3. It gauges the user’s ability to conduct activities. It will be used for storing. from choosing preferred candidates to confirming vote. One database will be maintained for each colleges and one for the Department of Student Affairs (DSA). among others require the user to click on an item to proceed to the next task. 3. 3. 42 . Photoshop will be used in creating logos and other necessary graphical content in the user interface. and retrieving obtained information. There are also other procedures that require input from the user such as adding name of party-list. 3. The database will be located and maintained in different locations within the institution.3 Interactivity Interactivity refers to the system’s behavior as experienced by the user. to add candidate. This.2 Mouse Click Mouse-click is present in almost every process in the system.). The Database Management System for the system’s database will be PostgreSQL. 3.1. as well as insights and suggestions. and overall user experience. 3. During this phase.1 User-Centered Testing and Evaluation User-centered testing was conducted among 44 participants to evaluate the system's design. the system will be tested by the developers and the specific end users according to its functions.1 System Evaluation To ensure that the deployment of the system will truly serve its purpose.  Pre-test Questionnaire 43 .PHP will be used to connect the user interface to the database and Apache web server will also be used. These questionnaires was distributed to 44 random college students of MSU-IIT. Questionnaires provided to the participants during the testing process and post-test interviews was conducted to gather additional qualitative information regarding the user experience. user-centered testing and evaluation will be done.4. user interface.  Screening Questionnaire Screening questionnaires was used to determine the participants of the testing.4. 1 Overview of the System The Redesigned MSU-IIT KASAMA Electronic Voting System is a system that will replace the previous KASAMA Electronic Voting System that encountered some flaws 44 .  Post-Task Questionnaire After completing a specific task. a participant was asked to answer a pre-test questionnaire. Participants will also be encouraged to provide insights and suggestions. This test provides feedbacks to the researchers about the user’s expectations on the system.  Post-Test Questionnaire This was used to gather information about the user’s overall experience after using the system. This test helped point out possible problems on specific functionalities that may hinder user experience of the system in the future. CHAPTER IV DESIGN 4.Before the actual testing of a system. the user answered a question regarding his/her experience and impression on that task. and overall satisfaction. adaptability. Questions are related to the system’s interface. according to the users preferences on last years' test on the annual KASAMA elections held at the School of Computer Studies (SCS). even with less computer knowledge. BEI's. 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. 4. voters). The system arose as a need to simplify the process of the systems technicalities and procedures. can easily use the system without any hassle and be much more convenient to each of them. 45 .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. Figure 4.2 Theoretical Framework Figure 3. It was used on modifying the contents of the HTML tags and overall design such as the menu bar. Also.  Cascading Style Sheets (CSS) Along with HTML. body. text and background colors. buttons and forms. 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. ballots. The user interface where the user interacts with the system and performs various activities was designed to be flat.2 shows design used for the front-end of the system. along with jQuery which is 46 . CSS was used for describing the look and formatting of the documents presented on the system.  JavaScript JavaScript was used by the developers for confirmation functions to let the user decide safely before performing and action. eliminating aspects such as drop-shadows that give menu and buttons a threedimensional look. buttons. was used in altering the date using the jQuery UI date picker to make it simpler for the user to change a date. This Diagram describes the behavior of the systems deployment.a cross-platform JavaScript library. colleges) involved in the system.  Bootstrap Bootstrap was used as the design template for the interface components to deliver a responsive system design. 4. 47 .3 Deployment Diagram The deployment diagram represents the relations between the organizations (DSA. 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.  Adobe Photoshop Photoshop was used by the developers in editing custom logo designs. typography. Overall JavaScript was used to create an interactive and dynamic website. icons and the overall look of a web-based system. The Student Administrator on each college will be the one to assign a BEI to help distribute passwords to Students.3.3. In addition. 48 . the DSA will then be the main server of the database for each college. Furthermore. the student will approach the BEI for their passwords so they can vote.3 Deployment Diagram Figure 4. The DSA will act as the Main Administrator which points to the Student Administrator (assigned per college by the DSA). the BEIs' and the Students will have a luxury to use mobile devices in using the system since it is responsive to mobile platforms. The student administrator and the BEI will then be the responsible workforce for their colleges. Also. 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.3 shows the flow of the system deployment.1 Distributed Database The main database will be designated for the DSA’s office and the rest will be distributed to each college in the university. As shown on Figure 4. both can use mobile devices. Further information are discussed below: 4.Figure 4. Each college will have its own precinct and will have its own server. 3). Further function functionalities are discussed below: View/Edit Student Profile: 49 . These users are the individuals involved as shown before in the deployment diagram (See Figure 4.4.4.4 Flowcharts These flowcharts are graphical representations of the processes and actions the users are going to do.1 shows the process flow chart of the Main Administrators' account who has overall authority of the system.4.1 Main Administrator (DSA) flowchart Figure 4. Figure 4. Set date b. Select college c. CBAA-BEI g. Student c. Account type (student admin. SET-BEI Add Candidate: a. CED-BEI h. CSM-BEI d. Appearance Results: a. Select position Date Setting: a. Select student b. ID number c. Print election results 50 . Admin e. View election results b. COE-BEI i. BEI) b. CASS-BEI f. SCS-BEI b.a. Password Edit Account Type: a. Add party list d. CON-BEI j. Edit date c. Figure 4.2 Student Administrator flowchart 51 .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. Assign BEI Figure 4. Close Voting Lines b. View/Print Election results (CEC) c. password) e.4. Vote d.Figure 4. Further function functionalities are discussed below: a. View/edit (ID number.4.3 BEI flowchart 52 . voters/students are advised to be careful since they can never go back and change their votes. View (ID number.3 shows the process flow chart of the BEI's account which serves as the assistant of the student admin.4 shows the process flow chart of the student account.4. Vote b. View election results (CEC) Figure 4. name. thus. Further function functionalities are discussed below: a. Voting is a one-way process.4.4. voting status) c. password.Figure 4. The student has no other authority other than voting. 53 .4 Student (Voter) flowchart Figure 4. The testing phase included an initial and final testing. Participants 12% CASS 12% CED 5% 7% 10% CSM COE SET 7% 40% 7% SCS CON CBAA Figure 5.2 User-Centered Test and Results The initial testing consisted of 26 participants. post-task. and post-test questionnaires. 15 of which tested using a PC and 11 using a smart phone.CHAPTER V RESULTS AND DISCUSSION This chapter shows the result of the testing and evaluation conducted for this study. 5.1 Test Results The figure below shows the percentage of student participants per college. After some revisions based on user suggestions. a final testing was 54 . 52 potential users were screened and a total of 44 participants were selected. These participants were asked to answer a pre-test.1 Percentage of Participant Turnouts 5. 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). 7 tested using a PC and 11 using a smart phone.  Login Process Figure 5. also since the functionalities found within the BEI and student accounts are encompassed by the student administrator account. 22 students tested the system using a PC while 22 tested using a smart phone.1 Login Process The login process among the participants was generally easy for both platforms. 5. After the initial testing.1 Post-Task Results: The users were tested using the student administrator account. 55 . Overall.conducted among 18 participants.2. This was done to save time.2. 3Voting for KASAMA and EC officers 56 . last name or ID number was generally easy among testers of both platforms.2 Search Student Searching for students through their first name. Search Student Figure 5.  Voting for KASAMA and EC officers Figure 5.2.2. account type) 57 . was implemented by the researchers.4 Viewing Election Candidates Based on the figure above.  Viewing Election Candidates Figure 5. the participants did not encounter any problems in viewing the candidates for both the KASAMA and the CEC. password. which was to use counters on checkboxes for senators and board members.  Editing student information (ID number. One suggestion.5Editing student information (ID number. account type) Figure 5.The participants did not have hard time on voting. password.2.2. Thus.Although no errors were encountered during the task of editing student information. the provision of a user manual will help alleviate difficulties that users of this account may encounter. Considering that this functionality is only available for student administrators and not the majority of student voters during the actual elections. some participants were observed to have taken some time understanding the task.2. the researchers decided to emphasize the icon by repositioning it at the upper right corner and put it in a border to further indicate its function (See Appendix F). 58 .6 Viewing/printing election results The viewing of election results of the CEC went smoothly among the participants.  Viewing/printing election results Figure 5. Some did not immediately find the print icon which was placed at the upper left corner of the results.  Logout Process Figure 5. Some of these aspects were compared with the 2013 KASAMA Electronic Voting System. Overall.7 Logout Process The participants were all able to log out from the system without any problems. both producing favorable results from the users.2. the participants were provided questionnaires to provide their feedback and impression on the system. These are as follows: 59 . The results between the two platforms were also similar.2 Post-Test Results After the actual testing.2. 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. 5. 2.2.8 Website Navigation Based on the figure shown. 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.9 Ease of procedures 60 . Website Navigation 3% 2% 0% 18% Very Easy Easy Neutral Difficult Very Difficult 77% Figure 5. the results of the overall experience of navigating through the website was favorable among the participants. As compared to the 2013 KASAMA Electronic Voting System, the current system provided a better experience among its users in terms of completing task/s. This result is significant considering that the previous system's testing only required the users to vote, while the current system's testing which includes various tasks.  User Interface Figure 5.2.10 User Interface In terms of the user interface, the current system has a greatly reduced unsatisfactory rating compared to the previous system. This can be attributed to the flat design used in the system, which used as less color as possible and a simple interface. The responsiveness of the system may have also played a role in providing users an easy experience in using the system through a mobile device, in this case a smart phone. 61  System Satisfaction Figure 5.2.11 System Satisfaction The user satisfaction of the current system was significantly better compared to the 2013 KASAMA Electronic Voting System as shown in the figures above. Only 1 person was not satisfied with the system, once again not giving any reason to justify the rating.  Adaptability to the System 0% 19% less than 10 minutes 10-15 minutes 15 minutes or more 81% Figure 5.2.12 Adaptability to the System 62 Based on the figure shown above, adaptability to the system among the participants is generally fast. This is significant considering the fact that most participants have average computer skills.  Opinion on Providing Speedy Elections Figure 5.2.13 Opinion on Providing Speedy Elections Opinion on the current system's ability to speed up elections is significantly greater compared the previous system. This results may have been affected by some other aspects of the system, such as ease of use and user interface, which may have influenced the users' ratings. 63 3 Summary of Results Based on the results gathered from the user evaluation conducted. Edward Banawa. There were some instances that the participants asked of the researchers’ assistance 64 .14 Usefulness of the System Users gave good impressions on the system's usefulness. However.2. Usefulness of the System 2% 0% 0% 16% Very Useful Useful Neutral Not Useful Very Not Useful 82% Figure 5. Lastly. the redesigned electronic voting system gathered positive results in areas that this study aims to improve. other aspects in terms of network and database security must be taken into account for an actual deployment. He also expressed his desire for such a system to be deployed.2. These impressions may have been greatly influenced again by the experience provided by the system to the participants. 5. head of the DSA. Mr. gave good impressions on the system especially its responsive capability. the researchers emphasized that the system has the necessary capabilities needed. Although the actual deployment of the system is beyond the scope of the study. Nonetheless. Logging in and out. among others were generally easy among all users. and ease of performing tasks. voting. although there were some who were not convinced with the system’s design. the current system has significantly better rating and feedback from the users compared to the previous system. As in seen in the figures above. In terms of the user interface design. 65 . the participants did not encounter any significant problems that hampered their overall experience with the system. system satisfaction.during the system evaluation. The flat user interface design was well-accepted by majority of the users. there is no significant difference in the ratings of the participants for different aspects of the system between PC and mobile versions. Adaptability was also fast. the number of iterations of exposing the design to the users may never be enough to satisfy all the users. 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. Some users have differing opinions thus the proponents made design decisions based on the majority’s point of view. Though this process is beneficial in general. 66 .1 Conclusion The researchers were able to attain the users’ needs with regards to the system and addressed these in the study. The user-centered design approach in redesigning an existing system is appropriate for it answered the user’s concerns that they experienced in the initial design. 6. as well as other comments from key personnel. The researchers used Hypertext Markup Language (HTML) as the backbone of the website development process and Cascading Style Sheets (CSS) for modifying the look and the format of the system’s design which is simple and flat. 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.CHAPTER VI CONCLUSION AND RECOMMENDATIONS This chapter presents the conclusion and recommendations by the researchers based on the results gathered and interpreted. This entails a number of users still unsatisfied. The evaluation phase. the current system gained significantly better rating and feedback from the users in terms of the user interface. ease of procedures. and large numbers of users without crashing. further tests must be conducted to gauge the system’s security and ability to handle large numbers of simultaneous users as well as unpredictable events like network and power interruptions. Research on and possibly connect an updated system to the institute’swebsite. 67 . 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. However. 3. 2. 4. which is the actual deployment in the institute. Research on and providebetter measures in keeping the system updated in terms of the user interface and functionalities. produced largely positive results from the participants. network and power interruptions. It is concluded that the system is ready for the next stage of implementation. and overall system satisfaction. 5. 6.2 Recommendations The following are the recommendations of the researchers for future studies aimed at improving this study: 1. conducted using a PC and a mobile device. Research on and provide methods to improve the system’s ability to handle errors. Conduct additional iterations of user evaluations to obtain more substantial feedback and better results. Research on and provide better measures in safeguarding student votes as well as its security from outside attacks. Gizmodo.uk/books?id=bdf4vS2n7N8C&printsec=frontcover#v=onepage&q&f=fals e Journals: Friedman. (2003).com/EBchecked/topic/182308/election Niederst.shtml Ghanta. (2014). Designing for Situation Awareness: An Approach to User-Centered. T. K.google. Retrieved from http://books. (2013). (2013). User-Centered design (UCD) . V.com/what-is-flat-design-508963228 Clayton.co.britannica. Retrieved from http://www. Modern Design at Microsoft.webcredible. Microsoft. Retrieved from http://www.microsoft. Endsley. (2013.. Pulse . March 20). Retrieved from http://www. (2013). R. Retrieved from http://www. Retrieved from https://www. Minnick.the heartbeat of BootstrapCDN [Business]. S. Web Design in a Nutshell. J. Canada: Nelson Education.ph/books?id=eRPBkapAsggC&printsec=frontcover#v=onepage&q&f=f alse Gibbins.L.L. Retrieved from http://gizmodo. Smashing Magazine. (2006). What is Flat Design?. Retrieved from http://www. C. (2013).com/blog/pulse-the-heartbeat-of-bootstrapcdn/ 68 . BIBLIOGRAPHY Book: Hoisington.com/blog-reports/web-usability/user-centered-design. J.6 methods [Schools].smashingmagazine.com/en-us/news/stories/design/ Blogs: Fidgeon.com. Adobe Dreamweaver CS6. A User-Centered Approach to Web Design For Mobile Devices. (2014).Furthermore. Ltd.leftronic. Encyclopedia Britannica. the researchers recommend theuse of other methodologies that incorporate a user-centered approach that can deliver better system outcomes especially on the user’s point of view.google.com/2011/05/02/a-user-centeredapproach-to-web-design-for-mobile-devices/ Campbell-Dollaghan. J. M. L. D. The Next Web [Business]. J. I. C.techtarget.M. & Thornton. & Laganao.Turner. HTML(Hypertext Markup Language). (2014).wikipedia. M. G.J.S. MSU-IIT KASAMA Online Voting and Tabulating System.org/wiki/Election Berners-Lee.L. (2014). S.org/wiki/Web_Content_Accessibility_Guidelines 69 .1-149. A. Web Content Accessibility Guidelines. KASAMA Election System (KASAMA-ES). (2013).R. J.com/definition/HTML Otto.bth.Electronic Voting System.com/2013/11/twitter-bootstrap-less-is-more PostgreSQL Global Development Group. Bongabong. Bautista. & Langoyan. Chua. Election. T....pdf Harper. Retrieved from http://www. K..com/author/amberturner/ Literature Review: Cabalhin. Retrieved from http://www. & Castillo. K. Study About the Relationship Between the ModelView-Controller. A. (2006).wikipedia. MSUIIT KASAMA Electronic Voting System. January). Electronic Voting System. Birao.. Electronic System. (2011).uk/43-must-read-php-articles-and-resources Aihara. (2005).. (1995. Albaran. (1995).. Retrieved from http://www. Web Sources: Trubac. Twitter Bootstrap. Retrieved from http://en. Dy Closas.se/fou/cuppsats. Lasta. (2012). C.connected-uk. Web-based Requisition System (WebRS) for MSU-IIT Procurement Process. (2012).co. Retrieved from http://en. A. & Sangil.postgresql.C.J. K. (2010). A.J. M. Theme Thursday.org/about Smith. Postgresql: The world’s most advanced open source database. Bicoy. (2010).H.. Requistion.C. K.S. KASAMA Electronic Voting System. Twitter Bootstrap:LESS is more. Retrieved from http://searchsoa.1-7. 43 Must Read PHP Articles and Resources.gracesmith. E.. & Roda. Retrieved from http://www. Baldonado. (2009). Retrieved from http://thenextweb. PostgreSQL.nsf/all/567e0c462fa33949c12576d4004573f1/$file/thesis%20%20diogo%20aihara. J. HTML(Hypertext Markup Language). Electronic Voting System.J.. Model-View-Controller. C.. A. J. Scenario 2 Familiarize the system by navigating through the menu buttons. name. voting status) using the search bar. Scenario 4 Cast your vote through the Vote menu.APPENDIX A User Testing on KASAMA Electronic Voting System Scenario List Scenario 1 Login into your account. Scenario 5 Edit student:  Assign a BEI 70 .     Vote Candidate menu Accounts menu Administrator menu Scenario 3 Search for student information (ID number.  Edit Password (ID number) Scenario 6 View and print election results APPENDIX B User Test on KASAMA Electronic Voting System Screening Questionnaire Name: _________________________________________________________ College: _____ Age: _______ Contact No: _________________________ Email Address: _____________________________ Instructions: Encircle the answer of your choice 1. a. please rate your overall impression of the system in terms of its user interface and ease in achieving your objectives a. Excellent b. Have you ever experienced using an electronic voting system before? a. Average c. c. b. Please rate your computer skills. d. No If yes. School Matters Games Social Media Other 3. What is usually your purpose in using computers? You can choose more than 1. Yes b. a. Expert b. Good 71 . Poor 2. APPENDIX C User Test on KASAMA Electronic Voting System Pre-test Questionnaire Name: ____________________________ College: __________ 1.c. Yes b. Bad 4. (1) (2) (3) _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ 72 . What are your expectations for the design of a KASAMA Electronic Voting System? Please list at least three items. No Thank you for your time. Are you willing to try the KASAMA Electronic Voting System? a. what details would you want to know from the KASAMA Electronic Voting System? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ 2. As a college student of MSU-IIT. Very Easy 1 2 3 73 . Very Easy 1 2 3 4. Very Easy 1 2 3 4 5 Very difficult 4 5 Very difficult 6. account type). Encircle your choice. Viewing/printing election results. password. Viewing election candidates. Editing student information (ID number. Very Easy 1 2 3 4 5 Very difficult 4 5 Very difficult 4 5 Very difficult 4 5 Very difficult 2. Very Easy 1 2 3 5. 1. Login process. Voting for KASAMA and EC officers.APPENDIX D User Test on KASAMA Electronic Voting System Post-task Questionnaire Rate the following tasks. Very Easy 1 2 3 3. Searching for student from list. Very satisfied 1 2 3 4 5 Very unsatisfied 5.7. How was the process of navigating through the website using the menu buttons? Very easy 2. How much time do you think can you fully adapt in this system? o Less than 10 minutes o 10-15 minutes o More than 15 minutes 74 . We encourage you to provide feedback and insights. 1. 1 2 3 4 5 Very difficult How easy/difficult was it for you to perform the tasks given? Very easy 1 2 3 4 5 Very difficult 3. Please rate how satisfied you are with the system. Very Easy 1 2 3 4 5 Very difficult APPENDIX E User Test on KASAMA Electronic Voting System Post-test Questionnaire Encircle your answer. How satisfied are you with system's user interface design? Very satisfied 1 2 3 4 5 Very unsatisfied 4. Logout process. ___________________________________________________________________________ ___________________________________________________________________________ ___________________________________________________________________________ 75 . how effective will the system be in providing speedy elections? Very effective 1 2 3 4 5 Not effective Feedback: ___________________________________________________ ___________________________________________________ ___________________________________________________ 8. How do you find the font style and color used on the user interface? Very pleasant 1 2 3 4 5 Very unpleasant Feedback: ___________________________________________________ ___________________________________________________ ___________________________________________________ 7. How would you rate the usefulness of the system you tested? Very useful 1 2 3 4 5 Not useful Feedback: ___________________________________________________ ___________________________________________________ ___________________________________________________ 9. In your opinion.6. If you have additional feedback or insights regarding the system. we encourage you to let us know. The DSA Director shall propose and prepare a budget of the COMELEC and submit the same to the KASAMA President and the latter shall see to it that the money needed for election expenses shall be available at least one month before the KASAMA general elections. ARTICLE IX CONSTITUTIONAL COMMISSIONS B. honest and orderly election. The members of the COMELEC shall be chosen by the Director of the Department of Students Affairs (DSA) in consultation with the Assistant Deans or Assistant Directors of the different colleges/schools. b. a. b. COMMISSION ON ELECTIONS Section 1 The COMELEC shall be composed of one faculty member and three students from each college/school. Section 2 The COMELEC shall have the following powers and functions: a. Formulate campaign rules and regulations and other matters deemed necessary to ensure free. The Director of Students Affairs (DSA) shall be the ex-officio Chairman of the COMELEC.APPENDIX F Article IX B of the Consitution and By-Laws of the Kataas-taasang Sanggunian ng mga Magaaral. 76 . Register and accredit political parties. the DSA Director is authorized to withhold the said amount from the KASAMA general fund to ensure that this would not delay the holding of the KASAMA general elections. X of this Constitution. c. 1 Art. Should the KASAMA fail to allocate the needed amount. c. Approve and register candidates subject to the qualifications prescribed in Sec. Announce failure of the election as may be required by circumstances. Enforce and administer all laws and regulations relative to the conduct of election.d. g. e. Proclaim all election winners on or before the fourth day after the election. Accept and act immediately on any complaint and/or motion for recounting which must be filed within twenty-four (24) hours after the elections results are announced. Suspend election as may be deemed necessary. f. and J. Announce election returns within two school days after the election. h. 77 . I. Decide on the number and location of polling places and the appointment of poll watchers. colour. and content s are clear and appeali ng Provide s appropri ate feedbac k to user respons es The progra m runs smoot hly withou t delay The syste m can make the KASA MA Electio n faster As a whole. you are satisfie d with the KASA MA Electro nic Voting Syste m Strongly Agree Strongl y agree Strongly Agree Strong ly Agree Strong ly Agree Strongl y Agree Strongly Agree Strongl y Agree Agree Strong ly Agree Strong ly Agree Strongl y Agree Strongly Agree Strongl y Agree Strongly Agree Strong ly Agree Strong ly Agree Strongl y Agree Strongly Agree Strongl y Agree Strongly Agree Strong ly Agree Strong ly Agree Strongl y Agree Neutral Disagr Neutral Neutra Agree Neutral Comments Course Ye ar I've been wondering. Anyway. what if the students purposely or accidentally gave the wrong student id number? Shouldn't you guys verify that too? haha. media elemen ts.APPENDIX G KASAMA Electronic Voting System Survey Results (2013) 1 Timesta mp 2 2/28/20 14 5:22:33 2/28/20 14 22:20:2 1 2/28/20 14 22:23:5 7 2/28/20 14 22:24:3 0 2/28/20 14 22:26:0 6 3 4 5 6 7 2/28/20 The system is conveni ent and easy to use The graphic s. 77 . the System really is GREAT. abot sa pag. Ganiha.student by using another student's ID. Pero payts kaau ganiha. kai Gamay lng ganiha ang slots sa pag vote.8 9 10 14 22:26:4 6 2/28/20 14 22:27:0 9 2/28/20 14 22:31:0 5 2/28/20 14 22:33:2 0 ee l Agree Agree Agree Agree Agree Agree Strongly Agree Agree Agree Strong ly Agree Neutra l Agree Strongly Agree Strongl y agree Strongly agree Strong ly agree Strong ly agree Strongl y agree 11 2/28/20 14 22:37:3 2 12 13 Neutral ako answer sa kun makapas2 cya sa election. there can be chances na ang student kay manghulam ug ID sa lain.aw jud ug ayo ug mao ba ang naa sa picture sa ID ug ang gagunit sa ID.check ug kinsa nay muboto and paghatag sa passcode. :) 2/28/20 14 22:40:0 5 2/28/20 14 22:41:3 Strongly Agree Agree Agree Agree Strong ly Agree Strongl y Agree Strongly Agree Strongl y Agree Strongly Agree Strong ly Agree Strong ly Agree Strongl y Agree the KASAMA election would be better if this system will be implemented :) 78 .haha.solbad ni na. mao ang mupirma and mangayo ug passcode.. pwde tingali gamitun ang comp.? my concern is that. it will cause a risk to borrow more laptops of the student para daghai makabotar in just one session. ani na problema. hope ma. possible gihapon na mka.problem.OR there can be another solution. maybe.. aus kaau! Superb kaau ang Election. nangutana ma ko sa akong tapad unsay ibutang sa username -_. dapat ang comelec kay mutan. Congrats! :) wala ko kabalo nga ID number diay ang username.lab para daghan2 ang pwde maka vote.vote twice ang isa ka. pag. 14 15 8 2/28/20 14 22:54:2 6 2/28/20 14 23:03:2 7 Strongly Agree Strongl y Agree Strongly Agree Strong ly Agree Strong ly Agree Strongly Agree Agree Strongly Agree Strong ly Agree Strong ly Agree Strongl y Agree Gusto ko makabalo pagbuhat ani. Awa lang mo. HAHAHAHAH. BSIT II The whole system is great! Just improve more on the graphics and media elements. Make it more catchy and official-looking like add the school's logo and kasama's, pwede pud SCS logo para char, taga scs bitaw gabuhat! XD JITS logo pud. hahaha! :D It would be nice if we will not use our ID numbers.. just the password itself can use to login to the system.. Because it can create a record or a database that can know who we are voting.. BS-IT 3 ESETB 2 BSIT 3 BSIS 4 eset-b 3rd 16 2/28/20 14 23:43:0 7 Strongly Agree Neutral Strongly Agree Strong ly Agree Strong ly Agree Strongl y Agree 17 3/1/201 4 0:46:40 3/1/201 4 0:06:45 Strongly Agree Agree Agree Agree Strongly Agree Agree Strongly Agree Strong ly Agree Strong ly Agree Strong ly Agree Strongl y Agree Strongl y Agree 3/1/201 4 1:54:57 3/1/201 4 6:10:42 Strongly Agree Neutral Neutral Agree Agree Neutral Disagr ee Neutral Strong ly Agree Strong ly Agree Neutral BSIT 1st Ye ar 21 3/1/201 4 7:04:49 Strongly Disagre e Neutral Agree 1st Ye ar 3/1/201 4 6:42:08 Strongly Agree Strongl y agree Agree Strongl y Disagr ee Strongl y Agree BSCS 22 Strong ly Disagr ee Strong ly Disagr ee Strong ly Agree BSIT 4 18 19 20 Strong ly Disagr ee Strong ly Agree Nice kaayo. Bahalag late ko sa klase nako ganiha, naka vote japun ko maski naa ko sa classroom. Haha. E implement na unta na sa whole IIT para dili na time consuming and hassle-free ang election. :) Very easy og pwede ma access sa mobile if dili naka makatagad sa linya. :D *during when the user inputs the wrong password, the lacks feed back after. not sure if his/her password is still incorrect or if we lost 79 connection. :) 23 3/1/201 4 7:05:26 Neutral Agree Disagre e 24 3/1/201 4 7:06:10 Strongly Agree Agree Strongly Agree 25 3/1/201 4 7:06:31 Strongly Agree Agree Strongly Agree Neutra l 26 3/1/201 4 7:07:02 Agree Strongl y agree Strongly Agree Strong ly Agree 27 3/1/201 4 7:35:46 Agree Agree Agree Strong ly Agree Strong ly Agree 28 3/1/201 4 11:31:1 1 3/1/201 4 12:34:4 1 Agree Strongl y Disagr ee Agree Neutral Strong ly Agree Strong ly Agree Strongl y Agree Agree Agree Strong ly Agree Agree 29 Strongly Agree Strong ly Disagr ee Strong ly Agree Neutra l Strong ly Disagr ee Strong ly Disagr ee Neutra l Strongl y Disagr ee Strongl y Disagr ee Strongl y Disagr ee Strongl y Disagr ee Agree The issue of security and trust will be very critical for this system. The concept of automated election that is happening in the national election covers the same problem but still there's this hard copy of ballot that will lessen the doubt for trusted election returns. Okay lang man ang system. I mean, job well done. Kuan lang diay, ang katong sa radio buttons, naa unta'y clear button, kay naa ko'y nadunggan nga if masayop lang ka'g click kay di na dayon ma revert. Ma count na dyn to imo gi vote, nasayop ra unta to. And also, it's also good na gi integrate pod nnu sa mobile. Sa tab man ko nag vote, and amazing experience. Pero idk if sa browser lang to, pero mura sya ug naka zoom lang man gd ang mga text. Like kelangan paka mag scroll2 to the left and to the BSIT 2n dyr BSCS 1 yr. BSIT 3 BSIS 1st ye ar BS CS 3rd BSCS 4 BSIT 4 80 right. Naka word wrap nalang unta to para scroll down paubos nalang. :) bcn wla rato na wrap sa container. Aw :p 30 3/1/201 4 12:36:3 1 Agree Neutral Neutral Agree Strong ly Agree Strongl y Agree Well anyway, congratulations. Job well done jd japon. ^___^ Technical Improvements: System feedback would be much better if it implemented on the client side instead of server side. Actions such as clicking a button, unclicking a button, and counting the number of checkboxes checked should be provided real time feedback(can be achieved using jquery and ajax). Using jquery and ajax can also improve validation of input. In this way input are validated even before submitting the whole form. Database implementation would be better if it will support concurrency locks to ensure data integrity(Hooray if this is implemented alreadyclap clap). BSIT 4 Heuristic improvement: It would be better if a photo of each candidate will be provided in the UI, because some of the students know the candidates better by face than their names. selections can also be improved if it would use tiles(ala windows 8) with highlighting instead of checkboxes and radio buttons(I just heard someone yesterday complaining of the size). Process Improvement: The system did speed up the process of voting and counting, however there are still a number of steps before the actual voting process that still slows down the whole process. As per experience, the number of steps are as follows: 81 Actions such as clicking a button. unclicking a button. submit 31 3/1/201 4 12:36:3 1 Agree Neutral Neutral Agree Strong ly Agree Strongl y Agree Overall I would give a geisha bow for the system and for the team who devoted time to pull this off(you guys deserve a clap clap). Using jquery and ajax can also improve validation of input. Submit your ID number to the BEI and ask for a password 4. Submit identification through the biometric system(the user will then be automatically identified) 2. and counting the number of checkboxes checked should be provided real time feedback(can be achieved using jquery and ajax). Confirm vote 6. 1. In this way input are BSIT 4 82 . I know that this system can go a long way and that you guys can carry out these improvements(I'm pretty sure). Look for your name in the master List 2.1. We can lend some helping hands if you would need some. Print your signature in the separate voter's list 3. 3. for the love of SCS. Select candidates to vote and confirm. Hooray guys! Congratulations. Log-in with your account name and given password 5. Submit These steps can be reduced up to 2-3 steps if we integrate the biometric identification system with the electronic voting system. Technical Improvements: System feedback would be much better if it implemented on the client side instead of server side. 83 . Select candidates to vote and confirm. selections can also be improved if it would use tiles(ala windows 8) with highlighting instead of checkboxes and radio buttons(I just heard someone yesterday complaining of the size). Submit identification through the biometric system(the user will then be automatically identified) 2. Print your signature in the separate voter's list 3. Process Improvement: The system did speed up the process of voting and counting.validated even before submitting the whole form. Log-in with your account name and given password 5. Submit your ID number to the BEI and ask for a password 4. Database implementation would be better if it will support concurrency locks to ensure data integrity(Hooray if this is implemented alreadyclap clap). the number of steps are as follows: 1. Look for your name in the master List 2. 1. Submit These steps can be reduced up to 2-3 steps if we integrate the biometric identification system with the electronic voting system. because some of the students know the candidates better by face than their names. Heuristic improvement: It would be better if a photo of each candidate will be provided in the UI. however there are still a number of steps before the actual voting process that still slows down the whole process. As per experience. Confirm vote 6. submit Overall I would give a geisha bow for the system and for the team who devoted time to pull this off(you guys deserve a clap clap). Hooray guys! Congratulations.3. 32 33 34 35 3/1/201 4 20:53:3 8 3/1/201 4 20:53:5 4 3/1/201 4 20:55:1 7 3/1/201 4 20:57:5 7 Agree Agree Agree Agree Agree Agree Informat ion System 3 Strongly Agree Strongl y Agree Strongly Agree Strong ly Agree Strong ly Agree Strongl y Agree BSIS 3 Strongly Agree Neutral Strongly Agree Strong ly Agree Strong ly Agree Strongl y Agree BSIT 1st Strongly Agree Agree Neutral Neutra l Strong ly Agree Agree BSIS 3rd ye ar BSIT 3 BSIT 1 ok kaau inyo system pero naa kot nadunggan sa uban tao nga naa daw bug gamay pero kung sa mobile kay ok ra kaau :) i love you joseph and idol tka! 36 37 3/1/201 4 21:01:0 1 3/1/201 4 Agree Neutral Disagre e Strong ly Agree Strong ly Agree Neutral Strongly Agree Strongl y Agree Agree Strong ly Strongl y unya naay natabang imo mga kauban?? Where do you get your data for the Student IDs? i believed some ENROLLED Alumni can vote. It'll be better if there are more laptops or mediums to be use to make the election more 84 . I know that this system can go a long way and that you guys can carry out these improvements(I'm pretty sure). for the love of SCS. We can lend some helping hands if you would need some. 38 39 40 41 42 43 21:01:1 1 3/1/201 4 21:02:0 5 3/1/201 4 21:05:3 2 3/1/201 4 21:17:1 6 3/1/201 4 22:01:3 0 3/2/201 4 0:30:36 3/2/201 4 20:33:4 8 Strongly Disagre e Agree agree Agree Agree convenient and fast. and i push natin to. wala ninyu gi pa test sa public daan. idol! sure na ang future BSCS 2n d BS IT 1 BSIT 3 BSIS II BSIT 1 ESETB 2 ESET-A 3 Strongly Agree Agree Strongly Agree Agree Strong ly Agree Strongl y Agree i like this idea. the important there is the system itself. it would make voting faster than ever. 44 4/4/201 4 Agree Strongly Agree Strong ly Strong ly Agree 85 . as a whole i am satisfied with this. GO SCS!!!! #wolSCSves :D Katung "unmark" thing. Strongl y Disagr ee Agree Strong ly Disagr ee Strong ly Agree Strongl y Disagr ee Strongl y Agree marc albaran. ang background-theme something! All in all. wat if mag failure of election? unsaon man tu? HUNA-HUNAA SA UNTA OY :( SOVERYYYYYYYYYYYYYYYYYYYYYYYYYD ISAPPOINTED. simple yet accurate. :) Tapos. para mapadali ang voting process next election. no need to make additional graphics or whatsoever. wat if sayup ang program ato? wla pud ninyu gi tagaan ug enough space ang mga tawo nga mu butar. i like the way it looks. ayus siya (y) Agree Agree Neutral Strong ly Agree Strong ly Agree Agree keep it up Strongly Agree Strongl y Agree Disagr ee Strongly Agree Strong ly Agree Neutra l Strong ly Agree Disagr ee Strongl y Agree Strongl y Disagr ee Disagre e Agree Agree Disagre e sure mo ato nga voting system? so very disappointed ato. SO VERY DISAPPOINTED lageeeee. 20:16:5 2 Agree Agree 86 . APPENDIX H Screenshots of the System Screenshot 1: Login Screen Screenshot 2: Login Validations Screenshot 3: Student Administrator Main Menu 87 . Screenshot 4: BEI search Screenshot 5: Ballots 88 . Screenshot 6: Edit Account Type Screenshot 7: Student Administrator Results 89 . PHP and HTML Programming). Iligan City Highschool/Secondary Education Diploma 90 . Iligan City. Philippines. (CodeIgniter.com “No one is dumb who is curious. worked on webpage design. EDUCATION Mindanao State University – Iligan Institute of Technology School Year 2010-2014 Bonifacio Avenue. Castillo 037 Zone 4 Barangay BagongSilang Lanao del Norte. Tibanga. Our team delivered a functioning hotel booking system on the final submission.” –Neil deGrasse Tyson PROJECT EXPERIENCE  2013 KASAMA electronic voting system  Software Engineering Class team project  As part of this class team project.APPENDIX I Curriculum Vitae Jansen P. Pala-o. The people who don’t ask questions remain clueless throughout their lives. Philippines Bachelor of Science in Information Technology – Major in Multimedia Systems La Salle Academy 2006-2010 Brother Raymund Jeffrey Street. Lanao del Norte. 9200 Mobile no.: +63905-602-8671 Email: jansencastillo@ymail. Tagalog. MS Excel. 2005 – 2010  La Salle Academy Alumni Association PERSONAL INFORMATION Nick Name: Jan Place of Birth: Iligan City Age: 21 years old Citizenship: Filipino Gender: Male Languages Spoken: English.Y. S. Dreamweaver. MS PowerPoint) and Prezi Desktop Presentation Program  Computer Hardware and Software Installation and Troubleshooting  Photography AFFILIATIONS/MEMBERSHIP  Knights of the altar of Saint Michaels parish Cathedral  Member. 2013 MSU-IIT  Software Freedom Day September. Flash. 2012 MSU-IIT SKILLS AND INTERESTS  Web Design using HTML/CSS  Knowledge in multimedia development tools(Photoshop. 1993 91 . Cebuano Legal Status: Single Religion: Roman Catholic Date of Birth: March 3.TRAININGS OR SEMINARS ATTENDED  11thIligan City Computing Fair September. After Effects)  Blogging (Wordpress and Drupal)  Basic Java programming  Proficient in Microsoft Office Applications (MS Word. worked on webpagedesign. or anybody.  Diamond Carwash Business  Project Management Class team project  As part of this class team project. Philippines. Iligan City Data Encoder – Trainee July 2014 – October 2014   Inputs sales and inventory reports into the system Assisted in maintaining monthly and annual sales and inventory reports compilation PROJECT EXPERIENCE  Hotel Booking System  Software Engineering Class team project  As part of this class team project. (Adobe Flash CS5 Professional. 92 .Rocky Balboa WORK EXPERIENCE Brother Brew Traders. then go out and get what you’re worth.: +63916-427-5287 Email: raoulkristofferceldran@yahoo. Cowards do that and that ain’t you.PHP and HTML Programming). if you know what you’re worth.com "Now. Tubod. You’re better than that!" . 9200 Mobile no. and not pointing fingers saying you ain’t where you wanna be because of him. Flash Programming). worked on storyboarding and design. Our team delivered a functioning game on the final submission. (CodeIgniter. But you gotta be willing to take the hits. Our team delivered a mock business project for our final. worked on the logo.Raoul Kristoffer D. Celdran 015 Celdran Compound. Tubod Lanao del Norte. or her.  Cowboys Hates Cockroaches flash game desktop application  Game Development Class team project  As part of this class team project. Macapagal Avenue. Corp. Our team delivered a functioning hotel booking system on the final submission. Iligan City Highschool/Secondary Education Diploma TRAININGS OR SEMINARS ATTENDED  11thIligan City Computing Fair September. Lanao del Norte. MS Excel. 2013 MSU-IIT  Committee  Conducted Game Exposition in Game Development class project SKILLS AND INTERESTS          Web Design using HTML/CSS Web Programming using PHP/Javascript Database design and management in PostgreSQL Knowledge in multimedia development tools(Photoshop. Conducted and Presented Usability Test on Iligan Computer Institute(ICI) website  Team project  University School Website Design  Penn Foster online project EDUCATION Mindanao State University – Iligan Institute of Technology School Year 2010-2014 Bonifacio Avenue. MS PowerPoint) and Prezi Desktop Presentation Program Computer Hardware and Software Installation and Troubleshooting Photography 93 . After Effects) Blogging (Wordpress and Drupal) Basic Java programming Proficient in Microsoft Office Applications (MS Word. Dreamweaver. Tibanga. Flash. Pala-o. Philippines Bachelor of Science in Information Technology – Major in Multimedia Systems Penn Foster College May 2014 – September 2014 La Salle Academy 2006-2010 Brother Raymund Jeffrey Street. Iligan City. (AIITAFI)  2010 – present Junior Information Technology Society (JITS). Cebuano 94 . S. Tagalog.AFFILIATIONS/MEMBERSHIP    Association of IIT Alumni Foundation. 1993 Place of Birth: Iligan City Citizenship: Filipino Languages Spoken: English. MSU – IIT  Member. 2010 – 2014 La Salle Academy Alumni Association PERSONAL INFORMATION Nick Name: Topet Age: 21 years old Gender: Male Legal Status: Single Religion: Roman Catholic Date of Birth: August 1.Y. Inc. 0 (an Adobe Flash tower defense game)  Introduction to Games: Theory and Design class team project  In charge of the game design.  Usability Test on Iligan Computer Institute(ICI) website  Class team project 95 .  Doodle Outbreak v1. graphics.  College Student Hub (a project proposal) o Technical Writing class team project o Assigned in providing necessary documentation for the project.com “Life is what we make it. and scripting. Sitio Central Brgy.  Granny’s Comfort  Project Management and Quality Systems class team project  A business proposal that aims to establish a business that provide equipment and necessities for the elderly.Nathaniel A. Philippines Mobile no. always has been. tasks include illustrations and other graphics.  Pepe’s Adventures (an Adobe Flash point-and-click courseware) o Instructional Software Design and Development class team project o Lead designer. General Purok I.: +639358736016 Email: general. 8400 Surigao City.nathaniel123@gmail. Luna. always will be.” –Grandma Moses WORK EXPERIENCE Freelance Online Article Writer August 2012 – October 2012 PROJECT EXPERIENCE  Electronic Class Record System  Software Engineering Class team project  Assigned in providing necessary documentation for the project. Religion: Roman Catholic Cebuano. MSU – IIT  Member. MS Excel. (AIITAFI)  2010 – present Junior Information Technology Society (JITS). Inc. MS PowerPoint) Computer Hardware and Software Installation and Troubleshooting Web Design Project Management Writing Photography AFFILIATIONS/MEMBERSHIP   Association of IIT Alumni Foundation.Y. S.EDUCATION Mindanao State University – Iligan Institute of Technology(2010-2015) Bonifacio Avenue. 2013 MSU-IIT  Committee  Conducted Game Exposition in Game Development class project SKILLS AND INTERESTS         Graphic design and illustration Adobe Applications (Photoshop. 1993 Age: 21 years old Place of Birth: Surigao City Gender: Male Citizenship: Filipino Legal Status: Single Languages Spoken: English. 9200 Iligan City. Natty. Tagalog. Tibanga. Lanao del Norte. Surigaonon 96 . Philippines Bachelor of Science in Information Technology – Major in Multimedia Systems TRAININGS/SEMINARS ATTENDED  11thIligan City Computing Fair September. Illustrator. Flash) Microsoft Office Applications (MS Word. Yel Date of Birth: June 21. 2010 – 2014 PERSONAL INFORMATION Nick Name: Nat-Nat. 97 . 1 About the System KASAMA Electronic Voting System is a system created for the yearly election of officers intended for the KASAMA – the official supreme student government of the Mindanao State University-Iligan Institute of Technology. The system also provides password-protected user accounts for data security. Therefore. So time has arrived that the paper based traditional voting system which has already proven itself an inefficient and slow procedure is about to change.2 Intended Users and System Features The system provides four user types: main administrator. switching from manual system to a computerized system would help the institute to achieve efficiency. from data collection procedure to counting of the votes is a manual process.1. candidate reports and voting result reports. These reports can be retrieved whenever it is needed. Using the decade old election system to collect votes is no longer considered efficient due to the various recurring errors. Users of the system are able to manage student and candidate profiles. The system that is being followed currently. consistency and data integrity for the KASAMA voting process. 1. So. Each user is required to log in first before he/she can access the system and to log out before he/she can exit from the system. System Features Main (DSA) Admin Student Admin Upload List Student  View List Student   Edit Type Account   Edit ID number   Edit password   Student   Search BEI Student   98 . Table 1. monthly or annually. Moreover. student administrator. Board of Election Inspector (BEI) and the student.1 illustrates the system’s features including the different access rights for different user types. the system also offers the users to view the student reports. we are proposing an electronic voting system for the institute. may it be daily. Refer to the table below for the default log-in combination for each type of user.3 Operating Environment To ensure maximum system performance. the work station at least have the following requirements.Profile Student  View Profile Select Candidate  View Candidate  Delete Candidate  Cast Vote Print Result Election        Table 1.     One workstation where the central database resides Three or more workstations connected by a router PostgreSQL Server installed in every workstation WAPPSTACK cross-platform web server solution stack package installed in every workstation 1.1 Table of system and corresponding access limitations 1. users must be logged-in order to access the system. Main Administrator: http://localhost/election/kasama/dsa Username Admin Password DSA Password Student Administrator: http://localhost/election/kasama Username ID number 99 .4 Preliminary Requirements For security and access control purposes. 100 . confirmations.1 Buttons Buttons Description This button is used to log in the system. 1.5 Conventions The user manual follows a font convention for easier access. greetings and labels.5.Password Student Password Account Type Admin College College BEI: http://localhost/election/kasama Username ID number Password Student Password Account Type BEI College College Student: http://localhost/election/kasama Username ID number Password Student Password Account Type Student College College 1. Screenshots used in this Manual are in Windows 8. This button is used to cancel actions in the system. This system uses Helvetica for all buttons.1. This icon is used when the administrator wants to delete a record or a single record in the database. This button is used when the user wants to edit a record in the database. e-mail us at the following: Name Email Address Celdran. This button is used to submit and store the votes in the database. [email protected] Contact Us For questions. This icon is used to indicate that the student has voted already. This button is used to add candidates into the database by choosing a student.com 101 .5. 1. This icon is used when the administrator wants to delete all records from the database.This button is used when the user wants to save the record in the database. 1.2 Icons Icons Description This icon is used when the administrator would like to print the voting result. Raoul Kristoffer D. comments and suggestions. This icon is used to indicate that the student hasn't voted yet. 1 Login Screen Figure 2.com General. When using the system for the first time. Figure 2. The user should click "log-in" button to access the system.1) appears once the system is executed. password.Castillo.1 Prompts the following if an error occurs. Nathaniel A.2) appears once the system is executed.2 Login Screen (Students) The Log-in Screen (Figure 2.1 Login Screen (Main Administrator DSA) The Log-in Screen (Figure 2.4 Preliminary Requirements). 2. Jansen P. When using the system for the first time. account 102 .nathaniel123@gmail. the user should use the combination of username. general.com Chapter 2: Getting Started 2. jansencastillo@yahoo. the user should use the combination of username and password as stated in the (1. this is the common module used by the three different accounts of students which are student admin. The user should click "log-in" button to access the system. Chapter 3: Main Administrator and Candidate Module (DSA) The first user is the main administrator.type and college as stated in the (1. 103 . BEI(Board of Election Inspector) and the students in general who are only voters. you will be directed to the main menu as seen in Figure 3 Main Administrator Main Menu.2 Login Screen Figure 2. Figure 2. Also.2 Prompts the following if an error occurs. Upon successful login.4 Preliminary Requirements). some responsibilities are not part of the sequence of tasks which are discussed below: 3. 104 . First. On the upper part of the main menu screen.1 Deleting of Students As shown on Figure 3 on the "Add Students" section. 3. 3.1 Guide Strip The guide strip on the middle of the page shows the steps of the tasks the main administrator can do. However. the red trash icon must be clicked in order to delete all student lists. you will be directed back to the Login Screen (Main Administrator DSA . Upon doing so.1).Figure 3 Main Administrator Main Menu Welcome to the Main Administrator main menu. Steps are labeled from "left to right" as shown on Figure 3 which are the sequences of task.2.Figure 2.2 Additional Tasks All of the tasks are simply discussed on the Guide Strip above. you will see a navigation bar containing tasks that the Main Administrator can do. note that you can log out at any time by clicking on the [Logout] button on the upper right portion of the screen. Figure 3.2.2.2.2. Figure 3.1 Delete Students Figure 3. the student list will fail if candidate lists are not deleted first.2 Deleting of Candidates Figure 3.2. all students will be deleted. this can be done preferably every time before elections because new student list will be provided. 3.Figure 3.2 shows the list of candidates.1 Prompts the confirmation box As shown on the confirmation box.2. and by clicking the red trash icon.2 105 .1 shows the "Add Students" Section. the purple minus icon must be clicked in order to delete a single candidate. 2. 3.2. on the "View Candidates" section. the main administrator can still decide to continue or prevent the action. the user will be redirected to the candidates page.Figure 3. Figure 3.3 Deleting (all) Candidates Based on Figure 3.2 Prompts the confirmation box As shown on the confirmation box.2. the main administrator must choose on the list of colleges or from the KASAMA Institute candidates on what list to delete first.2.2. 106 .3 Delete (all) Candidates After choosing from the list. like as shown on Figure 3. a red trash icon is displayed on the lower left corner of the page.2.3 List of Colleges and the KASAMA Institute Figure 3. you will directed to the main menu as seen Figure 4 Student Administrator Main Menu. 107 . First.3 in order to delete all candidates from a specific department. Figure 4 Student Administrator Main Menu Welcome to the Student Administrator main menu. Student Administrator Module (College) The second user is the student administrator that has been assigned by the DSA for every college. However on deleting the candidates.Figure 2. the main administrator can still decide to continue or prevent the action. Upon doing so. you will see a navigation bar containing tasks that the Administrator can do. the main administrator must choose from the List of Colleges and the KASAMA Institute as shown on Figure 3. Upon successful login. note that you can log out at any time by clicking on the [Logout] button on the upper right portion of the screen.3 Prompts the confirmation box As shown on the confirmation box. Chapter 4.Figure 3. On the upper part of the main menu screen. you will be directed back to the Login Screen (Students .2).2.2. it shows that the searched student hasn't voted yet. you will be directed to the main menu as seen in Figure 5.1.2 Hence.2.1.1 BEI Main Menu Figure 5.1 Hence.2 [Search student] Figure 5. is shows that the searched student has already voted. Figure 5.4. However.1.1 Guide Strip The guide strip on the middle of the page shows the steps of the tasks the main administrator can do. Upon successful login. Board of Election Module (BEI) Module 5.2.1.1.1 BEI Main Menu. 108 . steps are not sequential.1 [VIEW STUDENT LIST] The third user is the BEI which is assigned by the student administrator. Chapter 5. Figure 5. the strip serves only as a guide for the student administrator. you won't have to log-in to a student voters account since you also have a ballot in your own module.5.2.1 [BEI Exclusive Ballot] where you can vote. 109 .2.2 Vote for CEC to vote for your College Executive Council(CEC).1 Ballot Hence. Figure 5. click the BEI tab and then click Vote. and you will be directed to the screen in Figure 5. First of all.2 [VOTE] As a student BEI. if you are successful you will directed to Figure 5.2. 2.3 Thank you screen 5. 110 .Figure 5.2.2 Vote for CEC Hence. In case you might be wondering.3 Thank you screen. Figure 5.3. you will redirected to the Thank you screen shown on Figure 5. they are always available at the BEI tab and click the [CEC Results] button. and you will directed to Figure 5.2.1 CEC Results.3 [CEC Results] If you wish to view the College Executive Council(CEC) results on your college. the Election results for the whole university will only be available in the Department of Student Affairs(DSA). if there are no errors. Figure 5. 111 .3.1. the same as what the BEI will see on the system.2.1 CEC Results Chapter 6: Student Module 6.1 [VOTE] Upon successful log-in of the student he/she will then be directed to the electronic ballot shown in Figure 5.