Scene Viewer
The scene designer site is a web application that allows users to edit 3D model textures, materials, color and labels. It is tailored for home designers and technical artists to showcase model configurations.
Main Objectives
Key goals when developing the viewer were to be able to visualize commercial color palettes using 3D models. For the model viewer itself, analysis was done on suitable 3D web viewer for scalability, interoperability, customization ability.
Focus was placed on providing a responsive and streamlined user experience for designers and technical artists familiar with 2D presentation and wanting to showcase their designs in 3D.
Generative AI was used throughout the entire process to assist in creating the template for user interfaces, for product design, and for brainstorming design ideas.
My Role
I was responsible for UX design of the material viewer and user interface controls.
I also conducted user testing for various tools such as a color palette generator and model hotspots which were later implemented into the full model viewer.
User Research
Initially a mind map was created to plan out the scope of the project and determine the main features that the model editor could have. The plan was for there to be a material color editor and the functionality to save and load models. The mindmap was expanded further over time as new features were added to the model editor such as custom color palettes and material labels.
User Interview and Survey Findings
Next a series of surveys and interviews were conducted to determine target audiences and issues with current model editors.
This user research revealed that designers, engineers and artists were the primary audience. In addition, respondents expressed the desire for viewing color variations for their models as well as the file import/export options.
Creating The User Persona
A user persona was then created based on the qualitative research data.
Robert is an interior designer who does home renovations for customers. Robert is completing renovations for a client who has very specific tastes on furniture type, brand and color. Robert is on a tight schedule and is looking for a tool that can help him showcase home renovation concepts in a convenient and cost effective manner.
Focus was placed on designing a model viewer that is efficient to use, and offers a variety of customization options for users to showcase to others.
Prototype Iterations
First Version: Adding a "Panel" User Interface
With the next iteration, additional material properties and model file options such as export/import/screen capture were added to the user interface.
To create a more streamlined and responsive user interface, Bootstrap styling was used to create a "panel container" which contains all of a model's editable material properties, textures and colors.
While this panel container reduced screen clutter, there were issues with form fields in the UI overlapping the model. When these fields were selected the material for the model would change making it difficult to edit the desired properties for model sections.
Adding additional fields to the user interface also resulted in more selection and screen space issues when using the model viewer.
Second Version: Using a Separate UI Container for Materials
To resolve the model selection problem the user interface was placed in a separate container next to the viewer. SVG images were created to represent model export and texture loading icon options. These icons helped minimize the size of the layout and provide more visually understandable controls.
Further adjustments were made to improve readability and responsiveness of the user interface. The fonts and icons were scaled down and made responsive. A minimal amount of margin and padding was added to ensure that content within the container would not collapse onto each other on smaller screen dimensions. The material property sliders and the color picker were minimized in size to accommodate mobile screens.
Model Viewer Usability Testing
Prototypes were tested by having users alter various components of a model in the viewer and having them state what they found difficult to use or what could be improved.
For the early versions clarity of user interface controls and speed of completing processes like changing material values was tested.
For later versions the process to load in custom color palettes, assign hotspot labels and save and export model scenes was tested.
These user tests helped to create a responsive layout, add a features toolbar and to streamline the information displays.
In addition to user testing, A/B testing was done to help determine which version of a user interface to use. This was done for variations of the color palette popper display as well as the layout of the hotspot labels within the tabbed menu.
Another usability test was done using a Figma demo to determine how to display hotspots on a model. Users were tasked with hiding, showing and going back to the original model view. This testing helped determine the need for user interface controls to reorient the camera closer to the hotspot label as well as the ability to remove individual hotspots or clear all hotspots from view.
Third Version: Adding Hotspot Labels
Hotspots
The next iteration of the model viewer was creating separate tabbed menus for the existing "materials" menu and the new "hotspot" menu. Tabbed menus were used to reduce the amount of controls per row and to categorize editable options for users.
Hotspots are labels for the selected materials of a model. When clicked the camera position shifts to highlight that section of the model. These labels make it easier for users to identify modifiable model parts.
The goal was to make each hotspot label easy to understand and edit. Hotspot labels are shown or hid using a hotspot button toggle in the "Hotspots" tabbed group. Toggling this button allows you to add material labels by clicking parts of the model. Each label is shown as a separate row in the "Hotspots" tab. Each label displays the material's name and can be hidden or deleted.
After a couple of revisions the ability to clear all labels was added to improve visibility in the model viewer. Users can also save/load hotspots which stores the camera position and material name for the hotspot labels.
To improve the viewing experience on mobile devices, the list of hotspots becomes a scrollable menu if there are too many entries, with the label row resizing responsively to fit the smaller screen.
Color Material Picker
The last main feature to incorporate was having a comprehensive material color editor. Priority was placed on providing options for users to load in custom color palettes and modify material colors using reference material such as commercial paint swatches.
Initially, there was some difficulty implementing the color palette picker into the model viewer. The grid of colors was not drawn properly, and it was difficult to read the color information from file and reperent it as a color grid. This was due to mixed code from old versions of bootstrap and the string in the JSON file not being read in due to being enclosed in double quotes. Other coding specifics were setting sanitize to false to enable the color grid to be displayed.
This was remedied by using a Boostrap popper menu. This popper displays when an interactable element (the color swatch) is clicked. The json color file is first loaded into memory by clicking the load color palette button. When the swatch is clicked the color palette colors and name is shown. Clicking a color in the palette grid updates the swatch color as well as the material color.
Fourth Version: Adding in a Custom Color Palette
For the first working prototype the main feature incorporated was the color palette section. An additional tabbed area was added to the user interface that allows users to load in color palette files (json). Color palettes are displayed as responsive rows similar to hotspot labels. The code from the test color material picker was adapted for this section.
Color of a material can only be modified in the materials tab. The palette section is for restricting the custom color palette to the selected option.
Another usability consideration was the ability to use the default color picker instead of a custom color palette. Thus a deselect palette button was added to the palette selection.
Final Model Viewer
With the main functionality completed for the viewer focus was placed on providing further usability options and streamlining the user interface.
First to be added was an alternative method to load in model files. Users can drag model files (glb) into the model viewer window to load in files instead of selecting the model file by clicking the load model icon. The screen will briefly highlight a colored border around the viewer to show that the model has been loaded.
File loading options were also added for model environments. Due to a bug with model viewer new environments can only be added by dragging and dropping hdr files into the model viewer window. The screen will briefly highlight and the new environment will be loaded in.
During testing users found the process to use a custom palette to adjust material colors confusing. Users were unsure whether they were editing the model's default color palette or the custom palette.
A separate swatch was made for the palette colors and positioned next to the regular color swatch. Once a palette is loaded in the palette section, clicking the palette icon in the materials section shows the colors available.
Some users expressed frustration with the viewing experience on mobile with the user interface being difficult to parse and to press certain buttons. Accordingly the user interface was center aligned and the icon bar collapsed to a single row per icon on mobile devices. This provides more interactable screen space to view and adjust model properties.