3D Pegboard Configurator
A browser-based 3D tool for planning a pegboard storage wall that fits your space and your budget. Pick a board size and finish, drag hooks, shelves, and containers onto it, and watch the price update as you build. Enter your wall's real dimensions and the layout fits to that space.
The problem
Buying a pegboard system means guessing. The parts are sold separately, the product photos are flat, and whether it all fits your wall is confirmed only after everything arrives.
A shopper is left with three unknowns: will it fit, how will it look, and what will it cost. The tool shows all three live, before anything is bought.
Key design decisions
Direct placement instead of a menu
Accessories are placed by dragging them onto the board, not by picking quantities from a list. The real decision is spatial. Where does this hook go, not how many hooks.
Direct manipulation keeps the layout and the choice in the same place. The user watches their wall take shape instead of translating a parts list into a mental picture.
Snapping to valid positions
A dragged item locks to the nearest valid spot on the board, and boards snap edge to edge when they come within 8cm of each other, so multiple boards line up into one wall.
Free placement would allow layouts a real pegboard could not support. Snapping makes every arrangement buildable, and it spends the user's effort on deciding what goes where rather than aligning it.
Building against a real wall
A "Your Space" input takes the width and height of the user's actual wall in centimetres, and a "Fit to Space" option fills that area with boards automatically.
This is the decision I think matters most, because it answers the question a shopper actually has: what fits the wall I have. Real dimensions turn the tool from a visualiser into a planning aid.
Showing the price as you build
Every board and accessory is individually priced, and the total updates live as items are added and removed. The running total sits with the build rather than behind a checkout step.
A user can watch the total move as they add a shelf or swap a small board for a large one. Price becomes part of each design decision instead of a surprise at the end.
How it works
Everything happens on one screen. The user orbits the 3D view, picks boards and finishes from one panel, drags accessories from another, and reads the running total and parts list in a summary.
Purpose-built 3D assets
The twelve models, three board sizes in two finishes plus six accessories, were modelled in Fusion 360 and exported for the web. Building the assets myself meant the sizes, proportions, and snap points share one grid, instead of being approximated from parts that were never meant to align.
Validation plan
The prototype is built, so the questions worth asking now are about use, not concept. The plan is a small round of task-based testing.
Each participant gets one realistic task: design a pegboard for a wall of a set size, holding a given set of tools, under a set budget. That single task exercises the whole tool, from entering the space to watching the price against the limit.
The open questions are already visible in the build. Is "Your Space" discoverable? Do first-time users realise accessories are dragged rather than selected? And do people want to keep or share a finished design? That last one points at the most likely next feature, since there is currently no way to save or export a layout.
Next steps
After the testing round, the clearest gap is the end of the flow. A user can build and price a full wall but cannot yet save it, export a parts list, or share it. Closing that loop takes the tool from planning a wall to ordering one.
Today it is a working prototype that solves the core problem. What remains is testing it with real users and completing the flow to purchase.