Appway Studio development environment
2019-23 • My role: UI design, UX design, implementation support and handoff, user testing
Appway, now part of FNZ, offers a platform designed to automate and optimise complex business processes for financial institutions. Its flexible tools allow for scalable, data-driven workflows, enabling customisation and integration across systems. Learn more about Appway Design.
While Workspace is the user-facing part of Appway, Studio is the development environment. It offers tools for designing workflows to automate business processes and creating data models to manage information. It also has features for integrating external systems, collaboration, UI customisation, and much more.
For four years, I was responsible for the UI of this platform, which included creating new editors and continuously improving existing ones.
Over the past few years, the Studio editors have undergone continuous revisions, transitioning to the use of React components. At the same time, both the design system and the individual components within Studio have been updated to improve accessibility and create a more coherent design language.
The projects varied from designing and implementing new features to investigating and addressing usability issues to improve the user experience.
In both cases, it's always very important to implement changes gradually, and to use patterns consistently, to ensure there’s no disruption for our existing users.
One-click deployment
During the development process it becomes necessary to move solutions from one environment to another, for example from a development to a testing environment. The one-click deployment was an initiative to make this process as streamlined for the developers involved as possible. I was responsible for the overall UI design and contributed to various UX decisions during the final stages of the project.
Undo, Redo for Studio Editors
While undo, redo, and revert operations were available in studio editors, their behaviour was not consistent, and they were not fully optimised for the best user experience.
Each action performed in the editor is displayed as an item in the History panel. By clicking on an item, the developer can return the editor to that specific state. For every undo or redo action, a message is displayed, allowing the user to highlight the modified item to see the change.
Users can also navigate to another tab within the editor and still undo an action made in a previous tab. In this case, clicking on the toast notification will guide the user back to the tab where the change was originally made.
The History section is vertically scrollable and is only cleared when the editor is closed.
Translation tool
The translation tool is accessible from the editors in the studio and was introduced to streamline the creation and management of translatable text elements within the solution, as well as to auto-generate English translations.
