key: cord-0058099-mqcvv6j2 authors: Beça, Pedro; Ribeiro, Sofia; Santos, Rita; Aresta, Mónica; Veloso, Ana Isabel; Ortet, Cláudia title: Design and Initial Evaluation of an Online Portal-Repository: The Case of Gamers4Nature Project date: 2020-09-19 journal: Advances in Design and Digital Communication DOI: 10.1007/978-3-030-61671-7_13 sha: 49cef698ee1b2b203b6cdf9b8081f37117209d23 doc_id: 58099 cord_uid: mqcvv6j2 The Gamers4Nature (G4N) project aims to develop and implement a set of strategies that encourage younger audiences (i.e. upper-secondary and undergraduate students) to participate in the creation of mobile games, while promoting knowledge about environmental preservation. This paper introduces one of these strategies, the G4N portal-repository. The portal has a three-fold objective: (1) to serve as the project’s online presence, introducing its goals and objectives; (2) to host the project’s materials and main outcomes; and (3) to act as a repository for the games developed along game design and Game Jam sessions. The development of the project’s online portal was guided by the need to establish a connection with a physical toolkit that was developed in the scope of the project to help users build their games and to reflect the feeling of gaming and the non-linearity of gaming activities. Taking into consideration the importance of developing a user-friendly interface, the portal was developed following a User-Centered Design approach. Although further testing is still needed, the results of the UX Expert Review - the first testing stage - confirmed the portal’s potential of providing a meaningful and relevant experience to its users. Several studies address the impact on students' engagement and motivation when challenged to create and develop their own digital games [1] [2] [3] . In this scenario, the Gamers4Nature (G4N) project aims to develop and implement a set of strategies that encourage younger audiences (i.e. upper-secondary and undergraduate students) to participate in the creation of mobile games, while promoting knowledge about environmental preservation. One of these strategies is the use of the G4N Toolkit to Game Design [4] , a tangible (physical) artefact that includes a set of cards addressing game design and themes related with environmental awareness (microplastics was the first thematic addressed but other themes are being developed). These last cards aim to provide a foundation for the development of the game narrative theme. Another strategy of the G4N project -focused on sharing and disseminating the created games developed and seeking the long-term sustainability of the project -is the development of a portal-repository. The portal (http://www.gamers4nature.pt/index.php?lang=EN) has a three-fold objective: (1) to serve as the project's online presence, introducing its goals and objectives; (2) to host the project's materials and main outcomes; and (3) to act as a repository for the games developed along the game design and Game Jam sessions. The development of the project's online portal) was guided by two concerns: the need to establish a connection between the portal-repository and the G4N Toolkit, and the need to reflect the feeling of gaming and the non-linearity of gaming activities present in the physical toolkit. Furthermore, developing a user-friendly portal was also important to ensure easy access and use of project's resources and to upload and download the created digital games. Taking this into consideration, a User-Centered Design approach was adopted in its development. In this paper, we introduce the G4N online portal development process, from the definition of its main features to the description of how the connection between the physical toolkit and the portal was achieved along with the first testing stage with UX experts. Following a background section (Sect. 1) focused on the importance of considering of UCD and users' experience, Sect. 2 introduces the G4N online portal, with a highlight on its concept, structure and user interface. Section 3 provides an overview of the first evaluation iteration, including its procedures and participants' information as well as evaluation results. The paper ends with Sect. 4, where conclusions and potential directions for future work are presented. Nowadays, consumers face a large and continuous growth of market offers, with several online portals and platforms being deployed every day. In this context, the importance of User-Centered Design (UCD) approaches is reflected in the adoption of iterative design processes, where users' needs are considered in every step of the process ensuring more usable and accessible product [5] . UCD focuses on users and their needs: instead of requiring an adaptation of user's behaviors and forcing them to learn how to use a system, UCD sustains that a system can be designed to support the attitudes, beliefs and behaviors of its end users, as they will identify with the tasks that the system is designed to perform [5] . User Experience (UX) also plays a major role when designing any sort of technology, leading companies to increasingly valuing users and their experience, owing to a focal point of any product or system [6] . The user experience is built into every contact they have with the product, not only when they interact with the software, but also with its surroundings, from connecting with people to connecting with other products [7] . UX is about understanding users, their needs and values, their abilities and limitations, and is indeed a very important part of specifying and building any digital system. According to Norman [8] , understanding the users' needs and aiming to design a product that fulfils those same needs is the first requirement when aiming to provide an exemplary experience. In that line of thought, he also states that a great User Interface (UI) does not assure a great UX, claiming that any website can be stunning in terms of layout, and awful or inadequate when seen from the users' perspective. It is not surprising, therefore, that the importance of UX -as it is reflected on the users' journeys and motivation to choose and use the system -is starting to be adopted by many companies, in order to differentiate their products in the market [6] : the better the experience, the better chances it has to succeed. The starting point for developing the project's online portal was the Toolkit to Game Design [4] , a tangible (physical) artefact that includes the following set of resources: a Game Construction Cards Set, with 12 cards addressing different game design elements (e.g. characters, rules, outcomes, premise); a Rapid Game Design Document (a document with suggestions on how to explore the Game Construction Cards); and a set of thematic cards with information about nature and environment preservation (see Fig. 1 ). As it will be presented in the following sections, the design process of the project's portal was guided by the aim of establishing a connection between the physical toolkit and the portal-repository and reflect, in the online portal, the feeling of gaming and the non-linearity of gaming activities present in the physical toolkit. The G4N online portal, beyond presenting the project and its goals, is also a repository where participants (upper-secondary and undergraduate students) from game creation events (e.g. Game Jams) will be able to upload their games. When defining the portalrepository main features, three dimensions were considered as required by the research team: 1. The project's online presence: The portal-repository serves as the project's online presence, a place where its goals and objectives are introduced and where information about the project, hosting institution, partners, and people involved is provided. 2. Hosting the project's materials: Besides the project's online presence, the portal contains the digital format of the G4N Toolkit, providing complementary information to those present in the printed version. 3. Games' repository: The G4N portal also acts as a repository for the games developed along the game design and Game Jam sessions. Users will access the portal to upload the games developed during the sessions; when uploading a game, users, who must be registered in the portal, are asked to fill mandatory information, e.g. the game's name and description. Besides these fields, a shareable link on the game's page it is also available, to ease the game's dissemination. Users can add their favorite games to their personal profile and therefore check it, along with their own games. It is expected that sharing the game in the project's portal will motivate users' participation as they will be able to build a reputation among their peers (other gamers). There are a few features that were not implemented in this first stage of prototyping, such as custom avatars and building a user moderated community. Starting from the Expert Review described in the following section, the project will move on to implement the second and last stage of G4N's website. To accommodate information addressing G4N's portal main goals, three major sections were initially defined, each one representing one of the project's functionalities: project presentation; G4N Toolkit presentation; and interaction with the Toolkit. To define the portal's homepage structure, the research team first discussed in a brainstorming session which sections order should be established to transmit the project's identity and main functionalities. Following this discussion and considering the importance of the user's opinions, the research team recurred to a simple card sorting to understand the users' perspective about the portal's structure. The card sorting, which took place on March 2020, involved 10 potential users (undergraduate and graduate students, convenience sampling), 9 with no previous knowledge about the project. All users had a set of three cards, each one addressing one of the portal's homepage sections, and after being introduced to the project's main goals they were asked to order the cards according to what they would expect to find in the G4N's portal. For the project's homepage, all 10 participants considered the following as the more direct and logic structure: These results were taken into consideration for the portal's architecture, which was established in the following way: i) a homepage with brief information about the project with links for the other sections/functionalities; ii) a page where created and uploaded games are introduced; and iii) a page introducing the digital version of the G4N Toolkit to Game Design. An additional page, describing in detail the project's goals, objectives and institutional information, was also added to the portal's structure. To ensure consistency in all design elements, the G4N portal UI was based on the project's identity and brand. White space (see Fig. 2 ), straight geometric elements and a well-organized and minimalistic website are the main features of this interface. This aesthetic highlights with the watercolor marks, inspired on the thematic cards set from the Toolkit to Game Design (see Fig. 1 ). To maintain the connection with the physical toolkit, hexagonal forms were chosen to represent several components (see Fig. 2 ). The hexagonal form was applied across multiple sections of the portal-repository such as the game's page and about the project's page when showing G4N publications. Hexagons convey playful vibes and balance that match with games and gamification scenarios. The abstractions of this shape, combined with rectangular elements, expresses a clean and serious look to underline G4N project's credibility. Color usage must be consistent throughout the website, its meaning should be considered, and its appliance must occur with users' minimum cognitive effort [9] . In the G4N portal, the color palette applied follows the Toolkit to Game Design palette and is based on four colors: blue (#7BCCC0), yellow (#E4C420), purple (#524C9F) and pink (#F3BBB9). Considering the meaning of the blue color, that conveys trust and calm [10] , the blue tone was selected to be the main color of the UI. The other colors also have significance: pink, nearly red, means danger and forbidden; the yellow means alert and warning (Heller, 2012) ; and purple means singularity and distinction [10] , and prevails in game streaming websites, such as Twitch. Additionally, watercolor marks where applied subtly in the main titles and subtitles to find harmony with the white spaces (see Fig. 3 ). The typography was also retrieved from the Toolkit to Game Design and the sans serif fonts were applied as follows: Heebo family, a legible and clear font for all texts and information; and Agrandir Variable, a playful and youthful font for titles. According to Nielsen's Usability Heuristics [11] , "visibility of system status" (e.g. feedback) and "error prevention" are part of a clear and usable interface design. Therefore, and aiming to comply with the Heuristic "visibility of system status", by using the meanings conveyed by the color scheme defined, the yellow and the pink were applied in feedback messages according with their severity. Yellow for warnings (see Fig. 4 ) and pink (very close to red) to errors (see Fig. 5 ). The home page tells a story that aims to guide the user through the website's experience: (1) Know the project; (2) Explore other games and get inspired; (3) Create your own game using the G4N Toolkit. The design used (see Fig. 6 ) provides a visual guide, grouping items logically by different topics providing symmetry and balance in the use of white space, observing the general layout of the style guides from Mayhew [12] . Arrows were chosen to transmit the fluidity and dynamism between the homepage's information blocks. "Call to action" buttons were also included, using yellow as background color, black in the text to assure the contrast and a white icon that underlies button's action meaning (see Fig. 6 ). The design of the portal-repository had in consideration Nielsen's 10 Usability Heuristics [13] . As evaluation is considered a fundamental step in the design processeither by experts or potential users -, for the first stage of G4N portal-repository's evaluation, an Expert review was chosen as a complementary method. According to Nielsen Norman Group [14] , expert reviews can be considered as a more general Heuristic evaluation by assessing the design, not only for accordance with Heuristics but also considering principles from other fields, such as cognitive psychology and human-computer interaction. The expert's expertise and past experience are central dimensions in this type of evaluation. This kind of evaluation can be done in any stage of the design cycle [14] to identify minor issues usually difficult to measure. This method was chosen because it is considered effective in identifying issues not covered, for example, by usability testing. An expert review should be carried out by a group of 1 to 4 experts [15] and there is not a specific number of years of experience as a requirement for the reviewers: the only requirement is that the evaluation is not their first UX evaluation [14] . For the G4N portal-repository prototype evaluation, 3 UX Experts with more than 5 years professional experience in the field were invited; one expert has between one and five years of experience in UX and the other two have more than ten years of experience in the UX evaluation field. The first session was conducted with a UX and interface design Research Fellow, Master in Multimedia Communication, the second with a Lead Product Designer and the third with a university teacher who instructs UX Design. Due to Covid-19 pandemic, the evaluations were conducted remotely using Microsoft Teams or Zoom for videocall conference to immediate understand the experts' observations while seeing the shared screen to analyze their interaction with the portal. Also, OBS Studio to Windows was used to record the evaluation sessions. All three sessions took place in different days, between 11 and 19 May 2020. Prior to the sessions, a first questionnaire asking about the experts' current professional occupation, the years working in the UX field and a brief description of their experience in this area was sent to each participant. Also, an informed consent requesting permission to record the audio and video session for further analysis and to process and store the collected information for research purposes only was made available. The G4N team member established a video call with each expert and then introduced G4N project. After this introduction, the expert started to freely inspect the website using the Thinking Aloud Protocol, in which users speak what they thought about the system they're exploring [16] . The research team registered their inputs, analysis and suggestions. After the session, the expert was invited to answer a questionnaire focused on a systematic review to identify the portal's strengths, usability problems and possible suggestions for improvement. The analysis considered expertise in User Experience, heuristics and other usability principles and guidelines. Nielsen Heuristics were often mentioned in the UX experts' analysis. As strengths, the observation of "aesthetic and minimalist" usability Heuristic was highlighted: the portal's structure eases the reading of information blocks, makes the navigation pleasant, provides a smart design by the usage of white spaces and creates a storytelling narrative that guides the users through their journey in the portal-repository. This helps to fulfil the "consistency and standards" Heuristic, making actions coherent without overwhelming the users' cognitive capacity. Furthermore, the use of redundant anchors in the main menu and in the pages supported the Heuristics of "recognition rather than recall" and of "help users recognize, diagnose, and recover from errors". Experts mentioned that the copy adopted throughout the website is informal, friendly, and relaxed, suitable for G4N's target audience. Also, and related with "error prevention" and "visibility of system status" Heuristics, one expert mentioned that the most critical interactions were accompanied with alerts, helping the users understand the following consequences of their actions and system status (see Fig. 5 ). However, there were also a few suggestions and points that, according to the experts' knowledge and experience, could be improved. Aspects such as mentioning the game's name in its delete message, setting a timer to hide the toaster with "Login successfully" message, and applying consistency throughout all "call to action" buttons such as "Add a game" -should be made; also, additional information in forms regarding the content the user should fill in the blanks and exclude collapse and expand buttons when downloading the Toolkit, making all buttons available by default. As a first testing stage, only key aspects regarding the users' experience were analyzed. Dimensions such as the environmental message's impact triggered by the experience will be addressed on future tests, to be conducted with the target audience. When youngsters' role as game creators is increasingly valued in the Education field, the G4N project puts the users' experience as a focal point of the research approach and develops strategies having in consideration their needs. The motivation triggered by the desire to play the games they have created themselves was seen as a starting point for developing this portal-repository, which supports, not only the project's resources, but also the upload of those games. The development of the G4N portal-repository was based on two axes: establishing a visible connection between the portal and the physical toolkit and transmitting the non-linearity of gaming activities present in the physical toolkit. The goal of this UX was to get an objective and conclusive analysis to fix problems and provide the best experience possible to potential users. To evaluate G4N's portal-repository, experts were asked to identify its strengths, problems and suggestions based on their UX expertise. The evaluation carried out in this first phase of the project followed an expert review approach which was important to identify usability issues which would be unlikely to discover in other approaches as usability testing. However, this was only an important validation point to scaffold future tests with end-users as this method of evaluation alone does not allow a consolidated evaluation of the users' experience on the portal. As for future work, the research team intends to do further UX evaluation with the end-users (e.g. Guerrilla Test) and is also implementing the virtual community feature. The potential of these communities is widely accepted, as social communities play a role of acceptance, engagement and power within a group that promotes social responsibility towards a community [17] . Also, social interactions and collaborative activities fostered by these communities provide a high value for players, increasing their enjoyment and motivation to participate [18] . An implementation of design-based learning through creating educational computer games: a case study on mathematics learning during design and computing Participatory methodologies to promote student engagement in the development of educational digital games Teacher perceptions of the value of game-based learning in secondary education Supporting the game construction process: development of artefacts in the context of a toolkit to game design Assessing the quality of user experience The glossary of human computer interaction The Design of Everyday Things: Revised and Expanded Edition Designing the User Interface: Strategies for Effective Human-Computer Interaction A psicologia das cores: como as cores afetam a emoção e a razão Usability heuristics for user interface design Principles and Guidelines in Software User. 1 edn Heuristic evaluation of user interfaces Determinants and outcomes of online brand tribalism: exploring communities of massively multiplayer online role playing games (MMORPGs) Collaborate and share: an experimental study of the effects of task and reward interdependencies in online games Improving a human-computer dialogue Exploring users motivation in innovation communities Sense of community, social identity and social support among players of massively multiplayer online games (MMOGs): a qualitative analysis Communities of Play: Emergent Cultures in Multiplayer Games and Virtual Worlds Acknowledgements. This work is part of the Gamers4Nature project Gamers4Nature (POCI-01-0145-FEDER-031047) that has the financial support of FCT -Foundation for Science and Technology (Portugal)/MCTES -Ministry of Science, Technology and Higher Education and FEDER under the PT2020 agreement.