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
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:
Click / Tap on hotspots to activate dialog boxes
Available choices can be selected to make changes
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:
Hover on hotspots tools to activate tooltips.
Click/Tap to select hotspot tool and activate tool panel/action bar
Click/Tap on available choices to edit 3d model.
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