Designed with an embed on a website as the final destination, the 3D configurator lets users see their own personalized window blind in a realistic setting. The user can explore blind styles, materials, colors, sizes, and features. There is one additional benefit that comes at the end of the customization process, that lets the user download the image of their configuration. In a real-life use case, the picture can be downloaded and used as a digital reference or in a real store.

This blinds configurator, set on a realistic background, uses Floating UI to manage all interactions in the scene. The goal was to make the configurator easy to use and understand. The main UI presents menu choices with visuals rather than words. In order to avoid obstructing the overall image, only one UI was used.

‍

Hotspot needs to:

• Open/Close the FUI

‍

Floating UI, located in the top left corner of the screen to needs to:

• Change between blind variants
• Change the materials/colors
• Switch between two cameras
• Take a screenshot of your final configuration

‍

Interactions

‍

The Floating UI has two primary functionalities: the object switcher and the material switcher.

‍

• For the object switcher, images are used to trigger interactions and select an option from four variants.
• Each variant is associated with its own material menu of multiple swatches.
• When a variant is selected, it triggers the visibility of the swatches for that blind type, while hiding the others.
• The camera icon lets the user to switch between two different views: the default one provides an overview of the scene and a secondary one shows a close-up view of the blinds.
• The picture icon is an interactive element that will save the image of the selected configuration to the device.

‍

‍

‍

‍

Tip: To reduce polygon count, only a backdrop wall is used, with camera limits set to prevent rotation. The environment behind the window is represented by a simple plane with an image texture.