Client: Jutel

Jutel: Designing the user experience of a browser-based multi-track audio editor

Keywords: UI Design, UX Design, Figma, Design Systems, Wireframing, Prototyping

Jutel, a software development company that specializes in automation solutions for radio broadcasting needed help with a browser-based multi-track audio editor’s UX & UI design, and chose Varaani to be their partner in this challenge.

Clipper main view

Challenge and goals

Jutel is a software development company from Oulu who offers media and radio automation solutions. They have produced their own RadioMan® service since the year 1992, which is widely used internationally in several different types of media companies and public broadcasters. Jutel had a proof of concept level mobile application for a multi-track editor that’s aimed for journalistic content, and their aim was to expand it into a wider, browser-based software that could also be used on a computer.

Jutel’s aim is to productize the application further and integrate it into their existing RadioMan® cloud-based ecosystem. This far the product family has been missing an integrated browser-based audio editor. The idea behind the project was to answer that need, and to produce a consistent service for both mobile and desktop users.

The main goal and driver behind the RadioMan® Clipper was to deliver on the promise of a “single audio toolset platform for all journalists” for audio production and management. Clipper has been created to provide a unified platform for audio production so that journalists don’t need separate tools for recording, mobile audio editing, metadata generation, audio transfer, remote media asset management, and multitrack audio editing. A single platform helps the broadcaster in production environment management, user management, updates, and data security.

One of the big challenges in the project was to create a consistent user experience independent of the platform: the internal logic of the software should be recognizable when using the application on both mobile and computers. A unique starting point for the design work was created by the fact that a mouse and keyboard interface was built based on the existing mobile user interface. This allowed the designer to expand things more freely, in comparison to adapting a computer-designed user experience by condensing it for mobile devices

As a consultant the biggest challenge with the project was grasping the subject matter: you’re creating a specialized tool for professionals. It was vital to have an open connection and co-operation with the client’s representatives, which helped to understand the concepts and terms behind the specialty field. Our experts ability to grasp and take hold of new and vast domains also helped.

Clipper selection

Varaani’s expert quickly internalized a new subject matter and the project reached its goal in the agreed schedule with excellent results.

Jyrki Niemelä

Lead Audio Software Engineer, Jutel

Clipper explained

What we did

The project team consisted of Varaani’s expert who worked as a UI & UX Designer and Jutel’s Software Developer, in addition to Jutel’s product team that had people in decision-making and audio work professionals roles. Everyone of the client’s team had extensive experience working with audio, and they helped our expert grasp the subject matter efficiently. The small and agile team behind the UI & UX Design could quickly pivot their focus to answer changing priorities during the project.

At the start of the project the whole team set the goals and the scale for the project, and the order for the design tasks was defined for the different parts of the project. First a rough wireframe model would be created for each individual view of the product to test and refine the structure, operating logic and usability of the views.The wireframe views were reviewed as a team, and changes were made according to the comments of the product team. Next the design was refined on a visual level, and a component library was created along with a light Design System to guide the use of various user interface elements.

Clipper's Clips view

In the final phase of the design project a comprehensive interactive UX prototype was built in Figma, so that the usability would be easy to test and validate realistically. Additionally the prototype is helpful to the developer building the application because different interactions and transitions are presented in a realistic way, and the developer can also directly copy color values and other design tokens from it.

The project’s cadence formed into a rotation in which the Software Developer and Varaani’s Designer first laid out a plan for the design tasks, which was then completed and validated between them. Next the designs created in the sprint were presented to the product team who provided invaluable feedback on the solutions and gave their thoughts about the next steps in the Design Project. After this the rotation started again, and the Developer and Varaani’s Designer defined the next sprint and so on. This continued until the goals of the project were achieved.

Clipper inputs

Results

The result of the project was a comprehensive UI & UX Design complete with layouts for several views and a light Design System that included a wide component library and definitions for the structure of the views and the use of elements. In addition to that a comprehensive interactive UX Prototype was created. This prototype the client will utilize in the development phase of the project. All of the goals set at the start of the project were achieved, and the client was very happy with the results.

Developing the software based on a complete UI & UX Design will help the developer team work better and faster by collecting all relevant information for the usability in one place, and it creates a good foundation for continued development and testing. The UX prototypes are a great way to test and present the usability of the software for both internal and external communication, and function as a framework for the building of the application. Jutel’s RadioMan® Clipper project won the Best of Show award in the Radio World category at the IBC2023 fair.

As the result of the project we received an excellent UI & UX Design and an interactive prototype. These have proved useful in the implementation of the software and as a supporting tool in product development. I warmly recommend Varaani’s designers for projects like this!

Olli-Pekka Lukkarinen

CEO, Jutel

About Jutel

Jutel is a Finnish software development company from Oulu whose main focus is media and radio automation software solutions. Jutel has evolved with their field, and now they are a competitive specialized producer of software solutions. Their development processes are user-centered, and their specialty knowledge in all things audio and radio is without match in the market.