Krilloud is a graphic node-based audio middleware that facilitates the design and implementation of interactive audio in a creative, simple and efficient way.

The Challenge

To devise a GUI that would be as simple and clean as possible, ready for expansion and evolution. The aim was to create something that could be used by programmers or sound designers without the need to read a manual to implement basic interactivity to audio.

Approach

After in-depth conversations with the software creators, a node-based programming system was chosen as it was the most efficient way of conveying the flow of audio and data inherent in implementing interactive audio. Further conversations were had with the developers to define any existing libraries that would be used to implement the GUI considering their limitations and strengths in order to speed-up the development process.

A first iteration of the UI was designed and implemented. This was then guerrilla tested at the 2020 Global Game Jam, where participants were encouraged to use Krilloud with access to first-hand support if required. The findings from this initial round of testing were used to further polish the interface.

Solutions

Design System

A live design system was created using Brad Frost’s atomic design principles in Adobe XD, it was later migrated to Figma due to technical issues with XD. It was devised to be in constant evolution, reflecting ongoing UX research and ready to implement new functionalities. It acted as a central point of reference for developers and stakeholders. It was hosted online and contained interactive samples and specifications for all the UI components. High-fidelity prototypes could be easily made directly from the design system, enabling quick testing of different approaches and ideas.

User Interface

The UI solution was node-based and devised to be implemented as a standalone desktop app or in-browser. It was influenced by many existing node-based programming environments including MAX MSP, Touch Designer and Pure Data. The solution strived to achieve a clean and minimalist aesthetic in contrast with tools used for game design such as Unity. The ambition was to create a sense of ease and simplicity while using the software, making all functionalities as self-explanatory as possible.

Prototyping

Prototyping was a big part of the project, as it was used for testing and validation of ideas while also used to brief the developers. All prototyping was constructed within Adobe XD.