DRS Editor

The Dynamic Response System ​(DRS) is a CryEngine editor that enables users to implement dialogues in a game and link them to specific events. This project aimed to redesign the DRS editor to reduce cognitive friction and improve interface learnability.

Research & analysis / UX / UI / Prototype
2021

Crytek is a Frankfurt-based video game developer and publisher known for creating first-person shooters (FPS) and game development technology.

CryEngine is Crytek’s proprietary game engine, used to develop their own games and licensed to other studios.

The DRS Editor presented an unintuitive interface that was causing several usability issues. The inability to be self-explanatory, due to hidden functionalities and actions, was affecting the learning curve for new users and the dialogue management by experienced users.

The DRS is divided into three main sections:

1. The Dialog Database: where lines of dialogue for game characters are stored.
   
   
2. The Responses: where lines can be associated with specific in-game events.
   
   
3. The Variables: used to create complex event flows.
   

In the previous dialog database, dialogue lines were listed as uneditable items, with no clear affordances indicating they could be edited. Users had to right-click on a line to discover a popup with various editing options. Additionally, each line contained several properties, which users could only edit by right-clicking each individual property. These property affordances were not differentiated, and dropdown menus appeared the same as text inputs, for example.

There was no clear button to suggest the action of creating a new line in the editor, and batch editing (editing multiple lines at once) was not allowed, which caused significant frustration among users.
Grouping lines into folders was not possible, preventing users from organizing the database in a more efficient way.

Both the Responses and Variables sections featured a highly nested and unintuitive layout, lacking primary call-to-action elements and self-explanatory features to guide users through the process.

The solution :

The goal of the redesign was to make all primary actions immediately accessible and enhance flexibility in managing the dialog database. A main toolbar with editing capabilities was added, along with a prominent new ‘Add Line’ button.

Line properties were redesigned to adopt distinct styles based on their function, such as dropdown menus and input fields. Affordances were redesigned to more clearly convey their function and usage, making them more self-explanatory.

Filter selection

Batch editing and folder creation were introduced, along with the ability to filter lines according to various parameters, facilitating more effective organization of the database and search activities.

The new layout for the Responses section was divided into three areas, creating a sequential workflow. Each section can be hidden depending on the user’s stage, allowing them to focus solely on the activities of interest. Additional fields and affordances were added to enhance guidance, along with visual cues, such as the tree structure in the list sections.

Filter deletion

The Variables section adopted a similar approach to the Responses section, featuring a two-area layout and using the same tree structure to visualize complex dialog line interactions across different scenarios.