
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.

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.



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.