User-centered Approach and Low-Code Framework for Prototyping and Income-based Education

Authors: Irwan Alnarus Kautsar¹, Rama Sakti Hafidz Fadhilah Aziz¹, Muhammad Hilal Hamdi¹, Muhammad Ruslianor Maika²

¹ Department of Informatics, Universitas Muhammadiyah Sidoarjo, Indonesia
² Department of Islamic Banking, Universitas Muhammadiyah Sidoarjo, Indonesia

Published in: 2023 7th International Conference on New Media Studies (CONMEDIA), Bali, Indonesia, 6-8 December 2023
DOI: 10.1109/CONMEDIA60526.2023.10428254
IEEE: https://ieeexplore.ieee.org/abstract/document/10428254

Abstract

Entering the Society 5.0 era, the role of Higher Education level has increased as high demand for innovation. As part of it, agility in software development is primarily a skill set required when the student needs to "make real" their innovation. For first-year students, developing software or prototyping some software as a product is complex and hard to implement. Collaboration among students to learn to solve real problems as early as possible will be beneficial. On the other hand, designing software with attention to the Human Factor is necessary. This paper presents the implementation of User-centered Design Canvas and Low-Code Framework to support students conducting Rapid Prototyping as part of Income-based Education. As a result, an integration of UX design supportive tools and a low-code framework rapid prototyping platform has been developed. And 63% of students from 58 participants expressed that the developed platform helps the prototyping process.

Keywords: low-code, prototyping, user-centered design, case-based learning, supportive tool

I. Introduction

Software prototyping usually involves the implementation of raw ideas into coding. However, when some ideas are directly into Minimum Viable Products, the MVPs are always missing the vital component of the software as a product. The vital component is the Human Factors (HF). Such questions: "Should software as the system follows humans or vice versa (human follow systems)?" When humans as the users have been forced to "follow" the software, the software itself will be extinct. Those principles are the reason why curricula containing User-centered design are required.

The importance of User-centered software development could be learned through discussing existing systems, whether analyzing some "hype" apps or just adding some feature that is not yet available on the current systems. The best learning style to analyze existing systems is Case-based learning.

Therefore, there is an urgent need to have prototyping formulas (in software engineering) that could adapt to not only students in computer science majors but also students unfamiliar with code who could contribute to software development.

This paper presents the implementation of User-centered Design Canvas and Low-Code Framework to assist students while prototyping as part of learning activities.

II. Material and Methods

A. Income-based Education

For competitive advantage, the Ministry of Education Indonesian Government (MoE) proposed a curriculum called "Merdeka Belajar - Kampus Merdeka" [1], [2]. This curriculum encourages students as learners to have the flexibility to learn outside their major and even learn outside their classroom.

The newest regulation from MoE (No: 53 2023 about Higher Education Quality Assurance) states an alternative final project as the prerequisite for graduation. Students do not need to write a thesis to graduate; students can build a prototype or product.

In this paper, we enhance those learning styles into Income-based Education (IBE). It is not the opposite of Outcome-based Education (OBE), but bolding the "outcome" into "income." Students are not only creating prototypes but also obligated to sell the product or have an actual client willing to pay for the developed product as the outcome.

Table I. Income-based Education Metrics

In IBE, we classify the outcome into commercial or social value. If the proposed product is a commercial app, students must sell it or get a contract with a minimum IDR 500,000 (equivalent to US$ 32).

Topics for Income-based Education: 1. Digital platforms needed by college students as the users themselves 2. Digital platform for mitigating pandemics or other emergencies 3. Digital platform that people with disabilities need 4. A digital platform that enhances some features from any existing apps 5. A digital platform that supports sharia compliance on commerce transactions

B. User Experience (UX) Design Frameworks

When students graduate with building software as the prototype, as educators, we need to supply the student with the importance of the Human Factor. Several studies proposed UX frameworks to ensure that Human Factors are the priority in software development:

• Fraser [5] provides a UX maturity model incorporating HF for technological manifestations
• Kuusinen [6] proposes a UX framework for integrating UX in agile development
• Kremer [7] suggests the ExodUX model
• Zarour [8] presents a UX framework combining UX features and measurement methodologies

However, such frameworks have characteristics intended for practitioners, not first-year students.

Alina et al. propose using a canvas style for UX Design called User-Centered Design Canvas (UCDC). UCDC is a framework inspired by Business Model Canvas [9], [10]. Using UCDC will help UX designers to: 1. Understand the targeted user and market needs 2. Make a definition of product/market fit 3. Align the business goal for competitive advantages 4. Define Unique Value Proposition as the brand communication strategy

However, the results of UCDC implementation are half-baked ideas only. It needs to be developed into some prototype when discussing Minimum Viable Product (MVP).

C. Supportive Tool and Low-code Frameworks

Developing supportive tools is essential to support both lecturers and students in implementing learning activities. Low-code development platforms (LCDP) are getting wider since they offer prototyping acceleration [14][21]. LCDP offers software development processes more efficiently, including those with less coding expertise to participate in application development [15]–[17].

We take advantage of Frappe Framework REST API to integrate with our developed supportive tool. The Frappe framework uses a database-driven system that supports users in defining their database schema.

Fig. 1. Proposed architecture

We separate the presentation, service, and low-code layers. All layers communicate using HTTP. Users mainly access the presentation layer. Authentication and user management are serviced by user service. When students input the UCDC, it accesses Jinja HTML, JS, and CSS served by the Jinja templating engine. When students save the inputted UCDC, all data is sent to the canvas service and saved into SQLite DB.

Fig. 2. Log services

The Log Service is crucial because it provides data that lecturers can validate whether the learning process is on track. It records the IP Address of the students and provides information about collaboration conducted honestly.

Fig. 3. The GUI of developed supportive tools

The first step is for students to finish their UCDC entry. Next, students must select which UCDC part to develop into a web page. After selection, users need to define the DocType.

Fig. 4. DocType entries on low-code service

DocType is a requirement parameter that Frappe Framework requires to generate the Create, Read, Update, Delete form. When a user saves the DocType, it will create a table in a low-code layer and several files needed to serve the web page (person.json, person.js, person.py, test_person.py). This automation helps students accelerate the development process.

D. Experiment Method

58 students participated in the experiment, divided into three groups (A, B, and C). Groups A and B were given the designated topic: developing crowdfunding platforms. Group C was assigned to prototype some payment gateways.

Table II. Experimental Phase

Table III. Questionnaire Items

Likert scale formula:

$$P = \frac{N \times R}{I} \times 100\%$$

Where: P = percentage value, N = instrument response value, R = frequency, I = participants × highest value (58 × 5 = 290)

III. Results and Discussion

Table IV. Phase 1 Results

Both groups B and C (using supportive tool) sent the report before noon. Group A reports the accomplishment in the evening. Results showed acceleration when using the proposed framework.

Table V. Phase 2 Results

The average time students need to accomplish from raw ideas to finished product is 12 days. Two groups have been paid for their prototype.

Fig. 5. Example student success project

Fig. 6(A). Students perceptions — Income-based Learning and UX Design

Fig. 6(B). Students perceptions — UCDC and Supportive Tool

Fig. 6(C). Students perceptions — Low-code Supportive Tool

Key findings from Fig. 6: - Fig. 6(A): More than 71% of students express that Income-based Learning helps practice solving real-world problems and UX design is required for software development. - Fig. 6(B): 62% of students agree that UCDC helps understand user experience, 82% felt it was easy to use supportive tools, and 60% thought it was helpful designing UX using supportive tools. - Fig. 6(C): More than 62% state that the Low-code Supportive Tool is easy to operate and helps accelerate prototyping. 60% will use UX Design and Low-code Supportive Tools for the next project.

IV. Conclusion

The integration of developed UX design supportive tools and low-code framework for rapid prototyping are proposed, along with a new approach to Outcome-based Education called Income-based Education. Even though only two groups succeeded in getting income, the proposed method for combining prototyping and "Income-based" learning is promising. Whether paid or not, students express that "income-based" brings many benefits, such as having a portfolio, learning to collaborate, and experiencing managing some projects.

Acknowledgment

The authors thank Kementerian Pendidikan, Kebudayaan, Riset, and Teknologi and Universitas Muhammadiyah Sidoarjo for funding this work (Contract: 0217/E5/PG.02.00/2023, 027/SP2H/PT-L/LL7/2023, 098.02/II.3.AU/14.00/C/PER/IV/2023).

References

[1] S. M. Indrawati and A. Kuncoro, "Improving Competitiveness Through Vocational and Higher Education: Indonesia's Vision For Human Capital Development In 2019–2024," Bull. Indones. Econ. Stud., vol. 57, no. 1, pp. 29–59, 2021.
[2] S. Taridala et al., "Implementation of the Merdeka Belajar Program in Improving Teacher Performance and the Quality of Educational Services," Int. J. Membrane Sci. Technol., vol. 10, no. 2, 2023.
[3] Z. Matondang et al., "Evaluation of 'School Experience' course in online setting as an implementation of Merdeka Belajar," AIP Conference Proceedings, vol. 2590, no. 1, p. 030001, 2023.
[4] T. Triwiyanto et al., "Digital Technology Transformation and Empowerment of Technology," in 2022 8th ICET, pp. 293–297, 2022.
[5] J. Fraser and S. Plewes, "Applications of a UX Maturity Model to Influencing HF Best Practices," Procedia Manufacturing, vol. 3, pp. 626–631, 2015.
[6] K. Kuusinen, "BoB: A Framework for Organizing Within-Iteration UX Work in Agile Development," in Integrating User-Centred Design in Agile Development, pp. 205–224, 2016.
[7] S. Kremer and U. Lindemann, "Learning from Experience Oriented Disciplines for User Experience Design," in Design, User Experience, and Usability, pp. 306–314, 2015.
[8] M. Zarour and M. Alharbi, "User experience framework that combines aspects, dimensions, and measurement methodologies," Cogent Engineering, vol. 4, no. 1, p. 1421006, 2017.
[9] S. Evans et al., "Business Model Innovation for Sustainability," Business Strategy and the Environment, vol. 26, no. 5, pp. 597–608, 2017.
[10] A. Barni et al., "Integrating Agent Based Simulation in the Design of Multi-Sided Platform Business Model," in 2018 IEEE ICE/ITMC, pp. 1–9, 2018.
[11] A. Prelicz-Zawadzka and L. Zawadzki, "User Centered Design Canvas — First UX tool combining user needs with business goals," 2016. https://ucdc.therectangles.com
[12] M. Carrión-Toro et al., "iPlus a User-Centered Methodology for Serious Games Design," Applied Sciences, vol. 10, no. 24, 2020.
[13] I. A. Kautsar and M. R. Maika, "The use of User-centered Design Canvas for Rapid Prototyping," J. Phys.: Conf. Ser., vol. 1764, no. 1, p. 012175, 2021.
[14] D. Di Ruscio et al., "Low-code development and model-driven engineering: Two sides of the same coin?," Softw. Syst. Model., vol. 21, no. 2, 2022.
[15] E. Elshan et al., "An Investigation of Why Low Code Platforms Provide Answers and New Challenges," 2023.
[16] P. M. Gomes and M. A. Brito, "Low-Code Development Platforms: A Descriptive Study," in 2022 17th CISTI, pp. 1–4, 2022.
[17] S. Käss et al., "Practitioners' Perceptions on the Adoption of Low Code Development Platforms," IEEE Access, vol. 11, pp. 29009–29034, 2023.
[18] S. Curty et al., "Design of blockchain-based applications using model-driven engineering and low-code/no-code platforms," Softw. Syst. Model., 2023.
[19] H. Lourenço et al., "OSTRICH: a rich template language for low-code development," Softw. Syst. Model., 2022.
[20] F. Amato et al., "QuantuMoonLight: A low-code platform to experiment with quantum machine learning," SoftwareX, vol. 22, p. 101399, 2023.
[21] K. Rokis and M. Kirikova, "Challenges of Low-Code/No-Code Software Development: A Literature Review," in Perspectives in Business Informatics Research, pp. 3–17, 2022.

This is a preprint version. The final published version is available at IEEE Xplore.