Magic Leap Create hero

Create Sandbox for Magic Leap

About

Flagship 1st party product for Magic Leap that launched on first editions of hardware worldwide.

Role

Lead Visual UI/UX Designer: Lead the visual design of Create's UI, defined guiding principles, OS interactions, and 3D interfaces.

Awards & Patents

Auggie Award Winner 2019 — Best Game. Patents: D0879811, D892133

Flagship 1st party product for Magic Leap that launched on first editions of hardware worldwide, with a goal of pushing the boundaries of spatial interfaces and developing heuristics, interface components + interaction frameworks for devs/creators.

01

2D GUI Iteration

Initial explorations using 2D UI paradigms. We quickly decided as a team that we wanted to take advantage of the 3D nature of our developing platform and push the limits of our visual and interaction design. The focus of the iterations to follow 2D:

2D GUI explorations
2D GUI iterations

02

3D GUI Iteration

We wanted to present objects in an interesting way, provoking curiosity through an invitation for users not only to grab objects but to appreciate their details before setting them loose in their space. Through user testing and system constraints, particularly a clipping plane being enforced, we decided as a team to move away from this direction.

Create browser in room
Create menu V10 edit
Paint UI animation

03

Create 1.0

This was the final GUI for the first release of Create. Thorough user testing informed the scale, body-centric placement, final form, iconography, and interaction. Ultimately the team landed on the idea of shelves contained inside a frame, where form followed function. We validated this concept through playtesting to ensure the design met the user's mental model for how the interaction should work. This metaphor let us pose all the objects as if they were part of a collectible display shelf which users could simply scroll through to quickly access. It also elevated the perception of the game objects visually by displaying them as trophies.

Create 1.0 GUI interaction

04

Create 2.0

The latest version of the Create GUI took a more minimal approach based on user feedback. I simplified the form and recreated a portal metaphor for the scrolling action. The background used a transparent shader as to not obscure the real world behind the menu.

Create 2.0 wireframe concepts
Context menu interaction
Selection scroll interaction
Create 1.1 composition

05

Inputs, Interactions & Affordances

The controller was the main input for Create because it required the least amount of physical effort from the user and offered a wide range of features that we could leverage to amplify our interactions. In addition to inputs we implemented in-world/in-game affordances to allow for novel interactions with a users surroundings.

UI interaction demo
UI gizmo interaction
Interaction constraints diagram

06

Meshing & First Time Onboarding Experience

The meshing process was crucial to the Create experience. The physics-based nature relied heavily on the user giving the world cameras enough information to understand the space and map it properly.

Meshing process visualization
Controller tooltip system