In the era of Artificial Intelligence, combining Generative AI with 3D simulation spaces is opening up an entirely new horizon for design and software engineering. I recently wrapped up the UI/UX design for Strike Robot (Scene Studio), a platform that does exactly that.

Now that the project is officially implemented, I want to share a deep-dive analysis of its layout, user experience (UX), and interface components from a Product Designer’s perspective—highlighting what worked, and how we refined the tool for production.

1. Overall Layout & Visual Hierarchy

For the structure, we adhered to the classic split-screen layout commonly found in professional engineering and 3D design software:

• The Primary Canvas (3D Viewport): Takes up roughly 75% of the screen on the right. This was a critical design choice because the core value of the product lies in letting users visually manipulate and observe the 3D space, which includes grid coordinates, conveyor belts, shelves, and robots.

• The Control Sidebar: Occupies the remaining 25% on the left, keeping all localized user inputs, robot selection, progress tracking, and AI prompting tightly contained in one workflow.

• Information Architecture: The top navigation bar clearly delineates high-level modules like SCENE STUDIO and ASSET STUDIO, preventing any cognitive friction between resource management and environment building. The light-gray backdrop paired with dark text delivers a clean, modern, high-end SaaS aesthetic.

2. Deep Dive Into the UI Components

The Left Control Sidebar

This area handles the primary user input and system feedback loops. A search bar integrated with quick tags such as All, Arm, Quadruped, and Humanoid allows robotics engineers to instantly filter the assets they need. The metadata labels below the names keep the list highly informative.

For system feedback, the blue checkmarks under the progress section provide essential real-time feedback while the AI runs its backend processes. Directly below, the solid black Generate Scene button stands out as an unambiguous Primary Call to Action, driving the user to execute the scene build.

The 3D Viewport & Overlays

We optimized the spatial interaction area using contextual, non-intrusive overlays. The floating asset preview card hovering on the canvas provides excellent spatial context, ensuring users know exactly what asset is being manipulated before or during placement.

Furthermore, positioned neatly in the top right, the axis indicator and snap-to-grid settings are indispensable helpers for technical, pixel-perfect 3D accuracy.

💡 UX Win: Incorporating micro-copy like "Physics settings coming soon" was a deliberate move to manage user expectations, preventing them from clicking around and assuming a feature was broken.

3. Post-Implementation Refinements & Pain Points

Even with a rock-solid design foundation, transitioning from prototype to production revealed a few critical UX/UI challenges that required careful optimization.

Streamlining the AI Model Selector

The initial design suffered from interface redundancy. It featured a dropdown menu inside the chat box, but also an automated floating "Select AI model" card overlapping the canvas boundary, creating visual clutter. To solve this, we consolidated the UI by eliminating the floating popover and anchoring the AI model selection entirely inside the chat input box dropdown.

Enhancing Canvas Footer Badges for Accessibility

The small data badges at the bottom left originally used light green and pale yellow text on a white background, which failed WCAG contrast standards. To fix this accessibility failure, we boosted the contrast by increasing the font-weight and placing the text inside solid, high-contrast container pills to make them instantly readable.

Structuring the Sidebar Footer Layout

The Export Scene button and Physics Settings text at the bottom left were floating without a clear boundary, making them look like design afterthoughts and weakening the visual hierarchy. We resolved this by creating a dedicated footer, adding a subtle horizontal divider line, and styling "Export Scene" as a distinct, outlined secondary action button to separate setup from output.

4. Retrospective & Conclusion

Looking back at the completed implementation, Strike Robot (Scene Studio) successfully bridges the gap between text-to-3D AI and functional engineering software. By leaning on a robust 3D layout logic and an intuitive step-by-step AI prompting workflow, we built a tool that feels both powerful and approachable.

Refining the component overlaps and pushing for accessible color contrast were the final touches that elevated this product from a good prototype to an enterprise-grade tool, ready to help engineers maximize their simulation workflows.

Designing an AI-Powered 3D Simulation Tool (Strike Robot)