# Introduction ccording to the domain, the potential of the interface must be maximally exploited, using the most appropriate means (video, audio, etc.) to achieve the best understanding of the activities for which it was designed. The interface is where the inputs and outputs of the system occur. Its basic responsibility is the communication between the system and the user, although as it is the means of exit from the system, it also has a responsibility according to its actions based on the application domain; in this case playful. In a natural way, in the interaction of the user with the interface, patterns of thought are developed about the activity and knowledge of the human being, called user models. These patterns are schemas that relate: 1) sets of information and associations between objects, and 2) actions and thoughts. This implies that they are initialized as cognitive processes in the human mind; through stimuli from the environment. A single mental model contains vast information. There are many of them in people's memories of different concepts; an example would be,on four-legged dogs, fur, sharp teeth, tail, and a number of noticeable qualities. When the stimulus from the environment coincides with the previous mental model, the thought pattern is activated in the mind (Laureano-Cruces 2000; Laureano-Cruces and Rodríguez-García 2012; Soegaard 2002). In the case of study, the visual elements of the interface play an essential function from its semantics for the understanding of meaning. The case study is related to the concept that implies the difference between the magnitudes of brightness (apparent vs real) of the stars in relation to their distance. For more information on the subject, consult (Torres-Velasco, Laureano-Cruces and Santillán-González 2021). The visual elements are designed from the construction of mental models taking into consideration the user's emotions. This article is organized as follows: in section two, the tools used in the development of the playful interactive-interface are explained; in conjunction with emotions as an essential element for the construction of the customer journey map; in section three, the case study applied to a playful interactive-interface is presented; in section four, final reflections on the importance of the customer journey map for the management of new information technologies are discussed. # II. # Development and Tools This project consists of a theoretical-empirical investigation for the design and implementation of a playful interactive-interface that allows visualizing the causal relationships of the different parts of the distance modulus. That is, it interacts in a didactic way with a set of instructions to relate the apparent brightness, the real brightness and the distance of a star or celestial object. Facilitating the understanding of this complex cognitive structure from the domain of astronomy. The four phases of the general design methodology (analysis, synthesis, testing and implementation) are described. # a) Phases of the general design methodology The methodology suggests associating the process of creating ideas to solving problems or determining hypotheses from the higher plane of the mind. Therefore, each idea goes through a similar process from its particular point of interest. Each phase is described below: i. Analysis: the design problem of the application of a specific scenario is examined together with the community (users, clients, protocol group, committee and members of the jury). The case study specializes in the field of information design and visualization. Likewise, the requirements and complexities necessary for the visual modeling of the theory from the perspective of causal reasoning are identified. In order to organize a diagnosis with the fundamental aspects of the design system and visual language. That is, the graphic description of an event related to the change of value in a physical process is proposed. ii. Synthesis: the attributes and mappable properties of the phenomenon are conceptualized in visual devices, so that the user can reconstruct a possible route of inference for the solution of the problem or the given task. Once the class modeling is ready, it will proceed to the testing phase. If this is not accomplished satisfactorily, then it is possible to iterate into the analysis phase, again, to refine the diagnosis and improve on the prototype. iii. Testing: the design is validated with ergonomic and usability test to collect the informative qualities of feedback focused on the end user. Bases on the results report, it will be decided whether to go back and iterate towards the analysis or synthesis phase for its refinement, or if it complies with the guidelines established for the implementation phase. iv. Implementation: the cognitive artilect of visualization is integrated into the conceptual system of representation and configuration of the site (the museum); so that it is constantly monitored and maintained. The above based on possible approaches to scientific knowledge and taking actions in the future. For the development of an interactive system, the analysis of the user's task is very important, even more when developing a system to support non-formal learning. To understand the user's needs, it is necessary to observe him in his environment and know her opinions; once the user's needs have been identified, the designers use different tools to capture their understanding of the user's activity (design model) from which the system is built. In the case of systems for education, it is also essential to rely on an expert in the domain to handle the subject to be considered. User activity is the action you take to meet your needs. So how do we do that? How can we do an analysis and design of user activity to meet their needs? There are different methods and techniques to reduce the gap between the mental model of the designer and the user such as: observation techniques, interviews, questionnaires, archetypal descriptions of people, travel maps, review of the domain about the phenomenon, among others. Some of these can be explored in the following link (https://medialabamsterdam.com/toolkit/). In the case study, archetypal descriptions, a review of the domain of the phenomenon and mental models were used. Coming up next, a brief explanation of these is offered. # b) Archetypal descriptions It is the description of a character, image, symbol or situation that occurs in literature and in life, and that is considered universal in most cultures. In the case study, the archetype of the personality of children between eight and ten years old was developed. The personas technique helps to consolidate archetypal descriptions about user behavior patterns in representational profiles, which humanize the design approach in the form of scenarios and direct communication (Martin and Hanington 2012). This distinction creates useful design goals by pointing out people's behavior. For the implementation of the interactiveinterface, the specific operation stage of the cognitive development of the people who are going to use the device is considered. In order to reduce the level of cognitive load avoiding frustration. In the case of study, the target audience is girls and boys between eight and ten years old. Since at this age they find themselves with the acquisition of logical, technical, motor, graphic, social and emotional thinking to adapt to the space that surrounds them (Levine 2014; Liu 2018). Thus, these people begin to use logic through mental models of tacit knowledge and concrete ideas of abstract events, at the same time that they become accustomed to symbols or complex representations, extrapolating their meaning to other areas of neural plasticity. It is worth mentioning that this audience must be familiar with the technology, through a mobile device such as the cell phone of a friend or relative. In other words, they know how to use apps, websites, and tools like the computer, mouse, trackpad, or keyboard. # c) Review of the domain about the phenomenon Meetings are held with the domain expert, and by iterating little by little the contents that will be presented in the software are identified to adapt their understanding according to the user of the system. # d) A mental model There are two main types of mental models: the perceptual and the conceptual. As for the perceptual, as their name implies, they depend on the human senses of perception. Two aspects are important to these mental models: 1) the shape of the world, and 2) the way it is perceived. The conceptual ones represent abstract aspects. Both can reflect: a possible situation, an imaginary situation or a true situation. A mental model is a diagrammatic perception of how a system works in reality. This represents the thought processes or internal constructs from the exploration, beliefs, assumptions, behaviors, feelings and motivations of people. Mental models are important because they represent objects, states of affairs, sequences of events, the way the world is, and the social and psychological actions of daily life (Johnson-Laird 1983, 1989; Kalbach 2016; Norman 2011; Reeve 2007; Simon 1996; Yablonski 2020). Norman (2011) points out that mental models are important tools for organizing and understanding complex aspects. A conceptual model resides in the mind of the person (Figure 1). Therefore, mental models help transform the complexity of reality into understandable mental concepts (Norman 2011). Therefore, in this case it is the mental model of the designer, from which the knowledge about the goals and objectives of design is subtracted to improve the user experience with a product; getting a deeper insight into the pre-existing mental models in people (Serrano, Blázquez 2016). # e) Emotions the cherry on the cake They are considered to the emotions, because they represent the internal reactions of a user during the interaction and the interpretation of the interface; from a series of morphisms and list of needs to interact with the system (Laureano-Cruces, Sanchez-Guerrero, Velasco-Santos and Mora-Torres 2017; Mora-Torres, Laureano-Cruces and Velasco-Santos 2011; Yablonski 2020; Yáñez-Castillo, Laureano-Cruces and Garmendia-Ramírez 2017). These reactions are associated with the peaks of emotional state to achieve satisfaction and meet the goal of the interactive-interface, as presented by the affective-motivational architecture proposed in Mora-Torres, Laureano-Cruces, Gamboa-Rodri?uez, Rami?ez-Rodri?uez, and Sa?chez-Guerrero (2014). This architecture involves the concepts for the teaching-learning process: the objectives, events, rules, emotions and actions of the user when interacting with the interface represented in this case by a pedagogical agent (Laureano-Cruces 2004). These are linked to the motivational facets such as: effort and latency, among others (Figure 2). Thus, emotions assign meaning by supporting the decision-making process by assigning a valuation to the event; influencing the way we think. "Positive emotions are as important as negative ones: positive ones are essential for learning, curiosity and creative thinking ..." (Norman 2005, 35). Furthermore, positive affect (+) "awakens curiosity, attracts creativity and makes the brain an effective learning organism" (Norman 2005, 42). From the affective-motivational architecture (Mora-Torres et al. 2014), external reactions are extended to the field of semantic design with symbols that map the relationships associated with the properties of the phenomenon in question. Emphasizing that the interaction with the interface's scientific information display system makes it possible to influence the meaning of its ontological knowledge. # f) Customer Journey Map A user journey map or customer journey map (CJM) is a functional tool that schematically visualizes the experiences of people when interacting with a product or service, allows evaluating each moment and to improve it individually. It is ideal for narrating peaks in emotional state while completing a specific task or goal (Martin et al 2012). Gibbons (2018) points out that the CJM promotes a holistic view of the user experience by presenting moments of indecision, frustration and delight. Additionally, it reveals opportunities to address pain points, alleviates fragmentation, and ultimately creates a better experience for users. This visualization tool must be honest with experience and be guided by the determination of a previous project objective (Gibbons 2018; Kalbach 2016; Yablonski 2020). By structuring these actions, a narrative is created. Thus, these moments (touchpoints) can take different forms depending on the context, whether from a personal contact between individuals face to face, to virtual interactions with a website or objects in a virtual world (Gibbons 2018;Stickdorn and Schneider 2010). Once touchpoints are identified, they are connected in a visual representation of the overall experience. Hence? "This overview should be visually engaging enough to make it easily accessible to all, but should also incorporate enough detail to provide real insights into the journeys being displayed. This might mean basing the map around personas, so that the customers doing the journeying become far more than just name on a page. Basing the map around materials customers have produced also helps facilitate empathic engagement, which is crucial for conveying the myriad emotions that most journeys are made up of" (Stickdorn and Schneider 2010, 152). The customer journey map is also known as an experience map. The terms user journey map and customer journey map can be interchangeable. In both cases, the steps to be followed by a user until reaching a specific goal are displayed (Gibbons 2018; Komninos 2020; Schroeter 2019). Commonly, the journey map displays the phases of experience along a horizontal axis to show the progression of time. Along the vertical axis, categories or metrics of particular interest to the organization are added (Tharon 2014). As the template in Figure 3 shows. # Case Study The case study involves the simulation of a physical process based on its mathematical equation (with three degrees of freedom) that relates the distance of a star with its absolute and apparent brightness, respectively. This is where the contribution to the field of visualization is found with the opening of a point of intersection between the design of interactive interfaces and the visual simulation of physical processes. The main objective of the interactive-interface is to facilitate understanding of the star distance modulus. Solving the causal relationship between brightness and distance by increasing the value in A (subgoal 1) or decreasing the value in B (subgoal 2). For more information, consult Torres-Velasco, Laureano-Cruces and Santillán-González (2021). Each of these sub-goals is represented by a functional abstraction in the interactive-interface programming algorithm. Because it integrates a series of arithmetic operations returning a value to update the display system in real time. They are executed as long as there is an interaction in A or B. Which are represented as components of a visual element in iconographic symbols for the interpretation of meaning. Each image considers previous research on how people perceive within a certain environment. Through what objects, shapes, colors, textures or sizes and how is it related to their prior knowledge. In the case of study, if the value of the parameter in brightness or distance is changed in the interactive-interface, it would cause an effect of increase or decrease in the behavioral dimensions (*, +, ?). As shown in Figure 4. 4, presents on the vertical axis the actions, events, tasks and emotions that both the user, the system and the interface experience, through the route or activity designed in order to modify the distance with the interactive-interface (Norman, Draper 1986). Temporality is represented on the horizontal axis. In the case study, the system displays the interface to awaken an emotion of curiosity and intrigue in the user, so the interface suggests modifying the value in distance to feed their interest in using it. The user decides to press a button that immediately increases the value of the property and the interface translates the change in the display. Because of this the user is happy with the results. So, he continues to motivate him by suggesting new tasks until he feels satisfied. The above is an effective way to travel: from the first stage, where the necessary information is provided to generate empathy; to the second, where the problem of visualization is solved. As shown in Figure 5. # Conclusions Because the case study involves the simulation of a physical process based on its mathematical equation, this work brings to the field of visualization the opening of an intersection point, between the design of interactive interfaces and the visual simulation of physical phenomena. This work arises from the notion that both mathematical and graphic formulas and diagrams are a mode of conceptual representation of semantics that are responsible for presenting abstract domains existing in nature. Therefore, it is proposed to determine that, despite the fact that abstract representations such as the distance modulus make it difficult to understand these complex cognitive structures. The visualization of this astrophysical phenomenon encourages qualitative reasoning through an interactive language. Visual simulation and interactive interface design facilitate this meaning: the conceptual reconstruction of a structure. The use of tools and techniques for the management of new information technologies, such as the journey map, promote the understanding these essential structures for meaning in the pedagogical field. This is the highest concentration efficiency of cognitive capital. Everything we know is in a higher mental structure that is constituted in the artilect from our intellectual economy. Commonly, it is used to access into a multi-representational field of associations inserted in a specific market. For example, in engineering, these kinds of tools help to expand the knowledge that one has about the physical phenomenon. It is like the thread of knowing that can be purely mathematical or less abstract than in art. The journey map results in the creation of the interactive-interface that, -not only obeys the designers and project managers to align a common mental model, but also creates a deep collaboration of the user experience; helping to identify current challenges and opportunities depending on the complexity of the project. The process of creating maps reinforces conversion and aligns mental models between design teams. This shared vision is an achievement of the journey map and the diagrams, since, without it, consensus, decision-making and coherence in actions to improve people's experience would not be possible. Carrying out a design system during visual coding highlights the importance of organizing all components of experience within the design process. Without planning all these elements, it would be difficult to abstract the results in a part time. Therefore, the design system facilitates the solution to coding problems. The prototype of the playful interactive-interface could be consulted in the following internet link:(https://www.dropbox.com/s/7bo4miefhgx5l4u/video _1.mov?dl=0) and in the github repository (https://github.com/ciretorres/thesis-project) where the open source is located to download, play, test or contribute with the code for free. 1![Figure 1: Mental model. Source fromNorman (1986) ](image-2.png "Figure 1 :") 2![Figure 2: Affective-motivational structure. Taken from Mora-Torres et al. (2014) Satisfactory affect (*) addresses the level of reflective design mentioned by Norman (2005), because it deals with long-term associations, of the sensations that are produced when owning and using the interface. Therefore, at this level it is important to emphasize the relationship (interaction) between the interface and the personality of the users (Norman 2005; Yáñez-Castillo 2016; Yáñez-Castillo et al. 2017).Thus, emotions assign meaning by supporting the decision-making process by assigning a valuation to the event; influencing the way we think. "Positive emotions are as important as negative ones: positive ones are essential for learning, curiosity and creative thinking ..."(Norman 2005, 35). Furthermore, positive affect (+) "awakens curiosity, attracts creativity and makes the brain an effective learning organism"(Norman 2005, 42).From the affective-motivational architecture (Mora-Torres et al. 2014), external reactions are extended to the field of semantic design with symbols that map the relationships associated with the properties of the phenomenon in question. Emphasizing that the interaction with the interface's scientific information display system makes it possible to influence the meaning of its ontological knowledge.](image-3.png "Figure 2 :") 3![Figure 3: Customer journey map template. Taken from Thinkers Co., n.d.](image-4.png "Figure 3 :") ![The Importance of the Journey Map in the Design of a Playful Interactive-Interface](image-5.png "") 4![Figure 4: Journey map of the playful interactive-interface. ~, negative affect; +, positive affect; *, satisfying affection. Own elaboration](image-6.png "Figure 4 :") © 2021 Global Journals ( )G © 2021 Global JournalsThe Importance of the Journey Map in the Design of a Playful Interactive-Interface The Importance of the Journey Map in the Design of a Playful Interactive-Interface ## Acknowledgments This work is part of the research project carried out by Eric O. TORRES-VELASCO to obtain the Master's degree in Diseño y Visualización de la Información at the Universidad Autónoma Metropolitana -Azcapotzalco. Supported by the posgraduate scholarship and the divisional project Design of intelligent interfaces for the simulation of behaviors of living or animated organisms: information visualization section from the same University. * Journey Mapping 101 SGibbons 2018 Nielsen Norman Group * Mental models: towards a cognitive science of language, inference, and consciousness PNJohnson-Laird 1983 Cambridge University Press Cambridge * The Computer and the Mind: An Introduction to Cognitive Science PNJohnson-Laird 1989 Harvard University Press USA * Mapping experiences: a complete guide to creating value through journeys, blueprints, and diagrams JKalbach 2016 Canada: O'Reilly * 7 UX Deliverables: What will I be making as a UX designer? AKomninos Interaction Design Foundation 2020 * Interacción Dinámica en Sistemas de Enseñanza Inteligentes ALLaureano-Cruces 2000 Universidad Nacional Autónoma de México Ph. D. Thesis. Instituto de Investigaciones Biomédicas * Memorias XVII Congreso Nacional y III Congreso Internacional de Informática y Computación de la ANIEI [Memories XVII National Congress and III International Congress of Informatics and Computing of the ANIEI] ALLaureano-Cruces 2004. 20-22 October 2004 Tepic Agentes Pedagógicos * Design and Implementation of an Educational Virtual Pet Using the OCC Theory ALLaureano-Cruces ARodríguez-García Journal of Ambient Intelligence and Humanized Computing 3 1 2012 * The interface: an object that is hated and loved ALLaureano-Cruces LSanchez-Guerrero PVelasco-Santos MMora-Torres Proceedings of E-Learn: World Conference on E-Learning in Corporate, Government, Healthcare, and Higher Education JDron &SMishra E-Learn: World Conference on E-Learning in Corporate, Government, Healthcare, and Higher EducationVancouver, British Columbia, Canada AACE 2017 Association for the Advancement of Computing in Education * Universal methods of design: 100 Ways to research complex problems, develop innovative ideas, and design effective solutions BMartin BHanington 2012 Rockport Publishers USA * MMora-Torres ALLaureano-Cruces PVelasco-Santos 2011 Estructura de las Emociones dentro de un Proceso de Enseñanza-Aprendizaje * Revista Perfiles Educativos UNAM, XXXIII * An Affective-Motivational Interface for a Pedagogical Agent MMora-Torres ALLaureano-Cruces FGamboa-Rodri?uez JRami?ez-Rodri?uez LSa?chez-Guerrero International Journal of Intelligence Science 4 1 2014 * Emotional Design: Why We Love (Or Hate) Everyday Things DANorman 2005 Basic Books USA * Living with complexity DANorman 2011 The MIT Press USA * User Centered System Design: new Perspectives on Human-computer Interaction DANorman SWDraper 1986 San Diego USA: University of California * Understanding Motivation and Emotion JReeve 2009 WILEY Fifth Edition * A beginner's guide to customer journey maps ESchroeter 2019 * Design thinking: lidera el presente, crea el futuro MSerrano PBlázquez 2016 Madrid: ESIC * The Science of the Artificial HASimon 1996 The MIT Press USA * The basics of user experience design MSoegaard 2002 Interaction Design Foundation USA * This Is Service Design Thinking: Basics, Tools, Cases MStickdorn JSchneider 2010 BIS Publishers Amsterdam * Journey mapping: a brief overview HTharon 10.1145/2644448.2644451 Commun. Des. Q. Rev 2 3 2014. May 2014 * Customer Journey Map ThinkersCo * Visualización a EOTorres-Velasco ALLaureano-Cruces ASantillán-González 2021