**Developing Prototype in Online Class using Justinmind: A Covid-19 Story**
Noorihan Abdul Rahman1\*, Rozianiwati Yusof2, Nor Asma Mohd Zin3, Zuriani Ahmad Zukarnain4
1,3,4 Faculty of Computer and Mathematical Sciences, Universiti Teknologi MARA Cawangan Kelantan, Machang, Malaysia
2Faculty of Computer and Mathematical Sciences, Universiti Teknologi MARA Cawangan Negeri Sembilan, Seremban 3, Malaysia
Corresponding author: \* noorihan@uitm.edu.my
Received Date: \*date
Accepted Date: \*date
Published Date: \*date
**HIGHLIGHTS (Arial, 11)**
- Covid-19 has changed learning lifestyle globally.
- Changes in learning system development class has created difficulties initially due to unfamiliar routine and practice during teaching and learning among learners and instructors.
- Online prototype learning tool, Justinmind, manage tool help learners to develop their own prototype online and thus break the unfamiliarity during online software development class
ABSTRACT
*Covid-19 gives a drastic change in our lifestyle. In education, it affects on motivation, routine and the dilemma in using certain application. The university has taken various proactive measures for ensuring the productivity of their stakeholders. Students and instructors are changing their teaching and learning style which this impact on learning technology usage while having online class. This paper shares Covid-19 story in terms of learning system development online which is challenging for learners and instructors. They need to adjust themselves so that the message is conveyed, and problem is solved during the online class. This paper looks at how the learners and instructors manage their online class by using an online prototype tool, Justinmind, for assisting them to learn system development during Covid-19. The learners have been asked to plan, gather, and design the user interface according to the requirements stated previously. This study found out that there are some difficulties in conducting system development class in online mode since there is a change of routine as well as teaching and learning style. However, the difficulties have been addressed by the utilization of the technology and thus creating more exciting journey for the class regardless of the pandemic era.*
*Keywords: learner, instructor, system development, online tool, online learning,* *Justinmind*
# INTRODUCTION
In Covid-19 situation, learners need to cope with enforcing with online education globally. With the use of online learning, it offers various advantages in terms of accessibility (Adedoyin and Soykan, 2020). Online learning can bring convenience to the learners since it permits them to interact regardless of different geographical location and time with certain speed and performance (Adedoyin and Soykan, 2020). The paper elucidates that online learning must be supported by technology whereby it keeps up learners motivated and anticipated throughout their learning process. It varies with traditional classroom in a way that online learning is available all day long for seven days a week with an Internet connection.
There are various advantages on using online learning among learners and instructors. Firstly, online learning allows us to teach, learn and share at our own time and pace. With the limitation of doing in physical classroom, learners and instructors are making the adjustment to adapt with online interaction. However, this can be difficult for many people. Most of us are familiar with teaching in a physical space such as a classroom or labs. Online learning may be accessible anywhere but we may find some difficulty in getting used to the applications related to online learning (Horzum, 2017; Bolliger and Halupa, 2018).
# BACKGROUND STUDY
**Synchronous learning vs Asynchronous learning**
Online education consists of synchronous learning and asynchronous learning. Synchronous online learning happens in real time whereby learners and instructors online at the same time by using the same platform regardless of their locations. Whereas asynchronous online learning uses online platform without involving real time interaction. Communication activities among users can be improvised by using asynchronous tools or synchronous tools. Examples of asynchronous tools are email, mailing lists, newsgroups, asynchronous shared whiteboards and forum whereas synchronous tools can be instant messaging, synchronous shared whiteboards, chat or video conferencing (Dahlstrom-Hakki, Alstad and Banerjee, 2020). Figure 1 highlights the synchronous activities and asynchronous activities that are used by online students for designing and discussing the software development projects. The students were using online collaborative tool such as Justinmind for designing the user interfaces.
**Figure 1:** Elements of social presence during online interaction (Rahman, Mohamad and Showole, 2019)
**The use of Blended Learning: Combination of Online learning and Traditional Classroom**
**A study done by (Rahman et al., 2020) has highlighted students’ perception in blended learning. This study has found out that blended learning is acceptable by the students of Universiti Teknologi MARA Kelantan Branch. This has shown positive feedback on partipating in online activities for their learning purposes. This study involved 139 respondents from Faculty of Computer Science and Mathematics of UiTM Kelantan. There was about 56.67% students agree that blended learning that they have used can be applied to another subjects. While 40.67% students reflect that their learning style and results have improved by using blended learning. These results show positive impact on blended student among Science and Technology cluster in UiTM Kelantan Branch.**
**Challenges in Online learning**
**Online learning is not a one-way communication. If there is no interaction between learner and instructor, the outcome will result differently, and it will be difficult for learner to achieve their learning objectives. The concept of distance learning must be purified to allow students to learn online effectively which eventually encourage alternative learning access. There is a study in online engineering education which improved network communications and computer technologies to improve learning and teaching quality for engineering students (Elmunsvah, Hidayat and Patmantara, 2018). The study found out that the students should be provided with technology facilities for online engineering education and design capabilities for online learning and sufficient online technology to be virtually existed.**
**In implementing mobile learning, for instance, developer must examine whether users are ready and willing to use the application. There are also challenges in infrastructure, types of mobile devices if the user is using mobile learning, learning styles since different learning styles will produce different outcome for students. In designing web-based learning application, Activity Theory can aid the developer to identify learners’ factors in order to study users’ interaction with online learning systems (Liaw, Hatala and Huang, 2010). The study revealed that factors like learner’s active learning, multimedia instruction, problem-solving skills, teacher assisted as tutor contribute to the success of online learning success.**
**The interaction will be boring after some times. Some courses need outdoor activities. Learning online can be tiring after some times. The learners and instructors needs to utilize specific time in order to sustain users’ motivation. Finding the right tool can also sustain online learning activities. The challenge in establishing online learning is how to disseminate information effectively. The designer should consider several factors when designing the application. The objective of having online learning should be justified so that information can be conveyed clearly by user. In addition, online learning application must also be adaptive with different learning styles and different user profiles. A quality online learning must follow the needs from its user in order to meet learning objective (Schewe, 2016). Another study highlighted that e-learning might face difficulties not only in terms of its high cost and quality of content but also concern about interaction among user in user friendly manner. This facility can lead to higher cost since user-friendly facility must be made available 24 hours (Ettinger, Holton, & Blass, 2006).**
**In implementing mobile learning, there is a study stated that employees’ perception is essential in learning technology. Both learners and employees can give their views in learning technology effectiveness. Online learning developer needs to tackle requirements gathering in implementing satisfied technology for all the stakeholders (Percival & Percival, 2008). Looking at the outcome of mobile learning and web-based learning application, there is still lack of features that can motivate users and also optimize the use of learning application. In developing learning application, stakeholders must be aware the target in attaining successful learning application. User profile and social interaction in education must be taken into consideration to meet requirements for e-learning application. Hence, requirements in online education and mutual interaction in learning application are able to be justified.**
**User behaviour is also one of the factors that affect virtual social interaction. In mobile learning, for instance, user behaviour must be clarified in order to comprehend how mobile users respond with mobile learning application. Therefore, Technology Acceptance Model (TAM) has assisted the study to confirm users’ acceptance towards mobile learning. The study collected users’ response from online survey in terms of perceived of use, perceived of ease of use, perceived enjoyment and perceived mobility (Huang and Liaw, 2018). It can be concluded that customers have positive attitude towards mobile learning whereby different individual has different level of user acceptance.**
**There is also a study that depicted user behaviour and education practice using web-based learning environment by analyzing students in different semesters (Huang and Liaw, 2018). The outcome shows that students’ behaviour will change if instructor method of the teacher changed. Students think that web-based learning can give them more freedom, convenience whereby they can share ideas, innovation and activities. There are issues that can discourage them to use web-based learning such as problem in network, little communication between teachers and students where they cannot raise questions and get answer at instance.** **The online class utilizes mobile design development knowledge by using Justinmind for assisting students in designing the interfaces based on the preliminary studies. Initially, the students studied user behaviour and its usage and they started designing the interfaces based on users’ background.**
**Next, section Methodology explain the process that is taken for demonstrating elements that may contribute to online learning which is the virtual communication.**
# METHODOLOGY
This section highlights steps in developing prototype in online class. empowering social interaction in online learning. Figure 2 visualizes the steps for conducting this study.
**Figure 2:** Steps in Developing Prototype in Online Class
**Step 1: Project Identification and Planning**
Project identification and planning is the first stage in software development process. During this stage, students are provided with course information and project expectation for the development class. Each group needs to produce a feasibility study report before next phase begins. the students and their instructors need to perform a series of online discussion to revise their information system development proposal. Each group needs to contribute ideas using Google Meet session to promote active participation among learners.
**Step 2: Requirement Modeling and Interaction Analysis**
Requirement modelling and interaction analysis deals with providing the team with a finalized requirement set. each group need to come out with their Software Requirements Specification (SRS) for the proposed information system. e-SRS is provided for the project to encourage participation in online collaborative learning among group members.
**Step 3: Storyboard**
Storyboard is important as it produces prototype for each project. The learners need to come out with idea of proposed information system. during this stage, the learners already identified element in each page such as, input, process and output.
**Step 4: Implementation**
Many students face difficulties in developing user interface during online learning mode. Therefore, Justinmind (Justinmind, 2021) has been introduced in this class to support online development for all learners and to help them visualize their design. Justinmind is a suitable application development platform to be used in online class since it allows the learners to produce prototypes and wireframes compatible with different screen sizes and devices.
**Step 5: Evaluation**
In online class, the instructors are the evaluator for their prototypes. There will be a brainstorming session between the instructors and the learners regarding their prototype drafts. Each group improvise their draft based on the recommendation by the instructors.
Next section elaborates findings and discussions on the impact on social presence towards online software development class and
**FINDINGS AND DISCUSSIONS**
**Social Presence in Online Participation During Class**
This study reveals the importance to have social presence as the support for social interaction in online learning. During students’ interaction, the instructors motivated the students by giving feedback regarding their prototype. The needs of social presence value in this online class is required for sustaining the lively group discussion and to create warmth environment among them. Social presence is an element which can help to connect and create bonding among users. Online learning can be considered as successful if social presence is achieved by users during online participation (Noorihan Abdul Rahman & Sahibuddin, 2018). The elements of social presence such as connectedness, comfortable existed during online group discussion for designing software.
The elements of quality online learning comprised of technology, interaction, content and services. These indicators contribute to learner aspects, technology aspects as well as social aspects in online learning. Social aspects mentioned are learning style and intelligence, learner’s attention, types of learners, collaboration issue, attitudes and interest and how effective the learning application to the learners. These social aspects can help to increase users’ participation in during learning process. Thus, it can produce effective learning environment albeit not in the physical setting. Social presence exists in this class by looking at how comfortable the students are.
The anticipation of learners into the software development process can be seen from communication between group members using e-SRS. The group members collaboratively add requirement in the Google Document to synchronize the updates. This can ease the learners and therefore increase their motivation to work online. Figure 3 show an example of the content in e-SRS document.
**Figure 3:** e-SRS content for Hantu Batik Application
The learners were also anticipated by using Justinmind tool since they can easily visualize the user interface as stated from the requirements. Figure 4 to Figure 6 shows examples of interfaces designed by a group using Justinmind collaboratively.
**Figure 4:** Example of Input Interface for Hantu Batik Application
**Figure 5:** Example of Process Interface for Hantu Batik Application
**Figure 6:** Example of Output Interface for Hantu Batik Application
**Students’ Feedback in using Justinmind Tool**
A user experience survey (Dewi, Dantes and Indrawan, 2020) has been distributed to 59 students of Diploma Computer Science and Bachelor of Information Technology in UiTM Cawangan Kelantan. This result of the survey has been visualized in Figure 7, Figure 8 and Figure 9. The authors have prepared the results in 3 bar chart for 3 questions in Likert scale format. The Likert scale questions to portray Justinmind usage are shown below:-
‘After using Justinmind tool, what is your experience towards Justinmind tool?’
- Annoying – Enjoyable , Boring – Exciting , Conservative - Innovative
**Figure 7:** Result for User Experience – Annoying / Enjoyable
Figure 7 depicts majority of students think that Justinmind tool is enjoyable to be used during software development class. The tool can help them to understand on how to produce a system prototype even though they are communicating using online software. 84.8% of students with scale of 5,6 and 7 thinks this software is enjoyable and this makes the online class enjoyable as well.
**Figure 8:** Result for User Experience – Boring / Exciting
Figure 8 depicts majority of students think that Justinmind tool is exciting in design user interfaces online. Although it is not a face to face class, Justinmind helps to create exciting environment for student whereby they can play around with the design. This exciting element has also led to increase of social presence value during class. 81.3% of students with scale of 5,6 and 7 thinks this software is exciting to be used for accomplishing their tasks.
**Figure 9:** Result for User Experience – Conservative / Innovative
Figure 9 reveals majority of students think that Justinmind tool is an innovative approach in teaching software development class. The value of social presence in this study is highlighted in the positive responses from most of the students. 74.6% of students with scale of 5,6 and 7 thinks it is an innovative method for their class in using Justinmind since it helps them to understand the concept of designing user interfaces. to create exciting environment for student whereby they can play around with the design. This exciting element has also led to increase of social presence value during class.
**CONCLUSION AND RECOMMENDATIONS**
The courage in collaborating using Justinmind can motivate the achievement of online learning operation and this can be accomplished by having the right tool among learners. By using Justinmind, it helps the students to feel enjoyable, exciting and positive towards the tool. This will indirectly increase the values of social presence whereby it is needed to sustain online class. Instructor should also help in giving guidance to students in collaboration by coaching them on how to collaborate, setting up boundaries towards the given task using Justinmind. Students’ attitude is important in collaboration since it is the indication whether learning community is active and participates in sharing and learning knowledge. By using Justinmind, it allows students to understand the learning process in this new norm especially during Covid-19 outbreak. The needs of social presence can be seen in support of online software development class during Covid-19. In conclusion, regardless of challenges of online learning and the future outcomes, learning must not stop and must be improvised to build continuous and provide efficient learning environment as time progress.
**ACKNOWLEDGMENTS**
**
**I would like to thank Ahmad Khaliff Amirul bin Kamaruzzaman, Muhammad Aqil bin Mat Daud, Muhammad Aiman Izzuddin bin Abdul Latif, Muhammad Faris Iskandar bin Zulkifli and Nik Muhammad Lutfi bin Mat Zain for collaborating with this study. I also would like to thank Universiti Teknologi MARA Cawangan Kelantan and my colleagues for supporting the journey of this research.
**REFERENCES**
Adedoyin, O. B. and Soykan, E. (2020) ‘Covid-19 pandemic and online learning: the challenges and opportunities’, Interactive Learning Environments, pp. 1–13.
Bolliger, D. U. and Halupa, C. (2018) ‘Online student perceptions of engagement, transactional distance, and outcomes’, Distance Education, 39(3), pp. 299–316.
Cozart-Lundin, A. and Matthews-DeNatale, G. (2021) ‘Embracing Opportunities for Openness in Online Learning’, Teaching and Learning Together in Higher Education, 1(32), p. 4.
Dahlstrom-Hakki, I., Alstad, Z. and Banerjee, M. (2020) ‘Comparing synchronous and asynchronous online discussions for students with disabilities: The impact of social presence’, Computers & Education, 150, p. 103842.
Dewi, P. W. S., Dantes, G. R. and Indrawan, G. (2020) ‘User experience evaluation of e-report application using cognitive walkthrough (cw), heuristic evaluation (he) and user experience questionnaire (ueq)’, in Journal of Physics: Conference Series. IOP Publishing, p. 12024.
Ellingson, L. L. (2018) ‘Pedagogy of laughter: Using humor to make teaching and learning more fun and effective’, Teaching with sociological imagination in Higher and further education, pp. 123–134.
Elmunsvah, H., Hidayat, W. N. and Patmantara, S. (2018) ‘Digital Literacy Skills of Informatics Engineering Education Students as the Basis for Online Learning Implementation’, in 2018 International Seminar on Application for Technology of Information and Communication. IEEE, pp. 257–260.
Horzum, M. B. (2017) ‘Interaction, structure, social presence, and satisfaction in online learning’, Eurasia Journal of Mathematics, Science and Technology Education, 11(3), pp. 505–512.
Huang, H.-M. and Liaw, S.-S. (2018) ‘An analysis of learners’ intentions toward virtual reality learning based on constructivist and technology acceptance approaches’, International Review of Research in Open and Distributed Learning, 19(1).
Justinmind (2021) Justinmind: All-in-one prototyping tool for web and mobile apps, Justinmind. Available at: https://www.justinmind.com/ (Accessed: 24 April 2021).
Lam, C. K. C. et al. (2019) ‘Experiential learning in doctoral training programmes: Fostering personal epistemology through collaboration’, Studies in Continuing Education, 41(1), pp. 111–128.
Liaw, S.-S., Hatala, M. and Huang, H.-M. (2010) ‘Investigating acceptance toward mobile learning to assist individual knowledge management: Based on activity theory approach’, Computers & Education, 54(2), pp. 446–454.
Rahman, N. A. et al. (2020) ‘Students’ Perception in Blended Learning among Science and Technology Cluster Students’, Journal of Physics: Conference Series, 1496, p. 12012. doi: 10.1088/1742-6596/1496/1/012012.
Rahman, N. A., Mohamad, R. and Showole, A. (2019) ‘Artefact-based approach for improving social presence in e-learning’, International Journal of Innovation and Learning, 25(4), pp. 412–429.
Schewe, A. (2016) ‘Making student engagement visible: Using self-determination theory to examine how two social studies teachers support students’ needs for autonomy, competence, and relatedness’.
Tolman, S. (2017) ‘Academic dishonesty in online courses: Considerations for graduate preparatory programs in higher education’, College Student Journal, 51(4), pp. 579–584.