How PianoVision designs UI for MR apps

Case Study: PianoVision

ShapesXR streamlined PianoVision's design process by seamlessly integrating in their 2D design workflow, allowing intuitive positioning of the UI around the physical instrument, ultimately enhancing the user experience and supporting their mission to make learning music in MR fun and enjoyable.

Background and Objectives

PianoVision is an innovative Mixed Reality music education platform designed to transform the way people learn piano and other instruments. We’re a lean, dynamic team distributed globally, operating in the music edtech space.

PianoVision was born with a mission to integrate immersive technology with traditional music teaching methods, enhance learning experiences and make learning music the most magical MR experience imaginable.

“Uniquely for PianoVision, we need to spatialize our interface around a physical object–the piano. Our ability to iterate designs relies heavily on our ability to intuitively understand how we’re situated in physical space. ShapesXR’s ability to aid in this greatly improves our design process” - Zac Reid, Founder at PianoVision

Decision Process

We use Figma for a lot of our designs, and the seamless integration to prototype and demo our designs before implementation made ShapesXR a no-brainer. Specifically for our use case, we need to spatialize our interface around a physical object–the piano. Understanding the various designs relies heavily on the ability to position the UI in physical space intuitively. ShapesXR is very feature-rich and mature. It “just worked” for exactly what we were looking to do. Once we started using it, we didn’t feel we needed to keep looking. 

Implementation and Use

ShapesXR allowed us to easily bring our 2D UI directly from Figma to MR. Our designer could take advantage of the Mixed reality mode to position the UI in space and add a digital mockup of the piano in the physical space. The storyboard feature in ShapesXR was especially useful when we had to design the initial setup and calibration. The designer was able to lay down the entire user flow and invite me to the 3D space to review it in real-time. 

No items found.

Results and Feedback

We use it on a bi-weekly basis when iterating on designs. As the founder, it’s my favorite way to get a quick run-through of new prototypes. It’s a significant improvement compared to looking at UI on a flat screen and imagining how it would be positioned above the piano or relative to the user interacting with the physical world around him. 

We see ShapesXR continuing to play a crucial role in our design and prototyping processes as we expand our platform and explore new features. We look forward to future updates with even more advanced features for MR environment design and testing.


I would highly recommend ShapesXR to other teams designing for headsets, especially those working in the Mixed Reality space. Its collaborative features and ease of use make it an invaluable tool for teams looking to innovate and improve their product designs.