Gamified Proceedings

Experience the intersection of art and play: Dive into a network of performances, music and presentations from the "SPIEL! Games as Critical Practice" festival on the criticalgames.ch website.

Initial situation

In January 2023, the FHNW Academy of Music in Basel hosted the international festival "SPIEL! Games as Critical Practice". This four-day event featured concerts, lectures, performances, and discussions, critically exploring the creative power of play in addressing societal, technological, and aesthetic questions.

Target audience

The festival engaged a diverse audience, including students, educators, researchers, and professionals from fields such as music, design, psychology, technology, and education. It was also open to the general public, inviting anyone interested in the intersection of play and critical practice.

Purpose and objectives

The primary aim of the festival was to investigate the inherent creative power of playfulness and its impact on various domains. By adopting a playful approach, it sought to shed light on critical societal issues and encourage innovative thinking.

Anticipated outcomes

The festival aimed to achieve several goals:

• Interdisciplinary collaboration: Foster connections among various disciplines to explore the multifaceted nature of play.
• Educational enrichment: Provide valuable insights and knowledge to students and professionals, enhancing their understanding of play as a critical practice.
• Public engagement: Encourage public participation in discussions about the role of play in society, promoting broader cultural awareness.

Despite its success, the festival's rich educational content was initially accessible only to a few attendees. To extend its impact and make these resources available to a broader audience—including participants and the general public, a platform is needed.

Project goal

The project's goal is to develop a platform that will not only preserve content for future audiences but also provide a valuable resource for researchers, students, and anyone interested in critical perspectives on games as a cultural practice. By establishing a web-based archive, the platform will centralize the festival's content in a single, accessible location. Additionally, the design incorporates an innovative approach to showcase connections between events through interactive, gamified elements.

Developed solution and its benefit

Our journey: How we got here

During the first two sprints, we dedicated ourselves to extensive research and analysis to gain a clear understanding of the term “Gamification” and its relevance to our project. We explored a variety of creative approaches, such as developing a virtual 3D world where users could navigate through recreated festival spaces or designing a remix tool that allowed users to reimagine concert recordings in their own style, much like a DJ mixes tracks. Another idea resembled an interactive lottery draw. Despite this creative exploration, we initially struggled to find a unified direction as a team. Diverging ideas led to a lack of consensus, creating the feeling of standing before an insurmountable wall.

The turning point: The design workshop on May 13, 2024

A pivotal breakthrough occurred during a design workshop we conducted with the support of our coach and an invited lecturer. On this day, we achieved a shared understanding as a team and developed a central concept: cluster view. This marked a turning point, as for the first time, all team members had a collective vision and a clear starting point.

Getting a clear and collective vision

Building the foundation: Structure and early prototypes

We began by organizing the collected data—such as events, performers, and relevant keywords—into a comprehensive Excel sheet with input from our client. This served as the foundation upon which we built the backend structure and quickly developed an initial graphical interface to begin working with. The focus then shifted to implementing features and testing. Key functionalities we implemented included a PDF downloader, a video player, and more complex elements like a navigable 3D cluster for displaying nodes. The navigation bar and search functionality were continuously refined and updated throughout the process.

Data overview in Excel

The design: A clear structure with retro accents

Our initial plan was to refine the design after completing the core features. We had a design concept in mind early on, but it sparked intense debates within the team. To streamline decision-making, we created a design commission consisting of three team members. While everyone could still share their opinions, the commission had the final say in design decisions. The final design captures the essence of our project, translating it into a cohesive visual language: fine lines symbolizing the connections between nodes, retro-inspired typography evoking a past era of technology, and a color palette brimming with retro aesthetics.

Final touches: Optimization and handover

In the final weeks of development, our focus shifted to optimizing the user experience and fixing remaining bugs. We polished the final details to ensure a seamless experience for users. As the project drew to a close, we realized that wrapping up such an endeavor rarely feels definitive. While there are countless opportunities to continue building on this foundation, it was time to hand the product over to our client and bring the project to its conclusion.

The finished product

criticalgames.ch is a thoughtfully designed web application that presents the proceedings from the festival in an engaging, gamified format. Users can explore a diverse collection of videos, audio recordings, and informative text from many of the festival's performances, including lectures, concerts, and discussions. The platform introduces an innovative navigation system, displaying an interconnected graph of events, speakers, and organizers, which allows users to explore the connections between the festival's various sessions and topics.

This approach offers a unique, interactive way to engage with the festival's content, transforming it from a series of isolated events into a dynamic, interconnected experience. The solution stores all festival content securely on dedicated servers with backups, ensuring long-term preservation and accessibility through a comprehensive web platform. This digital archive includes recorded lectures, workshop materials, panel discussions, and interactive demonstrations that showcase creative approaches to play-based research. The repository serves as a valuable knowledge base where researchers can explore methodologies for integrating games into academic work, students can access expert insights on games as cultural artifacts, and practitioners can discover innovative approaches to critical game analysis and design research.

Functionalities:

• Interactive event graph
  Navigate through a 3D graph that visualizes the relationships between events, speakers, and participants, helping users understand the interconnectivity of the festival's proceedings.
• Dynamic search function
  Easily locate content by event, speaker, or topic using an intuitive and accessible search bar.
• In-depth event exploration
  Delve deeper into each event with detailed pages featuring videos, images, descriptions, and interactive elements that highlight their connections to other performances.
• Event timeline
  Immerse yourself in the festival experience. The event timeline enables users to experience the festival events as they unfolded.
• People overview
  Explore the organizers, performers, and musicians who participated in the festival, all neatly organized in one place for further discovery.

This platform is designed to facilitate a deeper understanding of the "SPIEL! Games as a Critical Practice" festival, promoting exploration, reflection, and research within a gamified and interconnected environment.

Testimonial
«I experienced the collaboration with the team of students and their coach as very dynamic, innovative and mutually beneficial. The almost one-year development period is worthwhile: in close collaboration, new ideas and possibilities also arise for the client - in my case, the project has helped me not only to publish my research data, but also to structure it sustainably. The students already have their own professional experience and the mix of the team brings together different fields of expertise, technology, data management and design, which has led to a well-rounded and refined end product.»
Michel Roth

Key terms

• UI/UX ToolFigma
• Programming LanguagesTypeScript, JavaScript
• Frontend StackNext.js (React-based framework) with React Three Fiber and Three.js for 3D rendering, Tailwind CSS
• Backend StackSanity CMS with Typescript
• DatabaseSanity CMS
• Deployment PlatformDebian Server, Docker, Docker-Compose

Client

Michel Roth
4052 Basel
Hochschule für Musik Basel

Team