Once all the information obtained in the focus groups had been collected and analyzed, we proceeded to define the visual section of the website, the thematic blocks that would make up the educational proposal, the way in which the information would be presented, and the materials necessary to offer support and facilitate the resolution of the patients’ doubts.

In this sense, it was agreed that the visual design of the educational proposal would follow a spatial theme. From the perspective of the research team, and in line with the opinions expressed by the experts participating in the process, it was considered that a visual approach that avoided excessively childish elements was more appropriate for the clinical setting in which nurse educators would use the tool during diabetes education consultations with adolescent patients. As the platform is intended to be used by nurses as an interactive educational resource in direct consultation, the visual design needed to be professional and credible enough for the health care professional, while remaining visually engaging and age-appropriate to capture and maintain the attention of adolescent patients throughout the educational session.

Once the visual aspect was agreed on, the contents to be included in the educational proposal were selected, as well as the way they should be grouped, the way they should be presented, the elements of gamification to be incorporated, and the complementary material that could be developed to support the patients’ educational process. In order to give coherence to the proposal and prevent the website from being a simple compilation of information, the research team opted to structure all the contents through a narrative in which the patient himself would play a leading role. This narrative consists of an intergalactic journey in which the protagonist must gather information and assemble the pieces of his ship in order to return home safely. In addition, during the development process, special emphasis was placed on creating names, visual elements, and environmental features with a creative approach, aiming to foster a playful and emotional connection with the users to achieve greater acceptability of the tool. At this stage of development, the educational proposal was named SMARTCLOTH-Odyssey.

Within the narrative framework of the intergalactic journey, the educational content was structured around a series of planets, each of which addresses different topics related to the diagnosis of diabetes, its impact on patients, and the nutritional approach to treating the disease. It was also determined that the content would be presented through short videos, in which different characters would explain the information corresponding to each block, using both voice-over and subtitles to improve accessibility. In addition to the audiovisual material, a game was incorporated at the end of some exercises, aiming to review and consolidate the knowledge acquired. Table 3 presents the name of each planet and a summary of the content covered in each.

It should be noted that access to each planet is only unlocked after passing the content of the previous block. This requirement allows the user to review the knowledge acquired before advancing along the training itinerary. This progressive mechanic reinforces sequential and structured learning within the playful environment.

To reinforce the learning process, supplementary materials were proposed in addition to the main content. All the content related to the planets and other additional topics, such as the use of sweeteners, was compiled in PDF format. Most of these documents were also visually adapted to the space theme, thus maintaining the aesthetic coherence of the educational proposal.

As explained above, an active participation methodology was adopted in this phase of the project based on cocreation with nursing professionals specialized in diabetes. Once the fundamental structural aspects of the website had been defined, a series of sketches was drawn up that included the essential ideas of the proposal in terms of visual design, minimum content, and the way in which the information would be presented. Subsequently, in April 2024, a validation session was held with the same nurses who had previously participated in the focus group. During this session, the professionals provided feedback on the proposal, mostly validating the presented elements and positively commenting on the ideas. Concerning the conceptual proposal, the only noteworthy observation made by the group of professionals was the recommendation to replace the expression “danger, nutrition labeling!” with “attention, nutrition labeling!” due to the negative connotation conveyed by the first formulation.

Once the conceptual basis for SMARTCLOTH-Odyssey had been established, working groups comprised the researchers and nurses who had participated in the focus groups. Each group was assigned the development of the theoretical and recreational content corresponding to one or more planets, depending on the area of expertise of each nurse and researcher. This participatory approach sought to avoid unidirectionality in decision-making, given that ideas proposed exclusively by a single person can limit creativity. This work was planned to be developed over eight sprints (Table 5), which also included key elements of web programming.

Each working group reviewed the existing materials related to therapeutic education in diabetes, corresponding to the thematic blocks assigned to them. The aim was to define the final contents and agree on the final design of each planet. This review sought to ensure both the clinical and educational relevance of the material, actively integrating the practical experience of the nursing professionals in the construction of the didactic narrative. Once this phase was completed, each group developed the educational materials, which were then transformed into explanatory videos by a graphic designer. These videos feature characters generated by artificial intelligence, with synthesized voices, and are accompanied by illustrative images designed manually by the designer herself.

In addition to all of the above, and as mentioned at the beginning of this section, aspects related to the web platform’s specific programming and the information layout’s design were also addressed. In this sense, work was progressively carried out on developing key interface elements, such as the side menu of options, which offers direct access to the different functionalities as they are unlocked. Contextual aids were also implemented on the different screens to ensure intuitive navigation and prevent patients from becoming disoriented while using the tool.

The sequential development of SMARTCLOTH-Odyssey allowed it to be tested three times at different stages of the design and implementation process. The main results obtained in each evaluation are presented below.

The first test was conducted in October 2024, using an early version of SMARTCLOTH-Odyssey (Figure 4). Despite being an initial version, this allowed us to gather the participating professionals’ first impressions and identify the most relevant malfunctions. To this end, 17 specific tasks were designed, focusing on specific aspects of navigation and interaction with the elements available on the platform up to that point. During this phase, the professionals had the opportunity to explore and evaluate the (incomplete) content corresponding to the Newland and Diabion planets.

In general, the problems identified during this first test were similar among all participating nurses. Most of them tried to log in to the platform without having previously registered, which raised doubts about whether it was necessary to take any previous steps to access the content (Figure 5). Difficulties were also observed in locating the game’s sound control icon, and on some occasions, navigation problems were encountered, as participants were not completely clear on which elements they should click on to progress in the interaction with the website.

However, apart from the aforementioned problems, the nurses did not report significant difficulties navigating the various interactive elements available. They could handle functions such as changing the volume of the videos, full-screen display, reducing the size of the videos, advancing the playback, and interacting with the first game developed (based on questions and answers about T1DM) without any problems.

Given that this was an elementary version, no major problems were identified in terms of content or programming, as no highly complex elements had yet been incorporated. However, one aspect unanimously pointed out by the professionals was the excessive volume of the music and the perception that some of the explanatory videos were too long.

Finally, despite being a preliminary version of the platform, the participants expressed their agreement with the contents included and the way in which they were presented. They also began to visualize the tool’s potential as a complementary resource to reinforce therapeutic education in diabetes, both during the patient’s hospitalization and in the postdebut period, once at home.

The second test was conducted in March 2025, using a significantly more advanced SMARTCLOTH-Odyssey, including the planets Newland, Diabion, Glucopolis, Gluconebula, and Alimentarium. Adjustments were also implemented in response to observations made during the first test. In particular, the length of the new videos was shortened as much as possible while maintaining the rigor of the explanation of the contents, and the default volume of the music was modulated to avoid discomfort during navigation. This evaluation was carried out with nursing students who, having completed coursework in nutritional care and diabetes education, brought a dual perspective: as future health care professionals with specific knowledge of T1DM educational processes, and as digitally literate young adults whose familiarity with interactive technologies provided valuable insights into the platform’s usability and navigability. The test comprised 54 specific tasks focused on specific aspects of navigation and interaction with the available elements, through which the participants not only interacted with the educational contents of the planets, but also could also explore additional functionalities, such as the website’s side navigation menu.

In this second test, given that more complex functionalities had already been incorporated, especially in relation to some of the new games, a greater number of incidents were observed during the task development. The main problems detected in this evaluation phase are described below.

One of the most relevant aspects was the persistence of difficulties related to login. Participants were still unsure whether or not to create an account to access the platform, which led to some confusion at the beginning of the browsing experience.

Concerning the observations made during the first test, it was again pointed out that the base volume of the music should be considerably lower. In some cases, it was reported that the music overlapped or interfered with the characters’ voices, making it difficult to understand the content. Additionally, situations were detected, for example, during the playing of games, where it was impossible to modulate the volume, which negatively impacted the user experience. Several participants explicitly verbalized this limitation during the test sessions.

The suggestion to shorten the length of some videos was also reiterated, as several were too long and too heavy to hold users’ attention. Among the suggestions for improvement, the possibility of slightly increasing the playback speed of the characters’ voices was also mentioned. As it is a synthesized voice, its pace was perceived as too slow, which hindered the fluidity of the content’s presentation.

Despite the above-mentioned observations, there was a broad consensus among the participants that the design, music, and voice explanations contributed significantly to making the content easy to understand. The visual component, in particular, was highly valued by the students, who highlighted its aesthetic appeal and its ability to facilitate understanding of the concepts addressed.

Notwithstanding the positive aspects mentioned above, certain elements were identified that hindered the interaction between the students and the game environment. At some points, videos were blocked or interrupted, which prevented them from continuing normally and made it necessary to restart the navigation. Additionally, in certain playlists, it was unclear which videos had already been viewed and which had not, leading to confusion about the next step to take and slowing down progress in the game. Another notable problem was the lack of planet identification on the star map. When the in-game characters indicated that a specific planet was to be reached, the students were not clear on where to click, which also hindered the user experience (Figure 6).

This was also verbalized during the tests:

About the above, it was proposed that each planet incorporate its name in visible form and a brief description of the content the user can expect to find in it to facilitate navigation and orientation within the platform.

In terms of games, this component was by far the one that generated the highest number of incidents during testing. The problems most frequently mentioned by participants included the following: (1) monotony in some games, resulting from the need to repeat the same actions several times; (2) excessively strict or precise requirements to achieve the stated objectives; (3) limited time for resolution, especially in those tasks that required further reflection or consultation of supplementary material; (4) difficulty in accessing the correct answers after completing a quiz-type questionnaire; (5) technical errors or bugs that blocked the game and prevented its completion; (6) lack of clear indicators on the time remaining to complete the activities; and (7) lack of clarity in the instructions as to which input devices (mouse, keyboard, or both) could be used in which game.

The participants explicitly verbalized many of these problems, leading to frustration during the user experience.

Despite this, it was stated that the games were well-liked:

Finally, another element valued by the participants was the access to the side menu (Figure 7). This menu not only allows direct access to all the videos and games that are unlocked throughout the adventure but also includes PDF files that contain, in textual form, all the information explained in the audiovisual content. This functionality was particularly appreciated for its usefulness as a resource for consultation and reinforcement of learning.

These PDFs generated a very positive response from the students, as they were very appealing to them because of the visual aspect, adapted to the aesthetics of the website:

In general, and once again, despite the technical problems detected, SMARTCLOTH-Odyssey received numerous positive evaluations from the participants. This is evidence of a favorable evolution in the tool’s development, and the work has been consolidated since the first test.

The third and last test was carried out in May 2025, using the version of SMARTCLOTH-Odyssey that, after this final evaluation, would be considered the definitive version of this project. In addition to the planets and elements already described in the second test, this test version incorporated the new planets called Dexteria Prime and Platopia. However, it was not possible to include all the content modifications suggested in the previous test, as the development period between the two phases focused on the introduction of the new materials and the resolution of technical problems that affected the correct functioning of the platform, such as errors in the playback of videos or failures in the execution of some games. This final test involved the participation of professionals directly involved in therapeutic education processes and was structured around a total of 17 tasks to evaluate general aspects of the website’s functioning.

In this last test, the professionals made particularly valuable contributions, mainly from a clinical perspective. Their experience allowed them to enrich the way some of the information is presented, making it more understandable and more relevant for the end user, and detecting minor errors that contributed to refining the contents and improving the overall quality of the tool.

Participants generally expressed a positive level of satisfaction in terms of visual aspects. However, some confusion in navigation was identified, especially between the main menu and the star map. In particular, it was noted that users tended to confuse planets already visited with those not yet explored because they all had legible labels. It was therefore suggested that the names of nonaccessible planets be presented in a more blurred or less contrasting way to make it easier to differentiate between them. In addition, some participants pointed out that specific special effects, although aesthetically appealing, could distract patients while using the platform, potentially affecting their concentration or understanding of the content.

In terms of content, only one specific recommendation was made to incorporate relaxation techniques or guidelines for emotional regulation to complement the educational approach of the tool. Regarding the games, the participants pointed out that, in the question-and-answer activities, some of the options were too long, which could hinder active participation and understanding by the patients. It was also suggested that, in case of failure, only the failed questions should be repeated rather than repeating the whole set, as the latter could lead to a feeling of monotony. It was also suggested to improve the immediate feedback during the game so that correct answers are shown in green and incorrect answers in red, thus facilitating visual learning. Finally, an error was detected in one of the questions on fasting blood glucose levels, where the value indicated was 70‐150 mg/dl, when it should be 70‐180 mg/dl.

Concerning supplementary material, the professionals highlighted the importance of improving the visibility of key resources, such as glycemic index tables, glycemic load, and food equivalencies. They considered it essential that these documents be placed in a more accessible location, given their practical value for dietary management in patients with diabetes. Regarding PDF files, some participants suggested incorporating pagination to facilitate printing and the availability of a black-and-white version to promote more environmentally and economically sustainable practices. Finally, it was recommended that the visual accessibility of the side menu be improved by adding illustrative images next to the text of each option. This measure could facilitate understanding the content and navigation within the platform, especially for users with lower digital literacy or visual difficulties.

Finally, some technical problems of particular relevance were identified. In particular, it was observed that account recovery e-mails did not reach users correctly, making it difficult to restore access in cases of forgotten credentials. Additionally, on the login or account creation screen, error messages, for example, “credentials are not correct,” were displayed without a contrasting background, which caused them to overlap with the interface background and make them difficult to read. Such technical issues can considerably negatively impact the user experience, as they hinder access to the platform and could reduce patient adherence to continued use of the tool. Although this is not a problem as such, it was also recommended that, to improve accessibility to information after a first viewing, when reaccessing an already visited planet, the user should be able to directly select the content they wish to consult, without the need to replay the whole block from the beginning.

In summary, this last test allowed for identifying and correcting several problems that had not been detected in previous phases and adjusting minor errors in the contents. However, it is particularly relevant to highlight that, throughout the different tests, no substantial criticisms were registered about the pedagogical content of the proposal. On the contrary, most participating professionals expressed their surprise at the tool, highlighting its potential as a complementary resource in daily clinical practice and therapeutic education processes in T1DM.

The final result after the design, prototyping, and testing phase can be seen on the website [31]. However, as will be explained in the limitations, although the theoretical content is fully developed, the web programming of the planets was interrupted in Platopía due to time and funding problems.