Bridging the gap

Creating narrative serious games takes an immense deal of research, teamwork and communication between all involved parties. This tool makes it easier.

The Content Previewer was created to bridge the gap between game designers, developers and clients during the creation of &ranj's narrative serious games. By giving clients the ability to review and edit game content independently, it facilitates much faster iteration, better sharing of knowledge and - ultimately - better games.

  • Client

    &ranj Serious Games
    Technical University Delft

  • Results

    Concept and interaction design
    Working prototype
    Physical puzzle version

  • Details

    TU Delft Master Graduation project

Introducing: our users

Designer (&ranj)

  • Games and game design
  • Technology and platform
  • Insight into client's business
  • Client's goals and feedback

Expert (Client)

  • Context, daily practice and subject
  • Target audience
  • Insight into the game's design and experience
  • Ability to contribute meaningfully and directly

Only when these people's expertise and insight combine do we end up with an effective and accurate narrative serious game.
However, this is currently a long and intensive process. A game's content goes through many intermediate steps, reviews, revisions and formats: Flowcharts, scripts, story outlines, tables, etc.

It turns out that it is very hard to get a good read on game content without playing it. That's when you really see how the conversation flows, how a character comes across or how meaningful a choice is. Client input would be much improved if they had this context when reviewing content.

It's all about context

An expert needs to truly understand the game content they are editing to be able to contribute meaningfully.

  • "Where will this choice lead?"
  • "Whose line is this?"
  • "What happens if the player doesn't succeed?"
  • "How should I interpret this sentence? What tone or emotion is it spoken with?"

Content Previewer aims at providing this context in an easy to digest way with minimal training.

The concept

Content Previewer consists of two interrelated parts that were designed and developed in parallel. They were designed for our Subject Matter Experts as primary users. Together they give SMEs the insight and ability to edit in-game conversations, stories, consequences and outcomes while playing the game.

Visual story-building language

The visual language is a schematic way of representing in-game content in a way that a non-developer will be able to intuitively understand. It follows common visual programming paradigms, but is based on terms, units and concepts that anyone will be familiar with: Sentences, choices, locations, people, consequences, goals, etc.

Using this visual language, Content Previewer is able to map out the available game content and create an easy to read overview. This overview helps Subject Matter Experts both edit and understand what is happening in the game and how they can affect that.

Content Previewer web application

The application itself features a large "context window" (right) next to the game window and editing tools (left). While the user plays the game, the visual representation on the right is updated, showing them exactly where they are in the game and what the consequences of their choices are. Vice versa, if the user edits the content on the right the game preview on the left is automatically updated to match the new design.

Revision and collaboration tools allow a team of one or more game designers and subject matter experts to collaborate on the same game content, in full understanding.

Testing and detailing

Visual language

The visual language was iterated several times based on user testing with both game designers, SMEs and other stakeholders in the process. The available set of nodes is shown to the right and can be used to recreate any narrative game &ranj has created to date (and more). It represents the best compromise between functionality, editability, readability and closeness to how an SME thinks a game works.

Application prototype

A working prototype of the editor application (left), including a full game scenario and editable diagrams representing it were produced to validate the app as a whole. Though it was created in mockup from using tools like Axure and Adobe Illustrator (rather than an actual web application), it allowed me to test whether users could work with the concept as a whole. Around a dozen tests were performed where non-experts were asked to perform certain edits to the game story.

Based on their feedback and my observations, the design of the app was tweaked and a story minimap were added, to aid in gaining a quick overview of the player's position in the scenario.

Physical version

In addition to the final version of the story language, an earlier version proved to be excellent for collaborative bigger picture storyline creation. A simplified, printable physical version was created to be used during brainstorming sessions in early phases of a project.

Rather than focusing on the details of dialogue and scenarios, it deals with larger plot beats, decision points and arcs. The printable tiles essentially act as puzzle pieces that can be chained together in certain ways.

Using this tool helps keep ideas and scope under control during early phases of the project. If the story becomes hard to build using the puzzle pieces, it will probably be equally as hard to build in the digital realm.