Building An Interactive Music Device with ProtoPie

We have become detached from musical experiences.

Only decades ago, music lovers would carefully go through each vinyl before finally settling on an album. Now, individual songs are just a click away and we don’t listen to albums as singular works of art.

Tiles address this alienation—an interactive multi-screen device that connects directly to your music streaming app complete with a touch screen and beautifully integrated visuals.

The Tile team needed the best prototyping tool out there to turn their idea into reality—a rapid hi-fi prototyping tool that could strike the perfect balance between seamless tech and gorgeous design. They turned to ProtoPie.

In this mind-blowingly original ProtoPie case study, we caught up with Kay van den Aker—Dutch technologist and postgraduate student at Umeå Institute of Design—to find out more about their project, and how ProtoPie fulfilled their high-fidelity prototyping needs.

The importance of hi-fi prototyping

Prototyping is an essential part of my product design process. It allows you to be confronted by the potential of your ideas—to explore, validate and iterate concepts.

I love fusing the physical and digital worlds—gluing together hardware and software and seeing what works. To do this, I need a rapid prototyping tool that enables me to demo hi-fi interactions.

For most of my career, I used a combination of Arduino and Processing. Only, there was a problem. Processing is outdated, especially when it comes to animation. I occasionally used Figma, but was always disappointed by the lack of controls for smart animations.

I was introduced to ProtoPie while working at BMW Group and I’ve not looked back since—it has helped me turn my ideas into reality, allowing me to explore the infinite horizons of interaction design.

The Problem: Why Kay turned to ProtoPie

When it came to the Tiles Project, I needed high-fidelity prototyping software that could seamlessly link with hardware like Arduino.

I didn’t need the freedom of fully coding, but I needed something with a bit more pazazz than Figma. And I needed speed. The best prototyping tools allow for rapid prototyping and give you detailed control of animations and interactions. This gives you more freedom to focus on exploring and designing than simply developing.

That’s why I turned to ProtoPie. Not only is it the best prototyping tool for collaborative projects, but you can link it to hardware like Arduino in a code-free environment with high-precision animation controls and built-in triggers.

Learn more about connecting hardware and software with ProtoPie.

Essentially, ProtoPie gives designers the freedom to make advanced structures with variables, triggers, and responses—all in a code-free environment. In other words, ProtoPie strikes the perfect balance between design and tech. Moreover, it’s a scalable tool ideal for collaborative projects and works on almost all devices.

And ProtoPie saves time. It’s an intuitive, easy-to-use rapid prototyping tool that fulfills 99% of your prototyping needs.

But don’t be deceived by its easy, user-friendly layout. ProtoPie is a breathtakingly powerful rapid prototyping tool. You’ll know what I mean if you’ve ever read through their documentation on triggers, responses, formulas, and variables—it’s an endless horizon of creative potential.

The Solution: How ProtoPie helped Kay accomplish his objectives

Listening to music today can be an anti-climactic experience. The next song—any song in the world—is just a click away. Tiles was an attempt to address that.

In a collaborative student project, we built a multi-screen device that allows users to select albums, scroll through album artwork, control volume, and so much more.

ProtoPie worked seamlessly with Arduino and we were able to build a usable prototype in 2 days. Arduino allowed me to attach multiple sensors to the user interface I built in ProtoPie, which enabled me to quickly change interfaces while trying it out with the actual hardware.

ProtoPie is so intuitive, fast, and easy to use. It saved me time, allowing me to focus on shaping the behavior of the product itself.

It was only a mockup, but look at the fidelity of the interactions—it’s fast and responsive and allowed us to demo other functionalities with speed and precision. Better still, as a showcasing gesture, ProtoPie couldn’t have been more powerful: it’s not every day you can play interaction sounds as a trigger response on a prototype.

This design project was a collaboration with:

• Emile Chuffart: https://emilechuffart.com
• Oscar Olsson: https://www.koolsson.com
• Tobias Ertel: https://tobias-ertel.de

Explore boundless creative horizons with ProtoPie

More than 15,000 companies trust ProtoPie to fulfill their prototyping needs. Schedule a demo to discover ways ProtoPie can help your teams succeed.