The project focused on redesigning the CryEngine Toolbar Editor to enhance the user experience by making workflows more intuitive, ensuring a clear separation of task areas, and modernising the editor’s outdated appearance.

Research & analysis / UX / UI
2020

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 editor allows users to create custom toolbars and assign them to specific windows and editors within the CryEngine interface. Users can choose from a wide range of commands to build toolbars that suit their needs.

In the previous editor, all key activities, such as creation, naming, selection, editing, and deletion of toolbars, took place within a very small space at the bottom of the command database list, making the process highly unintuitive and confusing. It was unclear which action was in progress or what stage it was at (e.g., whether a toolbar was saved or still in the creation process). Guidance elements, as well as confirmation and error messages, were completely absent.

Unlike the command database, saved toolbars were stored in a dropdown, preventing users from having a stable overview of the toolbar list and making selection difficult. This also increased the risk of unwanted selections or accidental dropdown closures.

Adding commands to a toolbar was rigid and lacked discoverability, requiring multiple clicks. Users had to right-click repeatedly to access menus for adding or removing commands, making the process cumbersome.

In the new design, the toolbar editor window is divided into two sections. On the left, users can navigate, search, and select commands to add to toolbars. On the right, they can create and edit multiple toolbars simultaneously using a new, clearly visible plus button. Commands can be easily dragged and dropped from the left database area to the toolbar section on the right.
Each toolbar includes an input field for renaming, and a trash icon on the right allows for quick deletion.

This new setup ensures the toolbar list remains always accessible, making creation and editing more seamless. Additionally, the interface now features more intuitive affordances and guiding elements to enhance usability.

Finally, the new CryEngine design system was applied to the toolbar editor, modernising its appearance and ensuring visual consistency across the platform.