Start with the space.
Import a CAD floor plan and use its detected boundary as the placement area. Without an imported boundary, the white workspace supports free placement.
Internship project · Interaction design · Working prototype
Showroom
Layout Planner
From a floor plan to a layout.
A workspace for arranging vehicles and furniture.
Developed from my internship project at Li Auto, Showroom Layout Planner brings CAD import and manual layout editing into one browser-based workspace. This portfolio adaptation uses generic components and fictional dimensions to demonstrate the interaction without reproducing internal assets.
- Context
- Li Auto internship
Adapted for public portfolio presentation - Focus
- Interface design, spatial editing,
and interaction refinement - Deliverable
- Interactive browser prototype
with a fictional sample floor plan
The demo interface is in Chinese and is designed for a desktop or laptop. Open the sample CAD through the import button to try the boundary-based workflow.
01 / The challenge
Keep the space and its contents in the same conversation.
A showroom layout involves more than positioning a vehicle. Furniture, columns, and the usable floor area all shape where objects can go. The design challenge was to make these relationships visible while keeping placement and adjustment direct.
The central question: how might a browser workspace make it easier to move between a floor plan, a component library, and precise object editing?
02 / The workflow
Import. Place. Adjust.
Bring in the contents.
Switch between vehicles and furniture in the component library. Simple preview shapes and dimensions help distinguish the generic objects before adding them.
Refine in context.
Select an object to reveal its properties. Position, rotation, and rotation-center controls support precise adjustments alongside direct manipulation.
03 / The interface
Give the layout room to breathe.
I moved from a framed, gray canvas toward a continuous white workspace. The component library stays on the left, CAD controls sit on the right, and editing tools float above the drawing. Properties appear only when there is a selection, keeping the workspace focused on the current task.
A restrained gray palette separates controls from the drawing. Dark green marks active tools and primary actions, while consistent spacing and type hierarchy organize the interface. A millimeter-based dot grid provides a spatial reference as the view changes.
04 / Iteration
Make selection behave the way it looks.
The working prototype exposed interaction conflicts that static screens did not show. I refined selection, visual feedback, and movement through repeated hands-on checks.
Keep objects reachable.
The imported floor plan initially intercepted clicks on vehicles and furniture. Giving components priority made it possible to select them while retaining access to uncovered parts of the floor plan.
Make the selection visible.
Marquee selection needed a clear outline and translucent fill. A conflicting canvas style had made the rectangle invisible; correcting it restored the connection between dragging and feedback.
Connect selecting with moving.
After selecting the showroom and components together, dragging should move them as a group. Clicking empty canvas clears the selection and its contextual controls.
05 / Outcome & reflection
A layout tool is also a system of expectations.
The outcome is a working browser prototype that combines CAD import, a component library, manual placement, and contextual editing. The iterations reinforced how much spatial tools depend on consistent selection rules: what sits on top, what a drag selects, and what moves together.
These changes were checked through prototype interaction rather than a formal user study. A next step would be task-based testing with showroom planners, including complex CAD files, selection discoverability, and error recovery. No operational efficiency or deployment outcomes are claimed here.
About this version
A public demonstration of the interaction.
Original brand-specific vehicles, source CAD components, embedded imagery, and internal notes were replaced or removed for this adaptation. The demo and screenshots use generic shapes and a fictional floor plan. This is a personal portfolio presentation, not an official Li Auto product or a statement of company endorsement.