SAAS PLATFORM

Odyssey3d Forge SaaS App UX/UI Case Study

COMPANY

Exarta Labs

ROLE

Sole Designer

EXPERTISE

UX/UI Design

YEAR

2024

Project description

Odyssey3D is a Shopify-based platform that enables users to create and customize 3D stores. Users can add 3D models, characters, text, products, frames, and edit store themes and colors. The platform also offers AI-generated models and textures, VR mode, and a variety of other features for a fully immersive shopping experience

Timeline

From explorations to final designs in 2 Months while working with multiple projects at the same time

Background

Odyssey3D initially offered a Free Plan with a simple UI tailored to limited features. As we transitioned to the more advanced Forge Plan, the existing UI could no longer support the added complexity, resulting in user confusion and navigation issues. We needed a redesigned UI for both plans that would be scalable, intuitive, and easy to navigate for all users, especially those without technical backgrounds.

Process

This category details the step-by-step approach taken during the project, including research, planning, design, development, testing, and optimization phases.

Research & Discovery

Identified pain points in the existing editor and analyzed user frustrations. Studied similar 3D platforms like Spline, Womp, and Adobe Project Neo. Created initial drafts focused on simplicity and accessibility for all user types.

User Flow & Information Architecture

Redesigned user flow and restructured information layout. Took inspiration from intuitive tools like Figma, Framer, and Canva to ensure a seamless and familiar experience.

Wireframing & Prototyping

Built low-fidelity wireframes, selected a clean and cohesive color palette, and developed interactive prototypes covering all key features and actions.

Testing & Iteration

Conducted multiple rounds of testing with both internal and external users. Collected feedback, refined designs, and iterated until the experience was intuitive and friction-free.

3D Assets (Previous Design)
This is UI of Odyssey3d previous UI with limited features. Here 3d Assets and Existing Frames are confused together in the 3d Models Panel.
3D Assets (New Design)
3D Assets Screen has 2 panels, on left is the layers panel of 3D Assets in the scene, whereas the right panel deals with uploading and editing 3d models, adding 3D text, and converting 2D images to 3D models.
Frames (Previous Design)
In the previous UI the frames were in the 3D Assets Section, Existing Frames had a separate panel, but dyanamic frames (that have additional features like uploading images and videos) were hidden inside the 3D Asset Library, almost unnoticeable for users.
Frames (new design)
Frames Screen that have two panels, left panel is for managing existing and dyanamic frames separately, whereas the right panel is for adding new frames, editing existing frames, and uploading images or videos in the frames added.
Settings (Previous Design)
This is the settings screen from the previous UI that uses two different ways to show the same type of features like joysticks and vertical movement (same type of features should be shown in the same way)
Settings (New Design)
On left, is the list of features like 3D Assets, Textures etc, and on right, the Settings Panel is opened with all the additional settings that one can edit in their scene.
Previous Design (Further Screens)
Further Screens from the previous UI
New Design (Further Screens)
These are right panels of different screens from the New UI of Odyssey3d Forge Design
3D Assets (Previous Design)
This is UI of Odyssey3d previous UI with limited features. Here 3d Assets and Existing Frames are confused together in the 3d Models Panel.
3D Assets (New Design)
3D Assets Screen has 2 panels, on left is the layers panel of 3D Assets in the scene, whereas the right panel deals with uploading and editing 3d models, adding 3D text, and converting 2D images to 3D models.
Frames (Previous Design)
In the previous UI the frames were in the 3D Assets Section, Existing Frames had a separate panel, but dyanamic frames (that have additional features like uploading images and videos) were hidden inside the 3D Asset Library, almost unnoticeable for users.
Frames (new design)
Frames Screen that have two panels, left panel is for managing existing and dyanamic frames separately, whereas the right panel is for adding new frames, editing existing frames, and uploading images or videos in the frames added.
Settings (Previous Design)
This is the settings screen from the previous UI that uses two different ways to show the same type of features like joysticks and vertical movement (same type of features should be shown in the same way)
Settings (New Design)
On left, is the list of features like 3D Assets, Textures etc, and on right, the Settings Panel is opened with all the additional settings that one can edit in their scene.
Previous Design (Further Screens)
Further Screens from the previous UI
New Design (Further Screens)
These are right panels of different screens from the New UI of Odyssey3d Forge Design
3D Assets (Previous Design)
This is UI of Odyssey3d previous UI with limited features. Here 3d Assets and Existing Frames are confused together in the 3d Models Panel.
3D Assets (New Design)
3D Assets Screen has 2 panels, on left is the layers panel of 3D Assets in the scene, whereas the right panel deals with uploading and editing 3d models, adding 3D text, and converting 2D images to 3D models.
Frames (Previous Design)
In the previous UI the frames were in the 3D Assets Section, Existing Frames had a separate panel, but dyanamic frames (that have additional features like uploading images and videos) were hidden inside the 3D Asset Library, almost unnoticeable for users.
Frames (new design)
Frames Screen that have two panels, left panel is for managing existing and dyanamic frames separately, whereas the right panel is for adding new frames, editing existing frames, and uploading images or videos in the frames added.
Settings (Previous Design)
This is the settings screen from the previous UI that uses two different ways to show the same type of features like joysticks and vertical movement (same type of features should be shown in the same way)
Settings (New Design)
On left, is the list of features like 3D Assets, Textures etc, and on right, the Settings Panel is opened with all the additional settings that one can edit in their scene.
Previous Design (Further Screens)
Further Screens from the previous UI
New Design (Further Screens)
These are right panels of different screens from the New UI of Odyssey3d Forge Design
3D Assets (Previous Design)
This is UI of Odyssey3d previous UI with limited features. Here 3d Assets and Existing Frames are confused together in the 3d Models Panel.
3D Assets (New Design)
3D Assets Screen has 2 panels, on left is the layers panel of 3D Assets in the scene, whereas the right panel deals with uploading and editing 3d models, adding 3D text, and converting 2D images to 3D models.
Frames (Previous Design)
In the previous UI the frames were in the 3D Assets Section, Existing Frames had a separate panel, but dyanamic frames (that have additional features like uploading images and videos) were hidden inside the 3D Asset Library, almost unnoticeable for users.
Frames (new design)
Frames Screen that have two panels, left panel is for managing existing and dyanamic frames separately, whereas the right panel is for adding new frames, editing existing frames, and uploading images or videos in the frames added.
Settings (Previous Design)
This is the settings screen from the previous UI that uses two different ways to show the same type of features like joysticks and vertical movement (same type of features should be shown in the same way)
Settings (New Design)
On left, is the list of features like 3D Assets, Textures etc, and on right, the Settings Panel is opened with all the additional settings that one can edit in their scene.
Previous Design (Further Screens)
Further Screens from the previous UI
New Design (Further Screens)
These are right panels of different screens from the New UI of Odyssey3d Forge Design

Problems Identified

Invisible Models on Add

When a model was added to the scene, it didn’t appear visually until the user manually selected it from the model list and clicked on the scene, disrupting the flow.

Inconsistent Frame Behavior

Frames were treated as 3D models, despite offering advanced features like image/video embedding. These unique features were deeply buried and inconsistent with model interactions.

No Object Visibility or Layers Panel

Users couldn’t view or manage existing scene elements like frames or walls. They had to manually click through each object to see if it was interactive.

Confusing Panel Structure

The same card UI was used for both the editing panel and the model list, making it unclear what actions could be taken, leading to cognitive overload.

Dynamic vs. Existing Frames Confusion

The platform offered two types of frames: Existing Frames, which allowed only scaling, and Dynamic Frames, which supported images, videos, positioning, rotation, and scaling. While existing frames were easily accessible in the model panel, dynamic frames were hidden without clear labelling, buried deep in the 3D model library, making them nearly impossible for users to discover or differentiate

Solutions Implemented

The resulting Odyssey3D platform delivers a seamless user experience, empowering individuals and businesses to effortlessly create, customize, and manage immersive 3D storefronts.

Separation of Features

3D models, frames, and the Interior Studio were separated into distinct modules, each with its own layers and editing panel for clarity and control.

Dual-Panel Layout

Introduced a two-panel system: the left panel for layers/navigation and the right panel for editing, reducing clutter and improving focus.

Structured Interior Layers

Walls, floors, and objects in the Interior Studio were categorized in the layers panel, allowing users to select elements directly from the list or the scene.

Consistent Architecture & Naming

Standardized naming conventions and UI structure across the platform, replacing the previously random placement with a consistent, intuitive flow.

Upload Limit Visibility

Added clear upload limits upfront and replaced the abrupt pop-up with a smarter alert system that informs users early in the process.

Scale Pinning Option

Introduced a pin toggle during object scaling and positioning to maintain proportions and prevent distorted dimensions.

Update Store CTA

Added a clear call-to-action to update the store after edits, along with a reminder pop-up if users try to exit without saving changes.

Onboarding Product Tours

Launched guided product tours for every major feature — helping new users get started quickly without external help.

Feature Expansion

Integrated advanced features like a 3D text generator, AI model generator, customizable 3D characters, profile card design tools, and optimization status indicators.

3D Assets (Previous Design)
This is UI of Odyssey3d previous UI with limited features. Here 3d Assets and Existing Frames are confused together in the 3d Models Panel.
Manage bookings
Manage your bookings easily with built-in booking widget.
3D Assets (NEW Design)
3D Assets Screen has 2 panels, on left is the layers panel of 3D Assets in the scene, whereas the right panel deals with uploading and editing 3d models, adding 3D text, and converting 2D images to 3D models.
Frames (Previous Design)
In the previous UI the frames were in the 3D Assets Section, Existing Frames had a separate panel, but dyanamic frames (that have additional features like uploading images and videos) were hidden inside the 3D Asset Library, almost unnoticeable for users.
Frames (New Design)
Frames Screen that have two panels, left panel is for managing existing and dyanamic frames separately, whereas the right panel is for adding new frames, editing existing frames, and uploading images or videos in the frames added.
3D Assets (Previous Design)
This is UI of Odyssey3d previous UI with limited features. Here 3d Assets and Existing Frames are confused together in the 3d Models Panel.
Manage bookings
Manage your bookings easily with built-in booking widget.
3D Assets (NEW Design)
3D Assets Screen has 2 panels, on left is the layers panel of 3D Assets in the scene, whereas the right panel deals with uploading and editing 3d models, adding 3D text, and converting 2D images to 3D models.
Frames (Previous Design)
In the previous UI the frames were in the 3D Assets Section, Existing Frames had a separate panel, but dyanamic frames (that have additional features like uploading images and videos) were hidden inside the 3D Asset Library, almost unnoticeable for users.
Frames (New Design)
Frames Screen that have two panels, left panel is for managing existing and dyanamic frames separately, whereas the right panel is for adding new frames, editing existing frames, and uploading images or videos in the frames added.
3D Assets (Previous Design)
This is UI of Odyssey3d previous UI with limited features. Here 3d Assets and Existing Frames are confused together in the 3d Models Panel.
Manage bookings
Manage your bookings easily with built-in booking widget.
3D Assets (NEW Design)
3D Assets Screen has 2 panels, on left is the layers panel of 3D Assets in the scene, whereas the right panel deals with uploading and editing 3d models, adding 3D text, and converting 2D images to 3D models.
Frames (Previous Design)
In the previous UI the frames were in the 3D Assets Section, Existing Frames had a separate panel, but dyanamic frames (that have additional features like uploading images and videos) were hidden inside the 3D Asset Library, almost unnoticeable for users.
Frames (New Design)
Frames Screen that have two panels, left panel is for managing existing and dyanamic frames separately, whereas the right panel is for adding new frames, editing existing frames, and uploading images or videos in the frames added.
3D Assets (Previous Design)
This is UI of Odyssey3d previous UI with limited features. Here 3d Assets and Existing Frames are confused together in the 3d Models Panel.
Manage bookings
Manage your bookings easily with built-in booking widget.
3D Assets (NEW Design)
3D Assets Screen has 2 panels, on left is the layers panel of 3D Assets in the scene, whereas the right panel deals with uploading and editing 3d models, adding 3D text, and converting 2D images to 3D models.
Frames (Previous Design)
In the previous UI the frames were in the 3D Assets Section, Existing Frames had a separate panel, but dyanamic frames (that have additional features like uploading images and videos) were hidden inside the 3D Asset Library, almost unnoticeable for users.
Frames (New Design)
Frames Screen that have two panels, left panel is for managing existing and dyanamic frames separately, whereas the right panel is for adding new frames, editing existing frames, and uploading images or videos in the frames added.

Results

Here, the outcomes and achievements of the project are highlighted, including user feedback, adoption rates, and industry recognition.

Increased Efficiency

Users experienced noticeable time savings during store creation. Streamlined workflows, structured layers, and simplified editing led to faster execution and reduced friction.

Improved Productivity

Optimized design and feature accessibility allowed users to focus more on creativity than troubleshooting. Smart defaults and automation (e.g., AI model generator, scaling pins) reduced repetitive tasks.)

Positive User Feedback

Feedback highlighted how intuitive and beginner-friendly the new interface felt. New users especially appreciated the guided tours, while experienced users praised the consistency and flexibility of the layout.

SAAS PLATFORM

Odyssey3d Forge SaaS App UX/UI Case Study

COMPANY

Exarta Labs

ROLE

Sole Designer

EXPERTISE

UX/UI Design

YEAR

2024

Project description

Process

3D Assets (Previous Design)

3D Assets (New Design)

Frames (Previous Design)

Frames (new design)

Settings (Previous Design)

Settings (New Design)

Previous Design (Further Screens)

New Design (Further Screens)

Problems Identified

Solutions Implemented

3D Assets (Previous Design)

Manage bookings

3D Assets (NEW Design)

Frames (Previous Design)

Frames (New Design)

Results