A redesign project of the end product’s UI and a full redesign for mobile and navigational systems.
Napster | Lead Product Designer
ovERVIEW
MY ROLE
Lead Product Designer
TOOLS
Figma, Meta Quest, Midjourney
Napster’s flagship product, Space Editor, empowers creators to design immersive, branded 3D environments—entirely without the need for code.
"3D Spaces" is the internal term used to describe these custom-branded virtual environments experienced by end users.
These spaces can be tailored to include a wide range of features, including interactive games, social engagement tools, watch parties, and e-commerce functionality.
Once published, these experiences are globally accessible—users can enter any 3D Space simply by visiting its unique URL in their web browser of choice.
problems to solve
3D Spaces was originally an inherited product. While the base functionality of this product was really promising, I quickly identified some keep changes needed to elevate the product.
1
Create a mobile portrait version of the product.
To improve usability and reduce cramped text, we shifted the viewport from landscape to portrait. This ensured a comfortable, familiar experience for users accustomed to the industry-standard portrait orientation.
2
Implement more modern usability practices
To expand the viewport and create a stronger sense of immersion in the 3D space, we streamlined the cluttered navigation into a collapsible menu. Buttons were prioritized based on expected frequency of use—commonly used actions always remained visible on screen, while less frequent options were tucked into the collapsible section.
We also removed modals. During user testing, participants repeatedly described them as jarring, especially when movement continued in the background. To address this, we chose to either keep users fully immersed within the viewport or move them to a dedicated page to complete tasks, eliminating disruptive overlays.
3
Update UI with a modern glassmorphism aesthetic.
The original UI felt flat and outdated within the 3D environment. We needed an interface that felt integrated with the space yet remained neutral enough to suit any setting, especially since users couldn’t customize their 3D Space UI. To achieve this, we chose a glassmorphism aesthetic.
Glassmorphism allows light and color from the background to pass through, helping the UI blend naturally without feeling out of place. Its adaptive quality makes the interface appear connected to the evolving 3D environment while maintaining its own distinct layer.
Final Prototype
Click the video to see a demo of the final prototype.
