top of page

capture the story

capture the user

“Over my 15+ year career, I have tried every writing tool under the sun. Gem is the first narrative tool that prioritizes creativity & collaboration.

 

It’s simple to set up and easy to use, yet underneath is an extremely deep and feature-rich platform with which you can create the most powerful branching narrative experiences imaginable.”

DENNIS LENART
CTO, ADHOC STUDIOS

a product design case study

ABOUT THE PROJECT

GEM
narrative design management system

 
Turning deeply technical and complex processes of writing, planning, visualising, and implementing non-linear narratives for video games & interactive experiences into a simple streamlined workflow, Gem is quickly redefining Narrative Asset Management.  

With the goal of leveraging the labour of writers to enhance efficiency in narrative design, Gem combines an original screenplay-style script editor with a node-based visualiser called the Storymap.

Celtx Gem - Computer-3 (1).webp

A scalable narrative design platform, Gem allows writers and developers to visualise complex story structures, write scripts, & generate custom data 

GEM, a narrative design management system

 
Streamlining the process of creating, organising, and implementing non-linear narratives for video games & interactive experiences.

This case study explores how the Gem visualiser and data workflows were designed over the last few years. With the goal of leveraging creativity and writing to enhance efficiency in narrative design, Gem combines a original script formatting editor with a node-based visualiser called a 'Story map'.
 

Target Audience - Game Writers & Developers

My Role - UI / UX / Product Design

The Team- Product Owner & Business lead, UX / UI / Product design, Developers & ops 

the discovery & the challenge

combine a script editor with a story visualiser 

 

The exploration that led to Gem began in the 2010's. In the off-hours after dinner, during a Celtx Product Summit, while discussing the recent VR boom the Product team started wondering how one would "script" an immersive environment.

It became clear we had a lot of excitement and ideas to adapt our existing screenplay editor for non-linear projects like games. At first we started exploring new script formats for game mechanics & states.

 

With further research into game scripts and competitor products, we soon saw the potential - and the demand - for much more

complexity builds complexity

Despite their many successes game studios and creators encounter challenges:

Managing the scale of their narratives and the assets that support them is difficult
 

Difficulties with change tracking & versioning

 

Multi-product workflows are fragmented and operate without a centralised repository for assets and data such as scripts, story structures and dialogue reports, mechanics and logic code, state tracking and more

Difficulties locating, accessing and updating information that is always changing in data rich environments 

the game writing workflow

the design process

challenge

the idea

the research

the competitive analysis 

ideate

the technical scope

the task flow

the hierarchy

construct

 

the development

the reviews & testing

the measures of success

define

the problem

the persona

the goal 

blueprint

the wireframes

the front end

states & interactions

reflect

learn & innovate

a definition & a headstart

combine an editor with a visualiser 

 

We started the first Gem design using the same design language I designed for Celtx. As a result, Gem blends Celtx’s script writing workflows with features and formatting specific to game development professionals.

 

Building on the editor success of Celtx, Gem provides a comfortable, flexible, and collaborative environment where teams can write, plan and design immersive experiences together. 

The goal was to create a screenplay-style script editor with a narrative visualiser, letting users create visual structures that reflect extensive and complex narratives. 

Screenshot 2024-04-14 at 5.23.10 PM.png

A repository for narrative assets living alongside script and story  making it easy to access and update crucial information in a fluid state 

ideate & design

simplified nonlinear narratives  

 

A node-based visualiser was the most obvious and intuitive to everyone. From here we designed a simple visual language for the map, with a wide but shallow pool of structural containers, called the Storymap.


The Story Map makes it easy to plan complex or dynamic structures for games using containers (Nodes, portals, branches etc) and populate those containers with scripts and other complex data.

simple construction

GEM puts the user at the forefront

 

The Interface emphasises key features and functionalities important to writers and developers. Workflows and tools needed by narrative designers, like Script Editors and Node and Custom ID generators, are accessed from the highest touch points in the interface.

 

Designing consistency of visual, interactive, and behavioural patterns into the interface creates a cohesive predictable system and comfortable product experience. When the principles of simplification and user autonomy drive interactions and interface design it makes it easy for users to discover and learn new software, even to perform complex tasks with new tools. 

The Gem Design system has a deep understanding of the tasks, goals, and workflows of narrative designers and offers them an intuitive interface driven by objects they create with a project hierarchy & navigation useable for experts and beginners. 

revising & iterating

product design is more about exploring & discovering than getting things right

When we first launched Gem it was with a split screen view for map and editor. We had developmental concerns about overlapping states, as well as a strong desire to make sure users could see the map and the script at once. It was also more straightforward to solve split screen issues in design with a toggle for switching views. But even in our own testing this felt restrictive and confined, and not long after our first release we had collected enough user feedback to justify a major change. 

 

"Skyjack" was a design to open the editor directly from the Nodes in the map, creating a greater sense of freedom, giving users more control over what they were seeing and what they could access, improving their script writing and data editing experience. The floating editor also seemed to bring people a lot of joy.  

designed by Lauren Jane

bottom of page