capture the story
capture the user
a product design case study
“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
GEM
narrative design management system
Turning deeply technical processes of writing and planning complex non-linear narratives, GEM leverages the labour of writers to enhance efficiency in narrative design, combining an original screenplay-style script editor with a node-based visualiser called the Storymap - creating a central knowledge repository and collaborative workspace for the team.
scalable narrative design platform allows writers and developers to visualise complex story structures, write scripts, & generate custom data
Role & Process
Streamlining the process of creating, organising, and implementing non-linear narratives for video games & interactive experiences.
As the only designer for GEM, I was responsible for its full design from concept to implementation. My contributions included the creation of a cohesive design language and system that met product needs while reflecting the celtx brand and experiences users were familiar with, the UI kit also needed to ensure scalability. My primary focus was user experience, which involved the creation of a project architecture and user flow, wireframes, prototypes, and final design
Target Audience - Game Writers & Developers
My Role - UI / UX / Product Design
The Team- Product Owner & Business lead, UX / UI / Product design, Developers & ops
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
observe
learn & innovate
combine a script editor &story visualiser
The exploration that led to Gem began at dinner during a Celtx Product Summit, while discussing the recent VR boom and the feedback we had been getting from users struggling to build non-linear narratives in our narrative editor, it was hard for a lot of reasons, and the Product team started wondering how one would "script" an immersive environment.
It became clear from the users that there was excitement around the idea, but the existing screenplay editor wasn't designed for the goals and needs of non-linear projects like games. At first, we started exploring new script text 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 robust feature and toolsets.
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
challenges & discoveries
game writing workflow
abstract to tangible
combine an editor with a visualiser
Gem blends Celtx’ integrated script writing and project 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.
definitions & headstarts
Simple Construction
GEMs interface emphasises features and functionalities important to writers and developers.
Workflows and tools needed by narrative designers, like Node spawning, Script Editing, and Custom ID or mechanics editors, are accessed from the highest touch points in the interface.
Because we built off the Celtx environment, it was more efficient to design with the consistency of visual, interactive, and behavioural patterns of that product as much as possible. This benefited both developers and users, creating 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, GEM borrowed all the parts of celtx that worked best.
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.
