Snapshot

2. Redesigned File Management and the 3D workspace, including a task-based Light / Dark visual strategy;
3. Continued extending measurement, model operations, and collaboration features within the same framework. | | Current Status | Shipped and still in use. Subsequent Web features continue to build on this core structure. |

TL;DR

Scanat initially focused on iPhone and iPad. As customer needs grew, the team began building a Web product so users could manage scan files, inspect models, and handle more complex measurement and model operations in a desktop environment.

The first Web wireframes largely reused the iPad layout. I reframed the product around desktop input, screen space, and professional workflows, resulting in Tree-based file management with multiple views, a composable three-region 3D Model Space, and a Light interface for information-heavy screens / Dark workspace for 3D tasks. This structure has remained in place since beta and became the foundation for later Web features.

My contribution: I led the 0→1 information architecture, UI/UX for key modules, and visual direction for the Web product, then continued designing new professional features within the same framework.

1. Problem

From iPad to Desktop Web

The first Web wireframes largely carried over the iPad layout. But the desktop environment introduced a different set of constraints: wider screens, mouse-and-keyboard input, and more room to keep file hierarchy, the 3D model, and object properties visible at the same time.

Simply scaling up the iPad UI would underuse horizontal space, slow down file browsing, and force users to switch context too often during 3D tasks.

Three Core Design Questions

1. File Management: How might we support more files, hierarchy, and metadata on desktop instead of extending the card-based tablet structure?
2. 3D Workspace: How might we keep model navigation, the 3D Canvas, and current-object information visible while preserving most of the workspace for the model?
3. Visual Theme: File management and 3D work have very different content characteristics—should the product really force both into a single Light or Dark theme?

Research & Framing

The core framework had to be defined in about three weeks. Given the team size and project stage, I did not wait for a full formal research cycle. Instead, I formed an initial framework hypothesis from existing customer scenarios, known issues in the iPad product, and patterns in professional desktop tools, then validated the structure through continued feature expansion after launch.

For workspace layout, I studied tools such as Figma, Spline, AutoCAD Web, Blender, and Pix4D, focusing on how they use wide screens to organize navigation, the Canvas, tools, and properties.

2. Approach

The core design phase took about three weeks and moved through four steps:

1. Compared iPad and Desktop Web in terms of input method, screen space, information density, and primary use cases;
2. Studied professional desktop workspaces and defined three principles: higher information density, persistent context, and a dominant 3D Canvas;
3. Redesigned File Management and the 3D Model Space, while comparing all-Light, all-Dark, and task-based theme directions;
4. Reviewed the direction with the PM, Product Director, and CTO, launched the beta in May 2024, and continued extending the framework through real product use.

3. Design Decisions

Decision 1: Move File Management from Card Grid to Tree + Multiple Views

Compared with the card-first browsing pattern on iPad, Web users needed to scan larger file sets more quickly while seeing hierarchy and file metadata at the same time.

The final structure used:

• Tree Navigation on the left for folder hierarchy;
• Table / List / Map views in the main area;
• Different file metadata and spatial information depending on the active view.

This change preserved the existing file logic while redesigning how information was presented for desktop. Collaboration and other later features were added without changing the top-level structure.

Decision 2: Build a Composable Three-Region 3D Model Space

Every feature in the 3D Model Space revolves around the central 3D Canvas, but the supporting information changes by task. Standard workflows may need panels on both sides, while panorama walkthroughs or contour generation may only need one. The same region may also serve as a list, guide, detail panel, or parameter panel depending on the feature.

Rather than permanently defining the left and right regions as “list” and “details,” I created a composable three-region structure:

• Center: 3D Canvas + Toolbar
• Left / Right: contextual areas for lists, guidance, details, or parameters
• Either both sides or a single side can be shown, depending on the task

Standard features usually use two side panels around the central Canvas, while single-panel workflows concentrate only the required information on one side. This lets different features reuse the same Web shell while adapting content to the task, without redesigning the top-level layout each time.

Decision 3: Split Light / Dark by Task Context

During visual exploration, I compared three directions: all-Light, all-Dark, and a Split Theme.

File Management is dominated by lists, text, and metadata, where a Light Theme improves readability. The Model Space is centered on the 3D model, where a Dark Theme reduces visual interference from surrounding UI. Instead of forcing visual consistency across the entire product, I prioritized readability and focus for each task context.

4. Outcome

Shipped and sustained: The beta launched in May 2024, followed by the official release in June 2025. The top-level structures of File Management and Model Space have remained in use without major restructuring.

Customer and sales feedback: Feedback after beta was positive. Although Web required an additional paid plan at the time, some customers specifically purchased access to it. Sales also reported that certain customers wanted the mobile experience to more closely match the Web layout and workflow. Since beta, Web has remained one of the product’s strongest selling points.

Platform roles: For some larger customers, mobile is used primarily for on-site survey and scanning, while Web supports downstream design, analysis, and planning—closely matching the original product hypothesis for desktop.

Foundation for expansion: Features including cuboid tools, volume measurement, panorama walkthroughs, floor setup, contour generation, and furniture placement were added on top of the same Web Shell. As the product evolved, more complex capabilities began to be designed or tested on Web first unless they specifically depended on the App.

5. Reflection

1. Cross-platform design is not interface migration. Functional logic can be reused, but when input methods, screen proportions, and work contexts change, the information architecture needs to be reconsidered.
2. The real value of desktop width is persistent context. For professional tools, the goal is not simply to fit more information on screen, but to keep file hierarchy, the 3D Canvas, and object details visible in parallel.