Participatory Design in the Development of Animated Comic on Website

Participatory design is a method that involves stakeholders in each design process, from the beginning to the end of the process. This method focuses on the opinions expressed by the participants. This method refers to Scandinavian method of participatory design. This paper presents how to build an animated comic website that fits the needs of end user. The main participants are the 11th grade students of SMAN 3 Lamongan in East Java, Indonesia, and supported by the history teacher and an IT expert.


Introduction
Participatory design is a method that involves stakeholders in the design process from beginning to end [1]. The keyholder of this method is participants [2]. Stakeholders in participatory design can include anyone, from designers or development teams, clients, users, and reviewers. In practical, the primary method of the participatory design process includes workshop and design sessions [3]. The aim of this process is to explore ideas from the participants.
The workshop is conducted to show the initial prototype or design as a media to get responses or reviews from the participants. Meanwhile, the design session is a process of obtaining data from participants as reference user in the entire design process. The main characteristic of participatory design is to allow users to participate in the design process, improve their skills, build a sense of belonging to results, increase self-confidence, and give them a voice in decision making [1][2][3][4].
In certain projects, some processes involve students as participants in the stages of designing, negotiating, and making decisions. When students are actively involved in the design process, the goal is to focus on their learning context and needs [2]. This paper will explain how to interact and gain responses from seven 11th grade high school students in designing an animated comic website by raising the life story of Pangeran Diponegoro, one of Indonesian patriots who fought against the Dutch invaders in 1825-1830 [5] 2 Interactive learning media Interactive multimedia is a multimedia display designed to have functions to inform messages and have interactivity with users [6]. So, interactive learning media can be used to make it easier for students to learn the subject matter delivered by the teacher and overcome the limitations of space, time, energy, and senses. For this reason, the animation is needed because now users want a responsive and interactive experience [7].
According to the book Smaldino, Lowther and Russel that translated by Arif Rahman, the advantages of interactive media are: i) Enables students individually to control the pace and sequence of learning that gives a lot of control over learning outcomes; ii) Students who have special needs; iii) Provides a multisensory experience, which can be used at the level of teaching, improvement, or basic enrichment; iv) Student participation increases [8].

Participatory design process
In this study, the stakeholders involved in the participatory design process are including a history teacher at SMAN 3 Lamongan, an IT expert, and seven students as end users.

Data collection
The first step is to interview teachers and students for media needs to support learning in history lessons ( Figure 1). A history teacher, Enny Kusmining, explained: i. Audio visual can help students in understanding historical lessons. ii. Due to the demands of the curriculum, it makes students less. iii. The demands of a teacher who must innovate to prepare learning methods. iv. One of the media that can be utilized is comics by providing interesting illustrations. v. Pangeran Diponegoro's comics can be included in the historical lessons in 11th grade. a) b)

Fig. 1. Testing and interview website mockup, a) interview with students, b) interview with teacher.
Next is the opinion of students about their needs of the media supporting learning. They give 3.3 out of 5 values for their sufficiency in learning through history books. As many as 71 % of students use more print media than digital media for learning. Then for print media used for learning, 43 % like textbooks, 14 % like comics, 29 % like magazines, and 14 % like newspapers. Moreover, for digital media that is preferred to study, as many as 86 % like websites and 14 % like social media. As well as all students expressed interest in the story of Pangeran Diponegoro.
The second step is studying the existing product in the form of a similar website, as references for making this comic website. Among them are: i. The Boat, by Nam Le and adapted by Matt Huynh, https://www.sbs.com.au/theboat/. ii. The promotion of a Peugeot Hybrid4 car, http://graphicnovel-hybrid4.peugeot.com/ . iii. Makeup process by the AMC hit show, https://www.cabletv.com/the-walking-dead .

Design process
This paper adopted an Indonesian hero comic entitled "Pangeran Diponegoro, Pahlawan dari Gua Selarong". This comic is the work of Bawantara, Ekaristi, and Dwi which was published on 1 January 2013 by the publisher Anak Kita.
In the mockups making stage, editing using Adobe Photoshop and Adobe Muse to help design before being applied in programming languages ( Figure 2). Then, the mock-up will be assessed by teachers and students. The teacher was explaining indicators of learning media: i) It can distinguish characters according to their roles; ii) The Pangeran Diponegoro icon must stand out and fit the historical picture; iii) The chronological order is clear; iv) The material described is quite general. From students, the results of the assessment are in Table 1.

Product development
This comic will be accessible with mobile devices and the desktop. The stages of making are when comics are implemented in HTML, CSS, and JavaScript. The implementation of comics to websites is done sequentially starting from comic covers, character recognition, introductions, panels, word balloons, decorations, installation of web animations, and audio. Table 2 is a comparison between the results of the website display on desktop, mobile, and the book version of the comic.

User test
Then, evaluation is carried out by seven 11th-grade high school students ( Figure 3). First, the average reading duration of 17 min and 3 s. Following the recommendations of Rizki Edmi, Director of the Center for Neuroscience at the University of Muhammadiyah Prof. Dr. Hamka, that the ability of students to absorb lessons well on average is only 20 min [9]. Next, interview students to find out their satisfaction about panels, layout, text, buttons, button response, animations, decorations, and audio.

Expert reviews
Then, evaluation is carried out by informatic expert and history teachers ( Figure 4). First, the response from informatics experts, Hardi Agung Wibowo, which is about the performance of the website so that when released can be enjoyed to the fullest. According to him, the website responsiveness can adjust the type of device, the text can be read correctly, website navigation is easy to run, and the access duration of eight seconds is fast enough for this type of website.

Result
Each response will be summarized into percent in Table 3. From the results of the user test, each student's response is then transformed into values determined and calculated using the Nielden Success rate formula below [10].  The value is then processed using the following Equation (1): ∑s + 0.5 × ∑p ∑respondent × ∑questions Success if the value is higher than 50 % in Equation (2) [11]. (2) The results obtained at 94.6 %. According to Nielden's success rate formula, this results can be declared successful because above the minimum 50 % success threshold. It can be concluded that the website is in accordance with what is expected by students. Than, the results of interviews from experts, this website can run quite well and website content display can be easily analyzed by students.

Conclusion
In the participatory design methodology, there were several participants participating, namely history teachers, informatics expert, and the respondents consisted of seven 11th grade high school students. The advantage of this method was to take shorter data and students respond more while more. Based on the results of a review by experts, that this website can be a supporting media for learning on historical lesson, 11th-grade high school. In the user test is working, the success rate of the comic website from the Nielden's successa rate formula was 94.6 %.