Wix XR

A concept project for a Wix web editor Responsiveness of extended reality technology in a two-dimensional platform.

My role

UX/UI design, 3D Modeling, XR concept research

Challenges

Design software

3D world design that doesn't require special skills.

Existing databases

Preservation of materials and 2D designs from huge public online databases.

Real 3D design guide

Convert 2D information into 3D content and create XR user experience best practices.

Collaborative platform opportunity

Extended Reality

The XR world is a spectrum, ranging from fully real to completely virtual. Each point on the spectrum has specific characteristics, but all have objects.

Depths Model

The introduction of the XR devices has created a gap between system capabilities to system display. In order to transition and design in true 3D, I created a system that break down the 3D space into layers, for simple and convenient web and app construction.
Users design objects that are arranged in 2D, but the site's layers create depth. The responsiveness does not end with the transition to 3D, but controls a system of layers that know how to breathe according to location, user movement and the nature of the content.
Screen
Viewing computer screens where the content is accessible in 2D.
Mobile
Mobile screen with optional integrated 3D objects interaction.
XR
2D display with embossing in addition to hand menu or command desk
XR depth model
3D objects in different depth layers that know how to move and change shape according to content, location and user movement.

Features

New responsive icon

The XR glasses icon leads to an easy to use 2D editing screen. It shows how the wearer will view the design.

XR glasses icon
I used the glasses icon is universally recognized, with the addition of twolines reference the XR cameras or sensors.

3D site map

The bar is designed to illustrate the depths and structure of the site in XR. The user can move around items and complete the missing information from a 2D perspective.

The logo symbolizes a user in front of screens at different depths, a memorable, visual representation of the concept. I employed creativity to steer away from the association of waves/frequencies.

3D object

A 3D object will be imported and placed in the layer panel:

The familiar icon of AR objects, a 3D cube with a transparent circumferential marking.

Depth tabs

In order to move elements between the layers, depth tabs have been added. The user will also be able to determine the distance of the layer and move the elements between them.

The tabs are designed to present an indication of depth layer at all time, in addition to layer selection indicators.

Design research

Personal space and states

Whether the space is virtual or realistic we consume content differently in different spheres. The system needs to be able analyze and understand the area, physical conditions and user movement in order to tailor the best experience structure. Whether watching content at home or running down the street, the user will affect the position of the objects and the layout of the display surfaces.

Viewing zones

The ranges and angles of human vision play an important role, the ability in comfort and enjoyment is critical to this technology that creates new useful challenges.

Content

In order to create the highest quality experience, the timing and placement of the objects should be shared with the content and through its presentation on the platform. For example integrating objects in mixed reality, reading text, or watching videos.

Testing process

The design process required a lot of curiosity and even more patience because the XR world is full of challenges and opportunities that expand with each new technological development, which creates far more question marks than exclamation points.
Double lens testing video
AR Testing
Editing screen tests
Perspective view
Front view
Preliminary model for transparency testing

Future research

User testing
Cross platform adaptation
Breathing design system

Habit compass

Searching for the perfect grid