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:

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.

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.

From a UX perspective, six essential skills are necessary for mobile website design (Borriraklert and Kiattisin, 2021; Jamaludin and Henderi, 2024):

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) 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):

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) 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):

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) 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:

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 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:

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.

The CBLMM was developed by synthesizing insights from CL, BL, PBL, and AI-assisted learning:

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.

The development of the Collaborative-Blended Learning Management Model (CBLMM) consisted of two main steps:

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.

The six-step structure of the Collaborative-Blended Learning Management Model (CBLMM) is as follows (Figure 1).

The results indicate that the Collaborative-Blended Learning Management Model (CBLMM) consists of four primary components:

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.

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 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.

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.

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.

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.

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.

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 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.

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.