What does Trisetra do?

Trisetra enables users to redesign their homes by interacting with a 3d digital twin of their space, created based on submitted photos of their rooms. Once the digital twins are ready users are invited to search for 3d models of furniture and home décor accessories available in Trisetra’s repository. Users can add, re-position, delete these 3d products in their digital rooms and check how will the product look and feel in their rooms prior to purchasing the products from respective vendors.



The Problem

Trisetra has a library of 3d models of products which is currently being extended continuously. But in addition to Trisetra’s existing repository of product 3d models, users want to view other products they like in external online stores in their digital rooms.


Our Objective

  • Create a way to enable users to generate a 3d model of any product from external websites

  • Allow users to customize the 3d models generated

  • View it in the digital twin of their room

Comparative Analysis

To understand the ways in which existing applications perform similar functions we analyzed similar offerings from other major brands catering to various sectors and industries.

What are the familiar interactions for users when searching for products using photos?

Pinterest lens Task flow on mobile

  • Home Page > Select Image > Crop tool > Visual matches list

  • Search tab > Camera > Take Picture > Similar image list

Google lens Task flow

  • Lens button > Select image/click picture > Visual match results

Pinterest's visual search engine

Google lens

What are the established 3d interactions on customer facing websites and software?



Ikea product customizer

Ikea's 3d room visualizer gave important insights. We studied the user journey and quickly identified the key features which we could implement in trisetra's 3d room viewer for a more intuitive experience and improve usability.

Studied -

  • 3d Room Navigation

  • Product customization flow

Nissan India Website

Customizing a 3d model of a car on Nissan website.

  • oscillating hand icon signifying a interactive 3d model

  • contextual Hotspot buttons allowing intuitive navigation from inside to outside of the car.

  • Highlighted part of the car being customized.

  • Auto rotate 3d model to display selected part for customization.

Task Flow

3D model generator interface

Let's find the best way to start the new flow

The challenge was to design the start to not conflict with the primary flow of placing existing 3d models into the 3d rooms. Visibility was important while being secondary in nature.

  • Looks related to the search bar

  • Obtrusive of the main flow


  • Am I creating a new



  • No separation between existing products


  • Subtle

  • Unobtrusive

  • emphasis

The + button was designed to stand out with higher contrast and a unique shape allowing it to receive more emphasis. The shape morphs into a add new button on hover.

How can we improve the copy - paste experience?

Users will have to share the URL of websites or share pictures, for Trisetra to generate 3d models of the products. I analyzed various websites to learn best practices and optimize the ux writing and interaction of the 1st modal of the task flow.

Google's Share URL modal

Zoho Mail's Attach file modal

Iteration 1

Behavior - Skeleton loader displayed immediately upon URL pasting

Iteration 2

Behavior - URL data is scraped from clipboard and skeleton loader is displayed

After discussion with the team and interacting with the prototype, we felt both options were of abrupt and unfamiliar nature. Hence, we redesigned the copy writing and interacting to make the customer take concrete steps and in an informed state.

Final "add new" modal design

User has the option to submit URL's or photos | Clear separation between options | Search action button with high emphasis

Hey User! This is what we found.

Trisetra's scraping program identifies the relevant data on the given URL and autofills the editable text fields. User Privacy is also addressed with a checkbox to keep 3D models private. Product Images found on the URL are also displayed here.

Here's your 3d model!

Matching 3D model fetched from the database is displayed with the product details tab in an open state. The tab contains all scraped data, and it is available to users while editing their 3D models. Users can quickly refer to original measurements and colours and compare their input and final 3D output. Users can also access 3D model details through the Info button.

3D model editing interface

Trisetra's finds and displays the best match from its 3D model database for the scrapped URL data. The 3D model's may not be a perfect match of the original product, so we created a 3D model editor for users to change model attributes such as measurements, colour etc. in real-time. The positioning and design of the tools panel and the nested modal were designed for easy transition into responsive layouts.

Toolbar and Tool panel design process

Iteration 1

Behavior:

Hotspot buttons morph into labelled action buttons on hover. Clicking on action buttons display available choices.

Feedback:

Hover function will not work on touch-based interfaces and multiple labelled buttons will create clutter.

Iteration 2




Behavior:

Clicking on the tab expands the contextual editing choices.

Feedback:

It will be difficult to optimize the design for smaller mobile layouts as grouping all choices is resulting in a large menu.

Iteration 3

  • Hotspot buttons are redesigned to use icons to convey meaning and avoid text labels, making them suitable for mobile interfaces.

  • Bezier curves used to show connections and create a 3d gamification experience.


Behavior:

  1. Click / Tap on hotspots to activate dialog boxes

  2. Available choices can be selected to make changes

  3. Click / Tap on another hotspot to closes active dialog box and opens new dialog box.

Feedback:

  • Less predictable

  • longer visual search time required to identify modifiers

  • Increased optical tracking

  • Tool panel design not suitable for smaller screens

Iteration 4

  • Tool panels redesigned to become more familiar and predictable experience for users

  • Hotspots redesigned to not hinder users view of the 3d model. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx


Behavior:

  1. Hover on hotspots tools to activate tooltips.

  2. Click/Tap to select hotspot tool and activate tool panel/action bar

  3. Click/Tap on available choices to edit 3d model.

  4. Click/Tap on any location outside tool panel to close.

Feedback:

  • Tool panel choices should have text labels for easy recognition and recall

  • Increase in hotspot tools creates clutter and overwhelms users.

  • Need to manage hotspot locations to be aesthetic while maintaining context for numerous 3d models.

Iteration 5 - Implemented

  • In this approved iteration, we opted to design a familiar toolbar interface, to avoid the overwhelming nature of the multiple hotspots.

  • Size input interface is changed to text fields. This was done as users wanted to try sizes which were not in the existing choices

Iteration 5 - how it works

Add to room