What is a Diorama?
A Diorama is how you showcase your applications in Magic Leap World. It is a dynamic preview of your app, and is the first impression users will have of your application. By providing an engaging 3D glimpse into your app, you are increasing the discoverability of your application.
Why a Builder?
By creating a Diorama Builder, we enable the developers to easily prototype, iterate, and preview the Dioramas for their app on the web.
Duration
3 Months
Platforms
Web, Mixed Reality
Responsibility
Product Management, UX/UI Design, User Research
Prompt
How do you manipulate VR/AR elements in a 2D environment (Web)?
The main problem we were solving in this project is how to realistically represent what users see on Magic Leap World (App Store) in the web browser. As a developer tool, it has to be very intuitive and easily learned. Before we started the design process, we interviewed 12 of our ideal target users (3D artists and 3D engineers) for some insights.
User Insights
“Using the same shortcuts as other 3D tools would help me learn this new tool quicker.”
Most of the 3D artists are used to certain universal shortcuts (such as ‘w’ being ‘move’, ‘e’ being rotate). We made sure that was reflected in our design.
“Get the focus state right.”
Most of the 3D artists and engineers we talked to mentioned the importance of intuitive focus state especially when there are several layers.
“Live preview on device would help a lot.”
Users are very keen on being able to see what they made instantly both on web and on Magic Leap device so they can rapidly iterate based on others feedback.
“Make it easy first before adding features.”
When balancing functionalities and simplicity in V1, most users longed for something unapologetically simple and straightforward. Fancy features can come in V2.
Iterative Design - Sketches and Wireframes
Sketches and Wireframes
We went through more than 5 rounds of iterations before we shipped the final product. From the user flow, to the 3D manipulation interaction, to the visual indications of error states, we iterated and tested with more target users.
Lofi Sketches
User Flow Sketches
Lofi Wireframes
Lofi Wireframes
Hifi Wireframes
Final Solution
1
Description
2
Upload area
3
3D manipulation area
4
Preview toggle
5
Tool bar
6
Theme toggle
Diorama Builder
The final product combines the ease of using a 2D manipulation tool with the sophistication of a 3D viewer. Users are able to quickly iterate the 3D files and instantly review on their browser. The builder also provide visual cues on where the bounding box is, and highlights on the selected assets (model, texture, midground, background).
See Live Version
(Requires Magic Leap dev account)
Feature Highlight Video
This video provides an end-to-end experience of the Diorama Builder and captures of how it looks on Magic Leap One device.
Impact
Ever since the Diorama Builder was introduced to the Magic Leap developers community, it was very well received by the developers and designers. (*Data from 2019 survey)
120+
Dioramas Made in 2019.
3 Hours
Average Dev Time Saved.
91%
of publishers prefer using this tool.
Moving Forward
Diorama Builder was just in its very initial phase of the product journey. Throughout the process, we began to notice that the possibilities are endless:
- Automatic Diorama publishing to the App Store
- Background and midground templates
- Tutorial video
- Multi-user collaboration
- Seamlessly edit across Magic Leap One and web
The Team
This success would not be possible without this awesome team:
Matt W. (Director), Charlie H. (Lead Engineer), Maya M. (3D Artist), Morgan V. (Creative 3D Engineer), Hunter S. (Frontend Engineer), Eric M. (Visual Designer), Eric Y. (Lead Design, User Researcher).
