Configurators are cool and they serve a pretty great purpose – they let you see all the possible options for a product that has multiple customization points.

It’s a weird word (actually, the red squiggly underline is telling me “configurator” isn’t really a word) but you may have come across one online at a car web site, or a contract furniture web site (they are great for previewing modular furniture configurations in all their varieties) and Trek has a really cool  called Trek One.  Seriously, check out that Trek One one, it’s snazzy.

Configurators are online tools that let you visually choose from a variety of options and see what it will look like.  They usually are web based, though tablet and phone apps exist also.  They give you a range of customization points – colors, part locations, part options, add-ons, etc. and allow you to interactively add and subtract and change them so you can see what the end result is of the myriad choices the product offers.

The design case for them is pretty clear since they give your customers the ability to customize their own product.  There’s also a great business and marketing case for them too – they can give you great data on what people are interested in because every user choice can be logged in your analytics database.  No longer will you have to trust those jackasses at Pantone when they tell you that the Color of the Year will be Pig Belly Pink or whatever nonsense they come up with.  You can check on what your customers actually like by seeing what they pick out for themselves.

With all that said, I decided to jump into the configurator game here at Hypothetical too.  I wanted to do something simple but still fun and also add a little extra beyond what most configurators offer.  So I went with a 3d rendered scooter configurator, and for that something extra I decided to make the transitions from one scooter option to another animated.

The animation added a new layer of complexity to the web presentation, but I managed to get it working using html5 for cross-browser and mobile compatibility.  Try it out by clicking the image below to get an idea of what I’m talking about.  Hopefully it’s self-explanatory, but you can choose a color and toggle on and off the windshield add-on and the saddle bag add-on.  You can even do it while it’s in mid-animation and it will update appropriately!

Configurators Scooter 3d Rendering

Not too shabby if I may say so.  I decided to skip the location scouting (I actually love the real world, but see this post for another example of why it’s kind of annoying to scout locations when you already know exactly what you want in your head) and do a full CG environment instead.  The inspiration for this set came from a tour of the Buffalo Trace distillery near my old Kentucky home.

Not enough scooter renderings for you?  Check this out too for a set of images where you can interactively spin around 360 degrees to see a variety of scooter colors.

Configurators Scooter Colors 3d Renderings


Hey, like this post? Why not share it with a buddy?