Mapping Matter 2.0
Redesigning a Projection Mapping tool
6 min read time
What is Disguise
Disguise is an Emmy Award-winning technology company leading real-time visual experiences.
Their software, hardware, and services enable creatives to design and deliver stunning content across industries. Partnering with brands like Disney, Snap, Netflix, and U2, Disguise has powered some of the world's most iconic productions, including live music events, TV broadcasts, and immersive experiences.
Learn more at disguise.one.
Summary
Mapping Matter 2.0 is an innovative platform that transforms projection mapping capabilities by integrating advanced design principles and user-centred research. Unlike existing tools, this platform focuses on precise stage planning, providing creative professionals with a powerful environment that bridges technological complexity and artistic vision.
The redesign addresses critical workflow challenges by introducing a modular, intuitive interface that streamlines projection mapping preparation while laying the groundwork for future visual experience tools.
My Role
As the Product Experience Lead, I spearheaded a comprehensive redesign that transcended surface-level improvements. This holistic approach ensured that the redesign addressed immediate user needs and created a foundation for future tool development. My responsibilities included:
• Conducting in-depth user research to understand complex workflow challenges.
• Designing a modular, industry-aligned menu structure inspired by leading 3D tools.
• Collaborating closely with a UI designer to implement Disguise OS branding, ensuring a uniform visual language across our product ecosystem.
• Developing user journeys, interactive tutorials, and setup wizards to reduce the learning curve.
• Collaborating across teams to align technical execution with the user experience vision.
Projection-Mapping
Projection mapping is a technology that transforms ordinary surfaces into dynamic visual displays by projecting images, videos, or animations. It combines precise alignment with creative storytelling, making it a powerful tool for live events, concerts, and immersive experiences.
Some Iconic Projects Powered by Disguise
-
Eurovision Song Contest: Multiple editions of Eurovision have used Disguise servers for stage visuals and projection mapping, delivering cutting-edge visuals for one of the world’s largest live events.
-
Coachella Festival: Various installations and performances utilised projection mapping with Disguise systems, merging music with art and technology to create unforgettable experiences.
-
The Chemical Brothers Live Shows: Surreal visuals synchronised with their music, creating psychedelic and immersive concert environments.
-
Frozen Forever at Disneyland Tokyo: A nighttime spectacular that turned the castle into a living canvas, recreating iconic scenes from Disney’s Frozen movies.
-
Al Wasl Dome at Expo 2020 Dubai: The world's largest immersive 360-degree projection surface, powered by multiple disguise servers for real-time content delivery, creating a visual spectacle for the Expo's opening ceremony.
-
Weekends with Adele: Disguise technology turned Caesars Palace into an intimate and visually striking experience, with seamless transitions between visual themes.
The Problem
Navigating Technological Complexity
Projection mapping represents a complex intersection of technology and creativity, where tools must seamlessly blend technical precision with intuitive design. Existing tools like Mapping Matter, while powerful, were hindered by significant usability limitations that disrupted creative workflows:
Key Challenges
-
Fragmented workflows: Local file storage complicated collaboration, while manual processes for object alignment and texture manipulation consumed valuable creative time.
-
Complex interfaces: The legacy UI design lacked intuitive navigation, demanding extensive technical expertise from users.
-
Inefficient project planning: Missing features, such as a comprehensive projector library and robust visualisation tools, limited the ability to plan projects effectively and present ideas to clients.
Impact on Users + Business
-
For users:
-
Inefficient Workflows: Manual adjustments for tasks like alignment and texture orientation consumed significant time.
-
Limited Collaboration: Teams struggled to share progress and assets seamlessly, slowing down projects.
-
Visualisation Barriers: Lack of integrated tools for animations and real-time previews hindered client presentations.
-
-
For the business:
-
Costly Maintenance: Maintaining outdated technology increased resource requirements and slowed updates.
-
Competitive Pressure: Fragmented offerings risked losing market share to competitors like MadMapper and TouchDesigner.
-
Research Methodology
A Deep Dive into User Experience
User Stories: Challenges and Impact
One of the users shared how they often struggled to locate essential functions due to the disorganised menu layout.
"I know what I need to do, but I have to dig through multiple panels to find it, which slows me down." one user explained. Another experienced user highlighted the frustration of needing to switch between tools for projector setup, saying, "I just want everything in one place, logically arranged, so I can focus on my project." These insights reinforced the need for a well-organised interface and consistent organisation. To guide the redesign, I conducted comprehensive research that included:
End-to-End User Shadowing: ‘The Rhino in the Room’
To gain deeper insights, I created a realistic project brief simulating a stage installation about the extinction of the white rhino. This exercise allowed me to shadow users navigating workflows, uncovering critical pain points such as difficulty locating features, outdated projector libraries, and export limitations. These insights directly informed the redesign, driving the creation of a more intuitive menu structure and enhancements to projector and export features.
-
Navigation: Even experienced users frequently clicked around to find essential features, highlighting the need for a clearer and more structured menu layout.
-
Video Features: Users desired improved video and timeline tools for creating impactful client renders.
-
Projector Library Gaps: The existing library was outdated and lacked necessary details.
-
Export Limitations: The exported data often required post-processing in external tools to become client-ready.
Industry Analysis
I analysed menu structures and usability principles across leading 3D tools such as Unity, Unreal Engine, Blender, and Maya. This revealed key design patterns:
-
Right-Hand Properties Panel: Used for managing object properties such as position, rotation, and scale, ensuring efficient access without interrupting workflows.
-
Top Toolbar: Providing quick access to core functions like saving, undo/redo, and exporting.
-
Contextual Menus: Delivering task-specific options without cluttering the workspace.
-
Left-Side Asset Management: Enabling users to efficiently manage resources such as 3D models, textures, and materials.
Design Strategy
Bridging Familiarity and Innovation
Core Design Principles
-
Familiarity: Adopting intuitive conventions from industry-standard tools.
-
Modularity: Structuring the interface to adapt easily to future feature additions.
-
Consistency: Aligning with Disguise OS to create a cohesive ecosystem.
Key Innovations
I introduced a redesigned interface with a logical, panel-based layout:
-
Top Navigation Bar: Quick access to project settings, editing tools, and viewport controls, streamlining the workflow by reducing the number of clicks required to access frequently used functions.
-
Left-Side Content Browser: Efficiently organises assets, scenes, and project elements, simplifying resource management and improving navigation within large projects. Users can now quickly locate and modify specific elements, reducing setup times and minimising errors.
-
Right-Hand Properties Panel: Dedicated to detailed object and scene settings, this panel streamlines workflows by allowing users to quickly adjust properties without navigating away from the main viewport, significantly improving efficiency in iterative design tasks.
-
Bottom Timeline Menu: Manages animations and keyframes with playback controls, enabling precise sequencing by allowing users to visualise and refine the timing of animations directly within the viewport.
-
Canvas (3D Viewport): Acts as the central workspace where users interact with the scene. Enhanced by a contextual gizmo, it allows precise object manipulation, facilitating a more intuitive and efficient design process.
The Solution
Key Features of Mapping Matter 2.0
Key Features
-
Unified Interface:
-
Modular and Scalable Design: The interface was restructured into a modular layout, allowing for intuitive navigation and logical placement of features. This design ensures future updates and new features can be seamlessly integrated without disrupting the user experience.
-
Panel-Based Organisation: Essential tools and properties are now grouped into panels, reducing clutter and enabling users to access relevant options without excessive clicks. This approach mirrors industry best practices from tools like Blender and Maya, creating a familiar environment for experienced users.
-
-
Enhanced Collaboration:
-
Real-Time File Sharing: By leveraging Disguise’s Drive, Mapping Matter 2.0 enables teams to work on shared projects simultaneously, eliminating the inefficiencies of local file storage.
-
Contextual Sharing Options: File sharing is enhanced with version control and asset management tools, ensuring smoother collaboration across teams.
-
-
Previz Integration:
-
Timeline Tools for Animation Sequencing: Previz’s powerful timeline capabilities are integrated into Mapping Matter 2.0, allowing users to sequence animations, transitions, and dynamic events with precision.
-
Real-Time Dynamic Previews: Users can now visualise their projects in real-time, making adjustments to animations, lighting, or textures and seeing immediate results.
-
-
-
Advanced Snapping and Alignment: New snapping options and alignment guides streamline project setup, reducing the time spent on manual adjustments.
-
Updated Projector Libraries: The projector library now includes thumbnails and detailed specifications, enabling users to compare and select the right equipment effortlessly.
-
Enhanced Photometric Tools: Improved simulation accuracy for brightness, texture, and material mapping ensures that designs align with real-world results
-
-
Interactive Onboarding
-
Tailored Tutorials: Step-by-step tutorials guide both new and legacy users through the tool, ensuring a smooth transition to the updated platform.
-
Guided Setup Wizards: Designed to simplify initial project setup, these wizards help users navigate complex features and workflows with ease.
-
Strategic Impact
Redefining User Engagement
Benefits for Users
-
Streamlined Workflows: Reduced project setup time and increased efficiency.
-
Improved Collaboration: Real-time file sharing fosters seamless teamwork.
-
Enhanced Client Deliverables: Advanced visualisation tools enable high-quality presentations.
Advantages for Disguise
-
Scalable Platform: The modular design supports future feature integrations and monetisation opportunities.
-
Competitive Edge: Positions Disguise as a leader in projection mapping technology.
-
Unified Ecosystem: Strengthens brand loyalty through consistent user experiences across tools.
Reflection
Mapping Matter 2.0 represents more than a software update; it’s a strategic reimagining of how creative professionals interact with projection mapping technology by introducing features like a modular menu structure and advanced snapping tools that enhance workflow efficiency and creative precision. By deeply understanding user needs and leveraging industry best practices, I helped create a platform that not only resolves existing challenges but also inspires new ways to engage with visual storytelling. Looking forward, this project lays the groundwork for a potential future platform capable of delivering an end-to-end visual experience workflow. By establishing a modular and scalable interface, it paves the way for integrating advanced features.
.webp)