Introduction

Creating real-time, audio-visual web experiences using technologies such as WebGL, Web Audio, and WebXR can be complex and demand a deep understanding of the APIs. This hurdle often alienates creatives who lack programming experience. To address this challenge, the team at undev, which I was a part of as a UI/UX designer and front-end developer, developed a tool named cables. This case study explores the design, development, and successful launch of cables, demonstrating problem-solving skills, UI/UX design, front-end development, and community building abilities.

Problem Statement and Objectives

The primary goal was to simplify the creation process of audio-visual web experiences for individuals who lack coding skills, thereby making these experiences accessible to a wider creative community. The tool needed to be visual, offer quick feedback loops, and have an intuitive learning system. As a secondary target audience, cables also aimed to facilitate expert coders by providing a rapid prototyping environment.

The Solution

Cables is a visual programming editor designed to allow users to create complex, real-time, audio-visual web experiences. The core units of the system are known as ops, which encapsulate various JavaScript functions. These ops have input and output ports, enabling users to establish a data flow between different ops, creating a graphical representation of their code.

An important feature was the educational system integrated into cables. It incorporated various strategies to facilitate learning:

• Documentation: Each op was documented, and this information was accessible in the cables editor.

• Public Projects: Similar to open-source coding, users could share their projects, providing a form of user-generated documentation.

• Community Platform: The community feature allowed users to follow other users, get notified of new projects, and comment on or like public projects. This provided a vibrant learning community and further facilitated user engagement.

To appeal to the needs of expert coders, we added an API to create custom ops and improved the debugging experience by introducing various tools for visual debugging. A dedicated forum was established to allow users to ask questions and receive help, further enhancing the learning experience.

UI/UX Design and Front-End Development

One of the primary challenges during the UI/UX design phase was ensuring an intuitive learning system for users. The solution was a multi-pronged approach involving comprehensive documentation, user-generated public projects, an interactive community platform, and an integrated forum for user support.

A unique aspect of cables was the incorporation of user experience tweaks for advanced users, including an op browser for filtering ops by category and a cmd + k menu that allowed power users to complete many tasks using keyboard shortcuts.

The front-end development was done using HTML, CSS, JavaScript, and various JavaScript libraries, including Vue.js for specific interactive parts of the interface. Particular attention was paid to performance optimization, especially for large projects containing hundreds of ops. Custom ops were created for responsive design to ensure the exported patches were compatible across various devices and platforms.

Launch and Community Building

Upon completion of private beta testing, the public beta was launched and announced on social media and via email. Since the launch of the public beta, cables has been used in projects for clients such as Google, Nike, and Ableton, reflecting its success and broad acceptance. User feedback indicated that cables empowered users to create complex audio-visual projects that they would otherwise not have been able to create.

Learning and Improvement

Creating a tool like cables that caters to both beginners and expert coders posed a significant challenge. The learning curve for beginners was addressed through an extensive educational system, while features like the op browser and cmd + k menu made cables efficient for power users. User feedback helped in refining the product and resolving issues promptly, demonstrating a user-centric design approach.