Sauna Builder

Southern Cross Saunas is a rapidly growing company based in New South Wales, Australia, designing and building made-to-order saunas for residential and commercial spaces.

I was approached to help translate its bespoke planning process into a digital product: a browser-based sauna builder that customers and the Southern Cross team can use to develop a layout before production begins. Users can define a room, add and arrange modular sauna components, select finishes, and review the design across plan, front, rear and side elevations.

The project covered UX, UI and front-end development, including the information architecture, interaction patterns, configuration logic and visual design system.

Because every Southern Cross sauna is made to order, no two projects begin with the same brief. Room dimensions, access points, orientation, materials and functional requirements all shape the final layout.

Before the builder, these decisions were explored through consultations, sketches and technical drawings. This made it difficult to test options quickly or give customers a clear sense of how individual choices would affect the overall design.

The goal was to create a planning tool that made the early stages of customisation easier to understand. It needed to let users work from the dimensions of a real space, experiment with different layouts and materials, and see how their decisions translated into a buildable sauna.

The project was developed over a twelve-week period, moving from early research and concept development into interface design and front-end implementation. The process remained intentionally iterative: each phase informed the next, while development began alongside the final stages of design to test the builder’s interaction model early and allow for incremental improvements.

The first three weeks focused on understanding Southern Cross’s existing planning process, technical drawings and the requirements a digital builder would need to support. This was followed by two weeks of ideation and two weeks of wireframing, where the overall workflow, component behaviour and five-view structure were defined.

UI design took three weeks—translating the established monochrome drawing style into a clear interface and reusable visual system. The final four weeks focused on building the interactive canvas, configuration rules, synchronised views and submission flow.

The outcome was a flexible planning environment that turns a complex set of requirements into a clear, interactive workflow.

Users begin with a layout of a room matching their real life specifications, and can then add and configure elements including benches, backrests, doors, windows, heaters and downlights.

Each element can be positioned, resized and adjusted through contextual controls, allowing a design to develop around the dimensions of a real space.

Built on Fabric.js, the builder uses an interactive canvas with editable object models for each component.

Users can add and adjust benches, backrests, windows, doors, heaters and downlights, building the layout around their requirements and desires. Benches include connection and stacking logic to support multi-level seating, while collision rules prevent elements from overlapping or being moved into conflicting positions.

Safety requirements are also built into the placement logic. The heater’s clearance zone prevents incompatible elements from being placed too close during editing, helping users develop layouts that are both practical and ready for review by the Southern Cross team.

A sauna layout needs to work in more than one dimension. The builder presents each project as a floor plan alongside front, rear and side elevations, offering a clearer view of placement, scale and structure.

All five views draw from the same project data. When an element is added, moved or edited in one view, the corresponding views update to reflect the change. This makes it possible to assess the overall footprint and vertical arrangement of a sauna without creating separate drawings.

Southern Cross wanted the builder to reflect the monochrome technical-drawing style used across its existing sauna plans. This became a key reference point during research and ideation, shaping the visual identity developed for the tool.

Fine linework, a restrained palette and a visible grid carry the language of the original drawings into the interface.

Blue is reserved for selected elements, measurements and active states, while Inter and a consistent component system keep labels and controls clear throughout.

When a configuration is submitted, the project is emailed to the Southern Cross team and saved in the admin dashboard. Each submission includes static images of the design alongside a JSON file containing the full project data.

The JSON file can be uploaded to reopen the layout in the builder exactly as it was submitted. This gives the team a clear record of each proposal and allows them to review, adjust and develop it further as part of the planning process.

Southern Cross uses Dulux coatings across the external cladding of its sauna projects, so the colour selection available in the builder needed to reflect the options available in real life. To make this part of the planning experience more useful, a custom Dulux integration was developed exclusively for Southern Cross.

Users can explore colours through a HEX-based picker, while the tool compares their selection against the official Dulux colour dataset and identifies the closest available match.

This gives customers the freedom to explore a broad range of colours while linking their choice back to a real, specified Dulux finish—bringing a typically later-stage material decision into the builder from the outset.

Choosing a custom sauna is a significant decision, and the Southern Cross Sauna Builder makes the early planning process easier to navigate. By bringing room dimensions, layout, finishes and placement requirements into one accessible tool, it gives customers and the Southern Cross team a clear visual reference to discuss, refine and develop throughout the consultation process.

The builder is also adapted for mobile, making it easy to explore across devices.