As mentioned in Sect. 1, in order to support the game creation process, two main strategies were adopted: (1) the development of a Toolkit to Game Design (Fig. 3) comprising a set of physical resources to support the game creation process ; and (2) the design of a Portal-repository (See footnote 1) (Fig. 4). The portal would act as an extension of the Toolkit, and work as the G4N project’s online presence, hosting its main outputs, publications and resources, and acting as a repository for the games developed under the project’s scope .
The design of this portal-repository aimed to address two concerns: (1) create a connection that visually related the two artifacts—the physical (the Toolkit) and the digital (the portal-repository); and (2) to reflect the feeling of gaming and non-linearity present in gaming activities.
Following the same approach taken during the portal-repository’s design and implementation process , the G4N Cards Set Canvas will be designed in compliance with the projects’ brand and identity and following the same design approach: involving users, intending to fulfil their needs and expectations and creating an accessible product that meets their technical and design skills. Hence, the development of this tool will apply a User-Centered Design (UCD) approach comprised of several evaluation stages and iterative improvements of the final product (detailed in Sect. 3.1). The G4N Cards Set Canvas will provide the necessary instruments for users (e.g. teachers and environmental organizations staff) to produce G4N thematic cards addressing their location’s environmental issues without the need for any previous design or technical knowledge or experience.
The development of this Canvas and its use will also ensure the compliance with the G4N project’s Brand Standards Manual. Furthermore, it will withdraw more complex tasks from the users’ role—therefore minimizing their cognitive load—by providing not only design specifications but also the necessary information regarding the layout, the export formats, the printing materials and the adequate sizes for all design elements (e.g. icons, colors, typography).
3.1 Development Research Methodology
Higher levels of usability are more likely to be achieved through users’ involvement by assuring that the final product meets their needs and considers their limitations. There are different methods to involve users, either from the beginning of the process or only in specific situations (e.g. exploratory interviews, redesign stages). On the one hand, some research only allows users’ direct input in redesign stages, whenever the majority of the design derives from the empirical analysis . On the other hand, in some cases, their involvement starts at the very beginning of the process, and they participate throughout all stages . Some research fields, such as Health, Autonomous Cars, Machine Learning and Artificial Intelligence, involve users in their research process since the beginning [34, 35] or assign users to specific tasks or moments .
Indeed, users’ involvement substantially reduces Usability errors and is proved to be effective in iterative design processes. In every design iteration, fewer errors tend to emerge . Moreover, instead of forcing users to change their behavior due to the design of the interface, the interface is designed to increase its efficiency. Indeed, according to Shneiderman et al. [36, p. 75], “A frequent path to success is through participatory methods that bring designers in close and continuing contact with their intended users”.
Taking this into consideration, the Development Research Method is the approached methodology for the development of the G4N Cards Set Canvas. This method is a systematic and iterative process of design, development and evaluation, most commonly related to the development process of a product, to its analysis, description and evaluation [37, 38].
Therefore, this research will be divided in five stages, as it can be seen in Fig. 5:
As shown in Fig. 5, after an evaluation, whenever adjustments are necessary, the iterative process anticipates the need to return to previous stages in order to redesign the prototype or to fix any feature of the tool. This iterative process ensures that the final product suits the users’ needs and expectations, resulting in a usable and pleasurable experience for the user.
Following a Development Research Method, the G4N Cards Set Canvas development process will be organized in five stages:
In the first stage, exploratory interviews will be carried out. The goals of this stage of evaluation are: (i) to validate this tool’s concept from the users’ perspective; (ii) to understand the expectations for a tool with presented objectives; and (iii) to grasp users’ needs and limitations when interacting with similar technologies.
The second stage consists of prototyping the UI based on the exploratory interviews and literature review results. Low and high prototypes of the G4N Cards Set Canvas will be developed.
The goals of the third stage are: (i) to identify improvements to be made; (ii) to identify interaction difficulties that could harm the users’ experience; and lastly, (iii) to gather concrete information derived from the experts’ expertise and knowledge of Usability Heuristics and design guidelines. In this stage, it is foreseen the need to return to the previous stage to correct the high-fidelity prototype, depending on the feedback received from the users’ evaluation.
The fourth stage comprises the first stage of development of the digital tool.
Finally, in the fifth and last stage, an online User eXperience questionnaire will be delivered to the participants. The main goal of this questionnaire is to perform a direct measurement of the tool’s UX. In this stage, the first version of the final product will be assessed. Participants will be asked to report their experience after they interact with the digital tool. This stage will take place around April 2021, when teachers from multiple schools around Europe will use this application in real-life contexts (i.e. classrooms). Since the researchers will not be physically attending the classes, the goal is to assess the experience, as soon as possible after it happened, with the maximum accuracy. Similarly to stage 3, it is planned the need to return to the previous stage to perform potential adjustments that may be required from the sessions with users.
The snowball literature review and the UX benchmarking of presentation and design tools enabled the identification of potential approaches and characteristics for the G4N Cards Set Canvas, namely a suggestion-based tool, such as Microsoft PowerPoint Design Ideas feature that suggests design ideas based on users’ content, and the Canvas, as a component of the Layout Design Tools.
The G4N Cards Set Canvas will be designed responsively for devices with over 1024 pixels, which is a standard viewport size that encompasses horizontal tablet screens and the majority of desktops and will only be available for this screen format. This way, the eventual frustration and lack of control arising from the interaction with the tool on smaller screens are minimized .
In order to avoid the need to create user assistants, such as Clippit from Microsoft Word—colloquially known as Clippy—that sometimes fail at their functionality, design and humanization , it is imperative to use suggestions carefully and with moderation. Defining the system's requirements, as well as their further validation with potential users, aids to avoid creating systems with such issues.
The research team defined a set of Functional Requirements (FR) for the tool. Non-Function Requirements (Non-FR) (e.g. data privacy and security that must be assured to convey the system’s reliability; device’s requirements to run the tool smoothly and, therefore, upholding a better performance, among others) are also being defined in future work.
The FR depict the tool’s functionalities and features, the expected behavior and interaction, and what the tool offers to the users. The FR are listed in Table 2.
The FR listed in Table 2 emerged from the overview of Layout Design Tools and the UX benchmarking of Design and Presentation Tools, as well as from the empirical knowledge of the G4N project’s research team regarding the use of similar platforms.
Some FR are correlated: to allow the storage of the user’s design cards (FR 11), it is required the user’s register and login (FR 1) in the G4N portal-repository to link the produced contents to its creator (i.e. the user with logged session). Moreover, moving object in FR 6 unfolds in drag-and-drop items (FR 6.1), which is how the objects will be moved across the canvas.
Snap objects and smart guides are present not only in some professional design tools (i.e. Adobe Illustrator) but also in some Layout Design Tools. To ease the workflow, the design will be saved automatically, and the objects will be organized in layers.
Lastly, to prepare the cards to be used either in its physical format (e.g. in classrooms or environmental initiatives) or in digital format (e.g. online classrooms), there must be an option to export the artwork to both digital (i.e. digital PDF or image) and printable format (printable PDF with marks, bleeds, and suggested paper size). This feature is also presented in the Tools FR.
3.3 First Sketch and Digital Prototype
The Design Tools addressed in the exploratory overview, in general, have onboardings, tutorials or help menus (e.g. Canva, Gravit Designer); provide a range of templates for the user to choose from (i.e. all of the tools addressed in the benchmarking); include libraries of icons, images and shapes (e.g. Crello, Stencil); allow exportation to multiple formats with print settings embedded (e.g. Picktochart, Visme); have smart guides (e.g. DesignBold, Prezi Design); and have zoomable canvases (i.e. all of the tools addressed in the benchmarking, except LucidPress). The Presentation Tools (e.g. Microsoft PowerPoint, Prezi Present), besides providing templates, also have smart guides and canvases, suggest brainstorming ideas, allow team collaboration, font adjustments and basic image edition. Notwithstanding, most of the tools are paid or have very limited free features.
The abovementioned characteristics, which are the more prevalent in the analyzed tools and platforms, provide valuable insights to design the first prototypes. For instance, since the G4N Cards Set Canvas target audience—teachers and environmental organizations staff—may present some difficulties concerning visual literacy and information selection , an Onboarding and a help menu are useful features to include.
As it was mentioned, based on the exploratory overview carried by the research team, the first sketch was designed. The sketch in Fig. 6 proposes a sketch for the G4N Cards Set Canvas. A set of parameters was highlighted in the overview and supported the shaping of the first sketch. Along with the first prototypes’ sketch, and with the FR and Non-FR definition, exploratory interviews were considered for the first stage of the Development Research Method (cf. Sect. 3.1).
In Fig. 6, on the left side, there is a sidebar containing the library where the user can choose the templates, icons, images and illustrations to use, while, on the right side, the sidebar holds the artwork settings (e.g. font, opacity, and image settings). In the center, there is a zoomable canvas where the production of G4N thematic cards will take place. The most used options, such as zoom-in, zoom-out, and save will be displayed at the bottom, in a bar.
As the G4N Cards Set Canvas, will be integrated into the implemented portal-repository, some components of the UI design—such as the G4N project’s logotype, the navigation menu, and the login button—already have a defined place. The G4N project’s logotype, the navigation menu and some main actions are on the top navbar. The top bar, containing the languages of the available versions of the portal (Portuguese—PT—and English—EN), the G4N project’s logotype, the main menu, and two buttons (“Add Game” and “Sign in”), is a fixed element since it already belongs in the portal-repository currently online. However, in the main menu, namely in the “Toolkit” menu, appears a new subtopic: “Build your own cards”. This new section is where the G4N Cards Set Canvas will be framed.
Figure 7 represents a low-fidelity prototype of the G4N Cards Set Canvas translation from the first sketch presented (Fig. 6). allowing for a clearer understanding of each section’s goals: on left sidebar contains a search bar to explore the underneath identified elements—templates, icons, basic shapes and illustrations; the right sidebar presents multiple design settings and proposes some modules, such as, for example, displaying a color, a slider and an input to enter measures; the center, which comprises the design canvas, exhibits a card sample with both locked and editable elements.
The digital version of the first sketch was drawn in Adobe XdFootnote 5 and aims to provide a more accurate perception of the elements currently contained in the portal-repository.
In the design canvas, namely in the card area, in order to assure the compliance of the G4N brand standards, there are locked elements—e.g. the project's brand logo, marked with a locker icon—to prevent the user from moving it, therefore, breaking predefined standards. While the G4N project’s logotype is locked, immediately below there is a rectangle for the users to place their brand name or logotype. In Fig. 7, the areas outlined with the blue line enclose the design elements and provide precise identification of the G4N thematic card’s elements. The other elements can be modified by the user with some predefined constraints (e.g. the font-face and size will remain the same as the original sets of thematic cards).
The next steps will include the validation of the low-fidelity prototypes (framed in the second stage of the Development Research Method), in order to proceed to the high-fidelity prototypes’ development and first evaluations (second and third stages of the Development Method).