The garage door visualiser, or garage door designer, was a project that Victoria and I built together at Centurion Garage Doors, the workplace where we met. To this day, it's one of the coolest things I've ever done.

The project

The project, which was Victoria's brainchild, allowed customers buying a new garage door to see and customise their door before requesting a measure and quote.

In addition to customising the garage door, customers could upload a photo of their house and, after positioning the garage space, overlay the new garage door on top of the image. We even added a gallery of example homes, which allowed some basic colour changes to the walls so customers could quickly test colour combinations.

The Code

It took some experimentation to find the right approach to showing the doors and houses on the screen. To avoid designing a graphic for every configuration, we chose an approach that showed the door using a series of overlapping layers.

To achieve this approach, Victoria would create the layers from scratch in Photoshop - for example, for wood grain designs, she created a separate black-and-white woodgrain texture, then a separate layer for specific colours.

We would then overlay these layers in CSS, using blend modes and other features. These features of CSS would have been fairly new at the time.

I wrote the code in jQuery, which was becoming obsolete even then, but I didn't discover UI frameworks like React existed until the project was mostly complete. The complexity and interactivity of the project would have been a perfect fit for React or Vue. In fact, I was miffed when I realised far too late.

After the project

Victoria set many ideas into motion while we were both at Centurion, but this was the most exciting, and possibly the most complete. It was great being able to release it for customers to use.

In fact, I enjoyed it so much that for a while I considered whether I could design visualisation software for other industries, applying my learnings from this project but writing the code from scratch in a modern framework. I ended up working on other things, but I'm frequently reminded of how cool it was and I like to keep an eye out for similar ideas.

I would love to hear about fun projects you've worked on, especially ones similar to this one.