← Back to portfolio Full article on Medium →
Academic · VR/XR · UX/UI · 2025

Piano VR App
Menu Redesign

A collaborative menu makeover for a Piano VR app — spatial UX, navigation architecture, immersive flows
Type
Collaborative Redesign
Role
UX/UI & Spatial Designer
Tools
Figma · Shapes XR · Unity
Year
2025
Background

A piano lesson, in virtual reality.

Piano VR is an immersive learning app that brings hands-on piano practice into virtual reality. The product was strong — the lessons worked, the spatial feedback was satisfying — but the menu sitting between the user and the music had grown cluttered over multiple releases.

I worked collaboratively with the team to redesign the menu architecture from the ground up. The goal: cut friction, simplify navigation, and make the experience feel as confident as the lessons inside it.

In VR, every extra tap is a step that breaks the spell.
The Challenge

Spatial UI isn’t flat UI.

Designing for a headset isn’t the same as designing for a phone. Distance matters. Depth matters. Where the user’s hands rest matters. A menu that works perfectly on a screen can feel exhausting in VR if the user has to reach, twist, or refocus their eyes too often.

The original menu had been built screen-by-screen rather than as a spatial system. Items lived at inconsistent depths. Buttons were sized for a 2D screen, not for arm’s-reach interaction. The first thing was to audit every screen and treat the menu as a 3D environment rather than a flat UI ported into VR.

Process

Designing for the headset.

01

Audit & user observation

Watched real users navigate the existing menu. Mapped every place they hesitated, missed a target, or pulled the headset off to recover. The data made the priorities obvious.

02

Information architecture

Rebuilt the menu structure with fewer top-level items. Grouped lesson types, practice modes, and settings into clear spatial zones — each at a comfortable focal distance.

03

Spatial hierarchy

Placed the most-used controls within natural reach. Pushed secondary settings further back. Used scale and depth to signal importance instead of just colour and weight.

04

Collaborative iteration

Worked closely with the developers to test each iteration in-headset. What looked right in Figma sometimes felt wrong in VR — that loop was constant.

05

Final spec & handoff

Delivered a complete spatial UI spec covering button sizes, depth offsets, focal distances, hand-tracking targets, and motion guidelines.

What Changed

A menu that disappears.

The redesign cut menu interactions per session significantly. Users got from intent to playing the piano faster. Critically, the menu started feeling like part of the room rather than an interface bolted on top.

Takeaway

Why VR design matters to me.

This project deepened my conviction that XR design is going to be one of the most important UX disciplines of the next decade — precisely because so few rules are settled. Spatial UX rewards designers who think about presence, ergonomics, and attention rather than just visual hierarchy.

The full write-up — with screenshots, before-and-after comparisons, and the design decisions behind each iteration — lives on Medium.

The best interface in VR is the one you forget is there.
Previous ProjectSpotify All Work Next ProjectVR Accessibility

Want to see more work?

Back to portfolio →