- King Mongkut's Institute of Technology Ladkrabang, Bangkok, Thailand
Purpose: The increasing ubiquity of smartphones has created a growing demand for web designers skilled in creating responsive, user-centered, and smartphone-accessible websites. However, Thai undergraduate students often lack specialized training in mobile website design, highlighting a critical gap in digital education. While cooperative and blended learning has been recognized as effective pedagogical strategies, there is limited research on how these approaches can be integrated to address specific skill gaps in mobile web design. This study aims to develop and evaluate a Collaborative-Blended Learning Management Model (CBLMM) to enhance students’ proficiency in smartphone website design.
Methods: The CBLMM was developed by synthesizing cooperative and blended learning literature and a needs assessment focused on mobile web design competencies. The model consists of six key stages: (1) online self-study, (2) in-class lectures, (3) group activities, (4) project presentations, (5) summarization and evaluation, and (6) discussion and reflection. The model was evaluated by nine experts using a connoisseurship approach, assessing its usefulness, feasibility, appropriateness, accuracy, and effectiveness. To test the model’s efficacy, an experimental study was conducted with 19 third-year students enrolled in a web design course.
Results: Expert evaluations indicated that the CBLMM received high ratings across all assessment criteria. The experimental results showed a statistically significant improvement in students’ mobile website design skills, surpassing the 60% benchmark with significance at p < 0.05. Post-learning assessments also revealed marked improvements in user experience (UX) design compared to pre-learning performance. The effect size analysis indicated a moderate practical impact on skill development (d = 0.44) and a significant effect on academic achievement (d = 1.18).
Discussion: These findings suggest that structured, collaborative, and blended learning approaches can effectively equip students with essential digital design skills, filling critical gaps in higher education curricula. The study contributes to the field by demonstrating the CBLMM’s potential for enhancing mobile web design education, with broader implications for curriculum development and instructional design. Future research should explore the model’s applicability in diverse educational settings, examine long-term skill retention, and integrate emerging technologies such as AI-driven adaptive learning to refine digital education strategies further.
Introduction
Information technology plays a significant role in life, work, economy, and education. Data management must facilitate rapid and efficient information storage, retrieval, analysis, and processing. Technology allows convenient access to data anytime and anywhere using various devices, automates data processing, and enhances work efficiency. It also enables fast interactions through channels such as email, social media, and chat, supporting diverse communication forms. As mobile device usage continues to increase, businesses and organizations must ensure their websites are mobile-friendly to accommodate user needs. Mobile-friendly websites improve user experience by optimizing content and usability for touchscreens, making information easier to access and interact with, ultimately increasing visitor engagement and retention.
Researchers have explored the essential skills required for effective website design, identifying elements such as color tones, images, element arrangement, and simplicity as critical to user experience (Longstreet et al., 2021). The website design process typically involves user research, planning, wireframing, prototyping, visual design, and construction. Additionally, mobile website design skills require expertise in six key areas: website design planning, user research, website content design, visual and interaction design, navigation design, website prototyping, and website construction (Borriraklert and Kiattisin, 2021; Jamaludin and Henderi, 2024). These competencies are essential for developing user-friendly digital interfaces that function across multiple devices.
While prior studies emphasize the importance of website design and mobile accessibility, many undergraduate students, particularly in Thailand, lack sufficient training in mobile website design, leading to a gap in digital education. According to Wood (2025), well-designed websites create strong first impressions and improve usability, particularly on mobile devices. This aligns with research exploring web page design, mobile application development, and online training programs for undergraduate students (Al Mulhim and Eldokhny, 2020; Mingkhwan and Autthawuttikul, 2021; Nurbekova et al., 2020). However, despite the significance of mobile web design, existing educational programs do not adequately prepare students with the necessary skills, particularly in integrating user experience principles into mobile-friendly website development.
To address this gap, various pedagogical approaches have been explored, including collaborative learning (CL), blended learning (BL), project-based learning (PBL), problem-based learning, flipped classroom models, and AI-assisted learning. This study integrates four key learning approaches—collaborative, blended, project-based, and AI-assisted learning—into a comprehensive instructional model designed to enhance students’ mobile website design skills.
Collaborative learning (CL) encourages students to work together to achieve common goals, solve problems, and learn through practice (Qureshi et al., 2021). It fosters teamwork and shared responsibility, enabling students with different skill levels to support each other in achieving learning objectives. CL models typically include instruction, group activities, assessment, presentation, and reflection (Meijer et al., 2020; Martin and Dixon-Woods, 2022; Yaacob et al., 2020). Studies indicate that CL enhances social support, diversity awareness, and academic achievement while improving technological proficiency and webpage design skills (Al Mulhim and Eldokhny, 2020; Baser et al., 2017; Phumpuang et al., 2020).
Blended learning (BL) combines traditional classroom instruction with digital learning tools, offering flexibility and self-directed learning opportunities (Langprayoon and Songserm, 2022; Nantha et al., 2024). A typical BL model consists of teamwork, synchronous learning (lectures), asynchronous learning (online lessons), and discussion-based summarization (Finlay et al., 2022; Langprayoon and Songserm, 2022; Truss and Anderson, 2023). BL has been shown to improve practical skills, 21st-century competencies, and academic performance in higher education (Dakhi et al., 2020; Knoblauch, 2022; Rafiola et al., 2020; Salma et al., 2021; Wahyudi, 2020).
Project-based learning (PBL) engages students in hands-on projects, encouraging collaboration, research, and problem-solving (Almulla, 2020; Dilekli, 2020; Esparza-Peidro et al., 2020). PBL involves problem identification, planning, teamwork, project execution, and presentation (Almulla, 2020; Nurbekova et al., 2020; Younis et al., 2021). Research suggests that PBL enhances knowledge retention, learning motivation, and teamwork skills, particularly in technology-driven mobile application development and programming (Nurbekova et al., 2020; Younis et al., 2021).
AI-assisted learning integrates artificial intelligence tools such as machine learning, data mining, and learning analytics to personalize education and optimize learning outcomes (Chen et al., 2020). AI can facilitate decision-making, provide adaptive feedback, and enhance student engagement. Moreover, generative AI applications, such as ChatGPT, have been explored as tools for website creation and user experience design (Baidoo-Anu and Ansah, 2023). Studies have shown that AI-assisted learning can improve website development skills, interaction design, and digital content creation (Chen et al., 2020; Ebert and Louridas, 2023; Fui-Hoon Nah et al., 2023; York, 2023).
Justification and contribution of this study
Despite the growing need for mobile website design skills, research on integrating multiple pedagogical approaches to enhance these skills remains limited, particularly in higher education contexts. Existing studies primarily focus on individual teaching methods, such as collaborative or blended learning, without examining how these approaches can be combined to optimize skill development. This study addresses this gap by proposing a collaborative, blended learning model that integrates CL, BL, PBL, and AI-assisted learning to enhance mobile website design skills among undergraduate students.
By developing and evaluating this instructional model, this study contributes to the field by:
1. Providing an innovative, structured approach to mobile website design education that combines multiple evidence-based learning strategies.
2. Offering empirical insights into the effectiveness of collaborative and blended learning models in improving digital design competencies.
3. Bridging the skill gap in mobile web design education by equipping students with essential user experience and technical skills.
4. Informing curriculum development for higher education institutions aiming to enhance technology-focused training programs.
Thus, this study presents a novel approach to teaching mobile website design skills, with implications for educators, curriculum developers, and researchers seeking to improve digital education and user experience design training.
Literature review
Introduction to website design and user experience
Website design is critical to digital content development, balancing functionality and aesthetics to create intuitive and visually appealing user experiences. Effective website design incorporates color schemes, images, and component arrangement to ensure clarity and ease of navigation (Longstreet et al., 2021). A well-structured design helps users quickly access relevant information and interact seamlessly with digital content.
In today’s mobile-driven environment, mobile-friendly websites have become essential. A well-designed website must create a positive first impression and attract more visitors. In today’s mobile-centric world, ensuring that a website is mobile-responsive—adapting to different screen sizes—enhances user experience across all devices, particularly mobile. These websites optimize content for touchscreens, ensuring accessibility across various screen sizes. Research suggests that mobile-responsive design significantly enhances user experience, leading to higher engagement and return visits (Wood, 2025). The importance of mobile web design is also evident in studies on user interface (UI) and user experience (UX) development, where visually appealing and easily navigable designs improve usability (Al Mulhim and Eldokhny, 2020). Nurbekova et al. (2020) studied the use of blended learning and PBL, using visualization technology to teach mobile app development to information technology students. Mingkhwan and Autthawuttikul (2021) focused on developing classroom action learning activities to promote web design skills for online undergraduate training. Evaluated the effectiveness of activities to enhance practical training in user interface (UI) design. The study used video-sharing through Microsoft Teams and assessed the UI design skills of students, comparing the post-training results to an 80% proficiency criterion.
Essential mobile website design skills
From a UX perspective, six essential skills are necessary for mobile website design (Borriraklert and Kiattisin, 2021; Jamaludin and Henderi, 2024):
1. Website Design Planning—Developing a clear blueprint for the site.
2. User Research—Understanding user behavior and expectations.
3. Website Content Design—Structuring content for optimal engagement.
4. Website Design—This incorporates three key components. These are Visual Design, which ensures aesthetic appeal; Interaction Design, which facilitates seamless interactions; and Navigation Design, which improves usability through clear navigation structures.
5. Website Prototyping—Creating a working model to test functionality.
6. Website Creation—Implementing the design using web development tools.
These competencies form the foundation for effective digital content creation, particularly in educational and business contexts. However, undergraduate students often lack adequate training in these areas despite their importance. Addressing this gap requires pedagogical approaches integrating active, collaborative, and technology-supported learning.
Collaborative learning (CL) in website design education
Collaborative learning (CL) is a student-centered approach where learners work together to achieve common goals, solve problems, and co-create knowledge (Herrera-Pavo, 2021). It fosters teamwork, communication, and critical thinking, all essential for website design projects. CL consists of five key components (Martin and Dixon-Woods, 2022):
1. Positive interdependence.
2. Individual and group accountability.
3. Interpersonal and small group skills.
4. Face-to-face promotive interaction.
5. Group processing and reflection.
Research indicates that CL enhances technological skills and academic achievement when applied to web development education (Baser et al., 2017; Phumpuang et al., 2020). Studies by Al Mulhim and Eldokhny (2020) found that integrating CL into HTML-based web design courses significantly improved student engagement and technical skills.
While CL focuses on working together, it does not necessarily require dependence on a single goal. For example, group members may divide tasks, as in the case of group reports or presentations, where each member contributes to a part of the project. This CL is a strategy where two or more individuals attempt to learn something together, solve problems, and learn through practice. It typically involves small groups of students working together to achieve common goals in a shared learning environment, typically consisting of 4–5 members.
According to Martin and Dixon-Woods (2022), CL consists of five steps. These include a teaching phase, a group activity phase, an evaluation and quality improvement phase, a presentation phase, and a feedback and reflection phase. Based on studies from Salam and Farooq (2020), the benefits of collaborative learning can be summarized as helping develop a social support system for learners, fostering understanding and appreciation of diversity among students, encouraging learning processes and active participation, and finally, enhancing academic achievement and social interaction skills.
Moreover, other studies have explored CL in various contexts, with Baser et al. (2017) conducting research on project-based CL and the integration of science and technology education. They found that combining CL with project-based approaches enhances student interaction within a developed learning environment, promoting the integration of technology and fostering skills in both technology and collaboration. Phumpuang et al. (2020) studied the development of e-learning models using CL through social media to improve information literacy skills for undergraduate students. In summary, research on CL highlights its effectiveness when combined with project-based learning, particularly in fostering student interaction, integrating technology, and developing technological and collaborative skills.
Thus, CL is a foundation for website design education, particularly in project-based settings. However, CL should be integrated with blended and AI-assisted learning techniques to maximize its effectiveness, ensuring students develop technical and collaborative competencies.
Blended learning (BL) in digital education
Blended learning (BL) combines traditional face-to-face instruction with digital learning technologies, offering flexibility and enhancing student engagement (Langprayoon and Songserm, 2022; Nantha et al., 2024). The BL model typically includes four phases (Finlay et al., 2022):
1. Team-based learning–Students collaborate on tasks.
2. Synchronous learning–Real-time lectures or discussions.
3. Asynchronous learning–Self-paced online modules.
4. Summarization and reflection–Discussions and knowledge synthesis.
BL has improved self-directed learning, academic achievement, and skill acquisition in higher education (Dakhi et al., 2020; Rafiola et al., 2020). Studies on web development education have demonstrated that BL supports students in mastering complex digital design concepts while fostering independent problem-solving skills (Knoblauch, 2022; Wahyudi, 2020).
Given its benefits, BL is a core component of CBLMM, ensuring students have structured yet flexible learning pathways to acquire mobile website design skills. The stages of BL encompass several interconnected components (Finlay et al., 2022; Langprayoon and Songserm, 2022; Truss and Anderson, 2023). Initially, teamwork and collaborative group work provide a foundation where students engage collectively, fostering shared insights and building on each other’s knowledge. This collaborative phase is complemented by synchronous learning sessions, in which students participate in live lectures or discussions, allowing real-time interaction and immediate feedback. Additionally, asynchronous learning supports individual engagement, as students can access online lessons conveniently, accommodating diverse schedules and learning paces. This structure culminates in summarization and discussion sessions, where students are encouraged to reflect on and exchange ideas on the content covered within smaller groups or with the entire class, reinforcing comprehension and critical analysis.
The benefits of this BL model are substantial (Truss and Anderson, 2023; Wahyudi, 2020). One of the primary advantages is flexibility, where students benefit from learning at their own pace, with the ability to revisit materials as needed, a feature often less feasible in traditional classroom settings. Blended learning also proves to be cost-effective, reducing financial burdens for educational institutions and students by minimizing expenses related to physical infrastructure and commuting. Furthermore, this model enhances student-instructor interaction, facilitating closer relationships and fostering a dynamic exchange of experiences and perspectives. It also encourages independent learning by promoting autonomy and supporting self-directed study, which is crucial for developing lifelong learning skills. Finally, blended learning contributes to higher levels of student satisfaction, as the combination of online and face-to-face instruction creates a more engaging, multifaceted learning experience that aligns with modern learners’ diverse needs and preferences.
Multiple studies have also explored the effectiveness of blended learning approaches, with Knoblauch (2022) evaluating project-based and higher education BL, focusing on students’ attitudes, skills, and preferences. This multi-method study highlighted the benefits of combining PBL with BL formats for student development.
Wahyudi (2020) examined the effectiveness of the SBPBL model (Scenario-Based PBL) in an Operating Systems course. The study implemented this BL model, adding shared e-learning resources to enhance project-based learning. This research followed the ADDIE model and found positive resource integration and student learning outcomes. Salma et al. (2021) conducted a study on PBL to improve student achievement. The study used a pre-test/post-test experimental design to assess BL’s impact on learning outcomes.
Dakhi et al. (2020) explored a BL model aimed at 21st-century learning, integrating technology and traditional classroom instruction. The model emphasized the combination of online and face-to-face teaching. Rafiola et al. (2020) analyzed the effects of motivation, self-efficacy, and BL on student achievement. The study found that BL positively impacts students’ ability to collaborate, create projects, and achieve higher learning outcomes. In summary, research on BL demonstrates that it supports self-directed learning, facilitates ongoing online interaction, and promotes collaborative work both inside and outside the classroom, ultimately enhancing students’ academic performance and skills development.
Project-based learning (PBL) and its role in digital skill development
Project-based learning (PBL) is a hands-on educational approach in which students engage in real-world projects to deepen their understanding of concepts (Esparza-Peidro et al., 2020; Almulla, 2020). The five key stages of PBL (Nurbekova et al., 2020) include:
1. Problem identification—Defining the project goals.
2. Planning—Structuring tasks and roles.
3. Collaborative grouping—Dividing work among team members.
4. Project execution—Developing the final product.
5. Presentation of results—Showcasing the project outcome.
Research suggests that PBL enhances student motivation, teamwork, and hands-on skills, particularly in technology-driven disciplines like mobile website design (Dilekli, 2020; Younis et al., 2021). Given its practical benefits, PBL is integrated into CBLMM to help students develop real-world digital skills through interactive, group-based projects.
AI-assisted learning in web design education
AI-assisted learning is increasingly used in web development education to improve engagement and efficiency (Chen et al., 2020). AI tools such as ChatGPT and generative AI models assist students in website design and UX development by providing the following:
• Automated feedback on design choices.
• AI-generated prototypes and layouts.
• Real-time user interaction insights.
Baidoo-Anu and Ansah (2023) found that AI-driven tools enhance UX design skills and allow students to create more user-friendly, data-driven websites. Therefore, CBLMM incorporates AI-assisted learning to provide students with real-time, intelligent feedback on their website designs.
How these theories inform the Collaborative Blended Learning Mobile Model (CBLMM)
The CBLMM was developed by synthesizing insights from CL, BL, PBL, and AI-assisted learning:
• CL ensures students develop collaborative problem-solving skills essential for team-based website projects.
• BL provides a structured learning approach, combining digital flexibility with interactive classroom experiences.
• PBL enables students to work on real-world website design projects, applying their skills meaningfully.
• AI-assisted learning supports UX improvement and enhances design precision through AI-driven analysis.
By integrating these approaches, CBLMM offers a comprehensive learning model tailored to address the educational gaps in mobile website design training. This framework bridges theory and practice, ensuring students develop both technical competencies and user-centered design skills.
Research objectives
RO1: To develop a CL model using a blended technique.
RO2: To study the results of using a CL model using a blended technique.
RO3: To compare the mobile web design skills from the user experience of students after studying with a CL model using a blended technique with a 60 percent criterion. RO4: To compare students’ academic achievement before and after studying with a CL model using a blended technique.
Methods
Process 1: development of the Collaborative-Blended Learning Management Model (CBLMM)
The development of the Collaborative-Blended Learning Management Model (CBLMM) consisted of two main steps:
Step 1: CBLMM development
The model was developed through an extensive review and synthesis of learning management theories, drawing from books, journals, and domestic and international research. A document and research analysis sheet was used to systematically extract key elements from the literature, mainly focusing on collaborative learning (CL), blended learning (BL), project-based learning (PBL), and AI-assisted learning.
The key theoretical frameworks that informed the model were:
• Collaborative Learning (CL): Based on Martin and Dixon-Woods (2022), which outlined five essential phases:
1. Teaching Phase
2. Group Activity Phase
3. Evaluation & Quality Improvement Phase
4. Presentation Phase
5. Feedback & Reflection Phase
• Blended Learning (BL): Adapted from Finlay et al. (2022), Langprayoon and Songserm (2022), and Truss and Anderson (2023), highlighting four key steps:
1. Team/Group Work
2. Synchronous Lectures
3. Asynchronous Online Lessons
4. Summarization & Discussion
These elements were integrated into a structured instructional framework, resulting in the six-step CBLMM model, as illustrated in Figure 1.
Step 2: CBLMM evaluation
To assess the quality and feasibility of the model, nine experts were selected through purposive sampling based on their expertise in:
• Computer education (3 experts)
• Learning management development (2 experts)
• Curriculum and teaching (2 experts)
• Measurement and evaluation (1 expert)
• Behavioral science research (1 expert)
The evaluation tool consisted of a 5-point Likert scale questionnaire (26 items) assessing four key aspects. The included usefulness, feasibility, appropriateness, and accuracy.
The Index of Item-Objective Congruence (IOC) ranged from 0.60 to 1.00, indicating strong content validity. Expert feedback was gathered through a connoisseurship seminar via Zoom in late December 2023, where discussions refined the model’s structure. The completed evaluations (100% response rate) were analyzed using mean (X̄) and standard deviation (SD) to determine overall ratings.
Process 2: results of using the CBLMM
Population and sample
The study population comprised 75 third-year undergraduate students enrolled in a web design course at the authors’ university. A simple random sampling method (lottery draw) was used to select one classroom (19 students) for the experimental implementation of CBLMM.
Justification for sample size
The small sample size (n = 19) was primarily due to practical constraints, including classroom availability and the intensive, hands-on nature of the web design course, which required close supervision and individualized feedback. The study aimed to assess the feasibility and initial effectiveness of the Collaborative-Blended Learning Management Model (CBLMM) in a controlled setting, rather than to establish broad generalizability at this stage. The sample size allowed the authors to closely monitor the implementation process and gather detailed insights into the model’s effectiveness, which serves as a foundation for future research.
Research instruments
1. Mobile Website Design Skill Assessment
• Designed with input from instructors and industry representatives.
• Assessed UX-based mobile web design competencies.
• Analytical rubric scoring with an IOC of 1.00.
• Evaluated by two instructors, achieving high inter-rater reliability (IRR) = 0.98 (PPMCC).
2. Learning Achievement Test
• 30 multiple-choice questions aligned with Anderson and Krathwohl’s revised Bloom’s Taxonomy (Wilson, 2016).
• Covered three cognitive levels: Remembering, Understanding, and Applying.
• Validity and Reliability:
•IOC: 0.80–1.00
•Difficulty (p): 0.21–0.75
•Discrimination Index (r): 0.21–0.64
•Reliability (KR-20): 0.76
Data collection
• Pre-tests were administered before the CBLMM learning activities.
• Students engaged in structured instructional sessions following the six-step CBLMM model.
• Post-tests and the mobile website design skill assessment were conducted after completing the learning process.
Data analysis
A one-sample t-test was used to compare post-learning mobile website design skills against a benchmark of 60% proficiency (Lin and Hou, 2023), rather than comparing multiple groups. A one-sample t-test is appropriate for testing whether a sample mean differs significantly from a known or hypothesized population mean (Francis and Jakicic, 2023). The t-test was selected as the study wished to determine whether students, after completing the CBLMM intervention, met or exceeded a predefined competency threshold rather than comparing multiple groups. Given the single-group design, alternative methods such as ANCOVA, which require multiple groups or covariates for adjustment (Hedges et al., 2023), were not applicable at this stage of research. Future studies incorporating multiple control groups could potentially explore ANCOVA for comparative analyses.
CBLMM step summary
The six-step structure of the Collaborative-Blended Learning Management Model (CBLMM) is as follows (Figure 1).
1. In-class lectures:
• Instructor-led synchronous sessions explain key design principles.
• Collaborative discussions clarify concepts.
2. Online self-study:
• Students review mobile web design concepts asynchronously.
• AI-assisted learning tools provide automated feedback.
3. Group Activities & Collaborative Projects:
• Teams engage in problem-solving exercises and prototyping.
• AI-based tools support UX evaluation.
4. Project Presentation & Peer Review:
• Students present their web designs.
• Peer feedback and iterative improvements.
5. Summarization & Expert Evaluation:
• Experts assess projects based on usability and UX principles.
• AI-assisted evaluations provide insights.
6. Discussion & Reflection:
• Students engage in post-project reflection.
• Identify strengths, weaknesses, and areas for future improvement.
Research findings
CBLMM development results
The results indicate that the Collaborative-Blended Learning Management Model (CBLMM) consists of four primary components:
1. Principles and Rationale—The theoretical foundation integrates collaborative learning (CL), blended learning (BL), project-based learning (PBL), and AI-assisted learning.
2. Objectives—Aimed at enhancing mobile website design skills, focusing on user experience (UX).
3. Learning Activities—Organized into six stages: (1) classroom lectures, (2) online self-learning, (3) group activities, (4) work presentations, (5) summarizing and evaluating, and (6) discussion and reflection.
4. Measurement and Evaluation—Includes expert assessments, student assessments, and academic achievement evaluations.
CBLMM quality assessment
Table 1 presents the expert evaluation of the CBLMM. The results indicate that the model received high ratings across all four dimensions: feasibility (4.29), usefulness (4.21), appropriateness (4.10), and accuracy (4.09). These findings confirm that the proposed model is feasible and effective for promoting mobile website design skills from a user experience perspective. It also confirms RQ1, which asked if the proposed CBLMM provides a structured, high-quality instructional model for mobile website design. Based on the expert evaluations, this was confirmed and highly rated across key educational design criteria, supporting its validity as a structured instructional model.
CBLMM student assessment results
Table 2 shows that students’ mobile website design skills significantly improved after learning with the CBLMM. The mean score (M = 14.00, SD = 4.55) was significantly higher than the benchmark score (12.00, 60%), with t(18) = 1.92, p = 0.04.

Table 2. Comparison of average mobile website design skills from the user experience of students after learning with the CBLMM with the specified criteria.
Mobile website design skills
Table 2 shows that students’ mobile website design skills significantly improved after learning with the CBLMM. The mean score (M = 14.00, SD = 4.55) was significantly higher than the benchmark score (12.00, 60%), with t(18) = 1.92, p = 0.04. To further evaluate practical significance, Cohen’s d was calculated, yielding d = 0.44, indicating a moderate effect size. This confirms that the CBLMM had a meaningful impact on students’ UX skill development beyond statistical significance. Effect sizes have been systematically reported alongside p-values in Table 2.
To further evaluate practical significance, the authors calculated Cohen’s d effect size in Equation 1, which measures the magnitude of the observed improvement as follows:
The effect size (d = 0.44) represents a moderate practical effect, suggesting that the CBLMM had a meaningful impact on students’ mobile website design skills beyond statistical significance. This result confirms that CBLMM enhances student proficiency in mobile web design, supporting its educational applicability.
Moreover, Table 2’s interpretation helps the authors answer RQ2 concerning the CBLMM’s ability to improve students’ mobile website design skills. From the results, RQ2 can be answered in the affirmative with a statistically significant improvement in post-learning skills, exceeding the 60% benchmark. The moderate effect size (d = 0.44) confirms the model’s practical significance. Finally, Table 3 shows the results for the students’ academic achievement assessment.

Table 3. Comparison of the average academic achievement of students before and after studying with the collaborative learning model using a blended technique.
Student academic achievement
Students’ post-test scores (M = 15.42, SD = 4.14) were significantly higher than pre-test scores (M = 10.84, SD = 3.56), with t(18) = 5.09, p < 0.001, as shown in Equation 2. The effect size (Cohen’s d = 1.18) represents a large effect size, highlighting the substantial educational impact of the CBLMM on student learning outcomes. Effect sizes have been systematically reported alongside p-values in Table 3.
Academic achievement
The effect size (d = 1.18.44) represents a large effect size, suggesting that the CBLMM substantially impacted students’ learning outcomes. These results prove that CBLMM significantly enhances academic achievement in mobile website design. Moreover, Table 3‘s interpretation helps the authors answer concerning the CBLMM’s ability to improve students’ academic achievement. From the results, RQ3 can be answered in the affirmative with a statistically significant learning gain (p < 0.001). Students’ post-test scores (M = 15.42, SD = 4.14) were significantly higher than pre-test scores (M = 10.84, SD = 3.56), with t(18) = 5.09, p < 0.001. The effect size (Cohen’s d = 1.18) represents a large effect, demonstrating that the CBLMM substantially enhanced academic achievement in mobile website design.
The findings presented in Tables 1–3 directly address the study’s research objectives:
Table 1 evaluates the feasibility, usefulness, appropriateness, and accuracy of the Collaborative-Blended Learning Management Model (CBLMM). The high expert ratings confirm that the model is well-structured and theoretically sound, supporting RO1: To develop a CL model using a blended technique.
Table 2 demonstrates a statistically significant improvement in students’ mobile website design skills after learning with the CBLMM [t(18) = 1.92, p = 0.04], exceeding the 60% proficiency criterion. This confirms RO3: To compare the mobile web design skills from the user experience of students after studying with a CL model using a blended technique with a 60 percent criterion.
Table 3 shows a significant increase in academic achievement scores from pre-test to post-test [t(18) = 5.09, p < 0.001], indicating that the CBLMM effectively enhances student learning. This supports RO4: To compare students’ academic achievement before and after studying with a CL model using a blended technique.
By aligning these findings with the study’s research objectives, the results confirm the effectiveness and applicability of the CBLMM in improving both UX-based mobile website design skills and overall academic performance.
Discussion
The Collaborative-Blended Learning Management Model (CBLMM) was developed as an instructional framework to enhance mobile website design skills, particularly from a user experience (UX) perspective. Grounded in collaborative learning (CL), blended learning (BL), project-based learning (PBL), and AI-assisted learning, the model was structured into six key phases: online self-study, in-class lectures, group activities, project presentations, summarization and evaluation, and discussion and reflection.
The results of this study demonstrate that the CBLMM significantly improved both students’ mobile website design skills and academic performance. Expert evaluations of the model confirmed its high feasibility, usefulness, appropriateness, and accuracy, while student assessments indicated that post-learning scores exceeded the set proficiency benchmark (60%) at a statistically significant level (p < 0.05, d = 0.44). Moreover, academic achievement significantly improved, with students’ post-test scores surpassing their pre-test results (p < 0.001, d = 1.18), indicating a significant practical effect.
Limitations
While these findings suggest that the CBLMM is an effective pedagogical tool, several limitations must be acknowledged. First, the sample size (n = 19) was relatively small, limiting the generalizability of the results. Although the study provides preliminary evidence of the model’s effectiveness, future research should involve larger and more diverse student cohorts to validate these findings across different educational settings.
Second, implementing CBLMM requires instructor expertise in AI-assisted learning tools. Faculty members with limited experience in AI-driven learning platforms may face challenges in effectively integrating these technologies into the classroom. Institutions must invest in faculty development programs to ensure educators are equipped with the necessary skills to facilitate blended and AI-enhanced learning environments.
Third, institutional support is critical for the successful adoption of CBLMM. Factors such as technological infrastructure, administrative policies, and funding for AI-driven learning tools can impact the feasibility of implementing this model. Institutions with limited digital resources may need additional financial and logistical support to ensure equitable access for all students.
Lastly, the study was conducted within a single institution in Thailand, meaning that findings may be context-specific and influenced by regional educational practices and student learning styles. Further research is needed to determine whether the model is adaptable across different cultural, linguistic, and institutional settings.
Addressing external validity in future studies
We recognize the importance of external validity and have outlined plans to address this in future research. Specifically, the authors suggest that:
Future studies could involve larger sample sizes across multiple institutions to test the generalizability of the CBLMM in diverse educational settings. Students from different academic disciplines, cultural backgrounds, and levels of prior knowledge could also be examined to evaluate the model’s applicability across contexts. Longitudinal research could be conducted to assess the sustained impact of the CBLMM on learning outcomes and skill retention over time. Finally, future work might also include control groups and comparative analyses with other learning models to further validate the effectiveness of the CBLMM.
Additional strengths of the methodology
While the sample size is small, the study’s methodology was designed to ensure internal validity and reliability. Methods used to do this included the CBLMM’s evaluation by nine experts across relevant fields, ensuring its theoretical and practical soundness. The research instruments, including the Mobile Website Design Skill Assessment and Learning Achievement Test, demonstrated high validity and reliability (e.g., IOC = 0.80–1.00, KR-20 = 0.76, IRR = 0.98). The six-step CBLMM framework provided a clear and systematic approach to instruction, ensuring consistency in delivery and evaluation. We believe these measures, combined with the planned future studies, will address the reviewer’s concerns regarding external validity and contribute to the broader applicability of the CBLMM.
Future research directions
Future studies should examine how the model performs in different cultural, institutional, and linguistic contexts. Third, the study duration was limited to a single academic term, which does not allow for an assessment of long-term skill retention. Future research should explore whether students can apply and sustain these skills over time, particularly in professional settings.
Beyond these limitations, a key area for further exploration is the adaptability of the CBLMM to other academic disciplines. While this study focused on mobile website design, similar instructional frameworks could be applied to graphic design, software engineering, human-computer interaction (HCI), and other technology-driven fields. Additionally, given the increasing role of artificial intelligence (AI) in education, future research could investigate how AI-driven learning tools—such as adaptive learning systems and generative AI—can be integrated into the CBLMM to provide personalized feedback and enhance student engagement. Augmented reality (AR) and virtual reality (VR) in UX-focused training is another promising avenue for innovation.
Future studies should examine how the model performs in different cultural, institutional, and linguistic contexts, particularly in countries with varying technological infrastructure and educational methodologies. Conducting cross-cultural studies will help determine whether the CBLMM is adaptable across different higher education environments and whether modifications are needed to suit diverse learning preferences.
Additionally, since this study was limited to one academic term, future research should investigate long-term skill retention by tracking students’ ability to apply their mobile web design skills several months or years after completing the course. This would provide insights into the durability and real-world applicability of learning outcomes.
Future work could also explore how CBLMM can be adapted for fully online or hybrid learning environments, particularly in response to the increasing adoption of remote and AI-driven education models worldwide. Expanding this research will help refine the model’s applicability, scalability, and long-term effectiveness.
Implementation challenges
Despite its strengths, the implementation of the CBLMM may present challenges. One key issue is the availability of digital resources, as some students may have limited access to high-speed internet, software, or AI-driven learning platforms. To address this, institutions should provide mobile-friendly platforms, offline learning materials, and subsidized software access for students in underserved regions. Another challenge is faculty readiness, as some instructors may lack experience in managing blended learning environments or integrating AI-assisted tools into instruction. Offering faculty training workshops and online resources can help ensure educators are fully equipped to deliver this model effectively. Additionally, students not accustomed to self-directed learning may struggle with the online self-study phase. To mitigate this, institutions could implement structured learning schedules, progress-tracking systems, and mentorship programs to provide additional guidance.
This study highlights the CBLMM’s potential as an effective instructional model for enhancing digital design skills. While initial findings are promising, future research should explore the model’s broader applicability, integration with emerging technologies, and long-term impact on student learning outcomes. By addressing the challenges associated with digital accessibility, faculty training, and self-directed learning, the CBLMM can be a scalable and adaptable framework for technology-based education in higher education institutions worldwide.
Conclusion
The Collaborative-Blended Learning Management Model (CBLMM) was developed as a structured, evidence-based approach to enhancing mobile website design skills. By integrating collaborative learning (CL), blended learning (BL), project-based learning (PBL), and AI-assisted learning, the model provides a comprehensive instructional framework that supports both technical proficiency and user experience (UX) awareness. The six-step process—online self-study, in-class lectures, group activities, project presentations, summarization and evaluation, and discussion and reflection—ensures that students engage in both theoretical learning and hands-on practice.
The findings of this study indicate that the CBLMM is an effective model for improving students’ digital design competencies. Expert evaluations confirmed its high feasibility, usefulness, appropriateness, and accuracy, while empirical results demonstrated statistically significant improvements in both mobile website design skills (p = 0.04, d = 0.44) and academic achievement (p < 0.001, d = 1.18). These results suggest that structured, collaborative, and technology-enhanced learning approaches can bridge skill gaps in higher education curricula.
The CBLMM’s success underscores the importance of integrating active learning methodologies into digital education curricula. As the demand for mobile-friendly and user-centered web design grows, higher education institutions should prioritize skill-based learning frameworks that combine theory with applied practice. Educational policymakers and curriculum designers can draw on this model to:
• Incorporate structured collaborative and blended learning approaches into technology-focused courses.
• Promote interdisciplinary learning, where UX principles are embedded into various fields such as software engineering, digital marketing, and human-computer interaction (HCI).
• Leverage AI-assisted learning tools to provide real-time feedback and personalized student learning experiences.
• Adopting competency-based assessments ensures that students demonstrate industry-relevant skills rather than relying solely on theoretical knowledge.
By adopting this model within university curricula, institutions can better prepare students for the demands of the digital workforce, equipping them with technical expertise and UX design sensibilities.
While this study provides compelling evidence of CBLMM’s effectiveness, much remains to explore. Researchers and educators are encouraged to:
• Test the model in different cultural and institutional contexts, assessing its global applicability.
• Expand its use beyond mobile web design, applying it to cybersecurity, AI development, and interactive media design.
• Investigate long-term skill retention, tracking students beyond the classroom to measure real-world application.
• Explore emerging technologies, such as AI-driven adaptive learning and virtual reality (VR)-based prototyping, to further enhance digital design education.
In an era where digital literacy and user experience are essential skills, the CBLMM provides a scalable and adaptable framework for educators seeking to modernize their instructional methods. By embracing collaborative, blended, and AI-enhanced learning strategies, institutions can create more engaging, skill-focused learning environments that empower students to succeed in the evolving digital landscape. Higher education must take action now—by integrating innovative learning models, we can bridge the gap between academic training and industry expectations, ensuring that students graduate with the practical skills needed to excel in the digital world.
Finally, based on the findings of this study, several policy recommendations can guide the integration of collaborative and blended learning into university curricula:
1. Universities should establish standardized blended learning guidelines that incorporate collaborative learning (CL), project-based learning (PBL), and AI-assisted instruction. Faculty should be encouraged to adopt structured models like CBLMM to enhance student engagement and skill development.
2. Given the increasing role of AI-driven tools in education, institutions should offer mandatory training programs for instructors on integrating AI-based assessments, feedback systems, and adaptive learning platforms into their teaching methods.
3. Universities should allocate resources to improve technological accessibility, ensuring that all students have access to high-speed internet, AI-assisted learning tools, and mobile-friendly educational platforms. Institutions should also explore subsidized software licensing to support students in resource-limited settings.
4. Educational policymakers should promote cross-disciplinary applications of collaborative and blended learning. The CBLMM framework, originally applied to mobile web design, could be extended to fields such as digital marketing, software engineering, and human-computer interaction (HCI) to foster interdisciplinary learning.
5. To align with industry needs, university curricula should prioritize competency-based assessment models that evaluate practical skills, UX design proficiency, and project-based outcomes rather than relying solely on traditional exams.
Data availability statement
The raw data supporting the conclusions of this article will be made available by the authors, without undue reservation.
Ethics statement
Ethical review and approval was not required for the study on human participants in accordance with the local legislation and institutional requirements. The participants provided written informed consent to participate in this study.
Author contributions
PP: Conceptualization, Formal analysis, Investigation, Methodology, Project administration, Resources, Software, Writing – original draft. OW: Conceptualization, Data curation, Formal analysis, Investigation, Methodology, Resources, Validation, Writing – original draft, Writing – review & editing. AS: Data curation, Investigation, Methodology, Project administration, Resources, Writing – review & editing. CM: Resources, Software, Supervision, Visualization, Writing – review & editing. SM: Software, Validation, Visualization, Writing – review & editing.
Funding
The author(s) declare that no financial support was received for the research and/or publication of this article.
Conflict of interest
The authors declare that the research was conducted in the absence of any commercial or financial relationships that could be construed as a potential conflict of interest.
The author(s) declared that they were an editorial board member of Frontiers, at the time of submission. This had no impact on the peer review process and the final decision.
Generative AI statement
The authors declare that Gen AI was used in the creation of this manuscript. In preparing this work, the authors utilized ChatGPT Scholar and Google Translate to assist with translating the manuscript from Thai to English. Grammarly Premium was used for English language use analysis. However, it must be noted that when these tools are used, AI detection software returns exceedingly high false/positive scores on these specific AI-based translation and language-checking tools. However, following these tools, the translated content was thoroughly reviewed and edited by a native English speaker working with the authors. As such, the authors take full responsibility for the content and accuracy of the publication.
Publisher’s note
All claims expressed in this article are solely those of the authors and do not necessarily represent those of their affiliated organizations, or those of the publisher, the editors and the reviewers. Any product that may be evaluated in this article, or claim that may be made by its manufacturer, is not guaranteed or endorsed by the publisher.
References
Al Mulhim, E., and Eldokhny, A. (2020). The impact of collaborative group size on students’ achievement and product quality in project-based learning environments. Int. J. Emerg. Technol. Learn. 15, 157–174. doi: 10.3991/ijet.v15i10.12913
Almulla, M. A. (2020). The effectiveness of the project-based learning (PBL) approach to engage students in learning. SAGE Open 10:2158244020938702. doi: 10.1177/2158244020938702
Baidoo-Anu, D., and Ansah, L. O. (2023). Education in the era of generative artificial intelligence (AI): understanding the potential benefits of chat GPT in promoting teaching and learning. J. AI 7, 52–62. doi: 10.61969/jai.1337500
Baser, D., Ozden, M. Y., and Karaarslan, H. (2017). Collaborative project-based learning: an integrative science and technological education project. Res. Sci. Technol. Educ. 35, 131–148. doi: 10.1080/02635143.2016.1274723
Borriraklert, A., and Kiattisin, S. (2021). User experience design (UXD) competency model: identifying well-rounded proficiency for user experience designers in the digital age. Archives Design Res. 34, 61–79. doi: 10.15187/adr.2021.08.34.3.61
Chen, L., Chen, P., and Lin, Z. (2020). Artificial intelligence in education: a review. IEEE Access 8, 75264–75278. doi: 10.1109/ACCESS.2020.2988510
Dakhi, O., Jama, J., and Irfan, D. (2020). Blended learning: a 21st-century learning model at college. Int. J. Multi Sci. 1, 50–65.
Dilekli, Y. (2020). “Project-based learning” in Paradigm shifts in 21st century teaching and learning. (United States: IGI Global), 53–68.
Ebert, C., and Louridas, P. (2023). Generative AI for software practitioners. IEEE Softw. 40, 30–38. doi: 10.1109/MS.2023.3265877
Esparza-Peidro, J., Golf-Laville, E., Izquierdo-Domenech, J., Tomás-Miquel, J. V., and Sanchis, R. (2020). “Definition of project-based learning models in the computer engineering degree” in EDULEARN20 proceedings (IATED), 3966–3972.
Finlay, M. J., Tinnion, D. J., and Simpson, T. (2022). A virtual versus blended learning approach to higher education during the COVID-19 pandemic: the experiences of a sport and exercise science student cohort. J. Hosp. Leis. Sport Tour. Educ. 30:100363. doi: 10.1016/j.jhlste.2021.100363
Francis, G., and Jakicic, V. (2023). Equivalent statistics for a one-sample t-test. Behav. Res. Methods 55, 77–84. doi: 10.3758/s13428-021-01775-3
Fui-Hoon Nah, F., Zheng, R., Cai, J., Siau, K., and Chen, L. (2023). Generative AI and chat GPT: applications, challenges, and AI-human collaboration. J. Inf. Technol. Case Appl. Res. 25, 277–304. doi: 10.1080/15228053.2023.2233814
Hedges, L. V., Tipton, E., Zejnullahi, R., and Diaz, K. G. (2023). Effect sizes in ANCOVA and difference-in-differences designs. Br. J. Math. Stat. Psychol. 76, 259–282. doi: 10.1111/bmsp.12296
Herrera-Pavo, M. Á. (2021). Collaborative learning for virtual higher education. Learn. Cult. Soc. Interact. 28:100437. doi: 10.1016/j.lcsi.2020.100437
Jamaludin, D. A., and Henderi, H. (2024). Development of Android Application-Based E-Learning Learning Media Using the Borg and Gall Method. JINAV: J. Inform. Visual 5, 171–180. doi: 10.35877/454RI.jinav2915
Knoblauch, C. (2022). Combining and balancing project-based and blended learning in education. Int. J. Advanced Corporate Learn. 15, 35–44. doi: 10.3991/ijac.v15i1.27135
Langprayoon, P., and Songserm, U. (2022). The development of an instructional model using blended learning with collaborative learning to enhance English reading ability of English teaching program studentsin the faculty of education, Rajabhat universities. Doctoral dissertation, Silpakorn University. Thailand
Lin, Y. C., and Hou, H. T. (2023). Multi-dimensional evaluation of an educational board game using real-time diagnostic procedure scaffolding: analysis of learners’ learning effectiveness, flow, anxiety, and emotion. Educ. Psychol. 43, 874–894. doi: 10.1080/01443410.2023.2259139
Longstreet, P., Valacich, J., and Wells, J. (2021). Towards an understanding of online visual aesthetics: an instantiation of the composition perspective. Technol. Soc. 65:101536. doi: 10.1016/j.techsoc.2021.101536
Martin, G., and Dixon-Woods, M. (2022). Collaboration-based approaches. Cambridge, England: Cambridge University Press.
Meijer, H., Hoekstra, R., Brouwer, J., and Strijbos, J. W. (2020). Unfolding collaborative learning assessment literacy: a reflection on current assessment methods in higher education. Assess. Eval. High. Educ. 45, 1222–1240. doi: 10.1080/02602938.2020.1729696
Mingkhwan, C., and Autthawuttikul, S. (2021). Development of action learning activities in the classroom to enhance web design abilities for online training of undergraduate students faculty of education Silpakorn University (doctoral dissertation). Thailand: Silpakorn University.
Nantha, C., Siripongdee, K., Siripongdee, S., Pimdee, P., Kantathanawat, T., and Boonsomchuae, K. (2024). Enhancing ICT literacy and achievement: a TPACK-based blended learning model for Thai business administration students. Educ. Sci. 14:455. doi: 10.3390/educsci14050455
Nurbekova, Z., Grinshkun, V., Aimicheva, G., Nurbekov, B., and Tuenbaeva, K. (2020). Project-based learning approach for teaching mobile application development using visualization technology. Int. J. Emerg. Technol. Learn. 15, 130–143. doi: 10.3991/ijet.v15i08.12335
Phumpuang, K., Thammetar, T., Natakuatoong, O., and Tantasanawong, P. (2020). The development of e-leaning model by collaborative learning on social media to develop information literacy skills for undergraduate students of faculty of education. J. Educ. Innov. 22, 29–44.
Qureshi, M. A., Khaskheli, A., Qureshi, J. A., Raza, S. A., and Yousufi, S. Q. (2021). Factors affecting students’ learning performance through collaborative learning and engagement. Interact. Learn. Environ. 31, 2371–2391. doi: 10.1080/10494820.2021.1884886
Rafiola, R., Setyosari, P., Radjah, C., and Ramli, M. (2020). The effect of learning motivation, self-efficacy, and blended learning on students’ achievement in the industrial revolution 4.0. Int. J. Emerg. Technol. Learn. 15, 71–82. doi: 10.3991/ijet.v15i08.12525
Salam, M., and Farooq, M. S. (2020). Does sociability quality of web-based collaborative learning information system influence students’ satisfaction and system usage? Int. J. Educ. Technol. High. Educ. 17:26. doi: 10.1186/s41239-020-00189-z
Salma, W., Basori, B., and Hatta, P. (2021). The effectiveness and effect of project-based blended learning on student achievement in online learning at Surakarta, Indonesia. Indonesian J. Informat. Educ. 5, 1–8. doi: 10.20961/ijie.v5i1.44029
Truss, A., and Anderson, V. (2023). The navigational challenges of a blended learning approach to teaching in business and management. Int. J. Manage. Educ. 21:100733. doi: 10.1016/j.ijme.2022.100733
Wahyudi, W. (2020). The effectiveness of sharing blended project-based learning (SBPBL) model implementation in operating system course. Int. J. Emerg. Technol. Learn. 15, 202–211. doi: 10.3991/ijet.v15i05.11266
Wilson, L. O. (2016). Anderson and Krathwohl Bloom’s taxonomy revised understanding the new version of Bloom’s taxonomy. Second Principle 1, 1–8.
Wood, S. A. (2025). “Creating a website” in A Therapist’s guide to private practice (United Kingdom: Routledge), 82–97.
Yaacob, A., Mohd Asraf, R., Hussain, R. M. R., and Ismail, S. N. (2020). Empowering learners' reflective thinking through collaborative, reflective learning. Int. J. Instr. 14, 709–726. doi: 10.29333/IJI.2021.14143A
York, E. (2023). “Evaluating ChatGPT: generative AI in UX design and web development pedagogy” in Proceedings of the 41st ACM international conference on Design of Communication, 197–201.
Keywords: blended learning, collaboration, collaborative practice, Thailand, web design and development
Citation: Pimdee P, Wuttikamonchai O, Sukkamart A, Meedee C and Meekhobtong S (2025) Improving Thai undergraduate students’ web design skills for smartphones through a collaborative blended learning approach. Front. Educ. 10:1522793. doi: 10.3389/feduc.2025.1522793
Edited by:
Fezile Özdamlı, Near East University, CyprusReviewed by:
Shiau Wei Chan, Universiti Tun Hussein Onn Malaysia, MalaysiaSawanan Dangprasert, King Mongkut’s University of Technology North Bangkok, Thailand
Copyright © 2025 Pimdee, Wuttikamonchai, Sukkamart, Meedee and Meekhobtong. This is an open-access article distributed under the terms of the Creative Commons Attribution License (CC BY). The use, distribution or reproduction in other forums is permitted, provided the original author(s) and the copyright owner(s) are credited and that the original publication in this journal is cited, in accordance with accepted academic practice. No use, distribution or reproduction is permitted which does not comply with these terms.
*Correspondence: Aukkapong Sukkamart, YXVra2Fwb25nLnN1QGttaXRsLmFjLnRo