Online product configurator/customizer examples?

I’m looking for good examples of online product configurators/customizers with respect to UI/UX Design.

I know there is quite a diverse range of interests across users here so figured someone may have an example I haven’t thought of or come across.

Any suggestions welcome… cars, bikes, furniture, soft goods, footwear. product doesn’t really matter.

Something along the lines of NikeID/Car where you can “build” a product, or change colors/options/parts.

Bonus if the configurator/customizer is in 3D (can rotate/spin the product around during configuration).

Thanks,

R

Commercial funiture automotive and aircraft has a few configurators. This is for Bell Helicopters:
http://config.bh.com/#c=eyJ2ZXJzaW9uU3RyaW5nIjoiMC4yLjUuMCIsInBhZ2VOdW3EjzLEmmlkxI8iYmVsbMSJb3JlZEPEh2ZpZ3VyYXTEhm7EmSJtb2TEq8SoNTA1xL5leHTEg8SGclNjZW5lScSnxJBzMcS%2BYWlyY8S5ZnREZXTFmmxzxI/EgMWaxZzFnnRUeXBlxYTFhsS%2BZm1zTcWBxYM6ZmHFpWXEmmtpdFdlxLZodMSPMMSaxYnEimHGg8aFdENhxJxjxoF5xojGisWKxLlGdcSrxpHGk8aVxpfEv8aSUmVmxIPFkcWQxI9udcSsxJrGlMWcbGXEs2zEr8SoI0MwM0XGusS%2BxqttUGFzc8WRxJ7EhMSPMcSaYXZnx4DHgseExIPGjmfGhseHOMaJImNhcmdvx5HHkzrHlsWLbcWvxLl0xLjFsMefx4lsxLvHpcWCxqFtYXjHjceDxI3Eg8WmOjbHicWbxZ1hxZ9NaceCxLzEqMS%2BxLnHtMakx4NyxIJUaW3Hp8eWc8WvxLHFrcWvxKhWTFJDxL51xIXEjVVux5hsY8asxLrEsVJhx7TEj8W7xb3EmsWAxYJsR3JvdXDEqGnFhcWHyKvFuGxJRMWxyLfEqciExZXEqcSrbMS%2BdsWSxI9bMTPGiTI0MV3EmnbHr3jJiDEwOSwyMDLJkCLImsalxqxMb2HFlVsyMTHJmDk2yY/EmsiExJ5BdMiVyJfJiDMyNSw2yZvJncmTRW5kxLjIpsapOjMuN8aKx6J0eV93xoTHksaHOsmmxrk0LDkyM8mdYseBZcqMyo7HnsmaM8qUxqJ4yp3Gj8SPMzXKocirx7BfZsacyYQ6NzU0LjjHiXXKpMquxbnHlmHKuF/Fo25ryqXKj8ahyprHg19wxIvKg8SAyZowNsahy403y5AwMDjLk8mXy5PJlsuZxZg6MsqXxYXLlMSayZoxMsSjMseVy5THlsujM8SjyqjLqcuqMDE0xKM0yZrLoH3Iq8e/xIXEh8eddMe2xIBFTVPEj8msx7giT2Zmc2jEr8enyqgzxJrHgMS5cHVibGljxI80y7XEmsSzcsizyoQ2Msu4InN0ZF9lcXXFvGl6xLHKjGfKkMmNMMqHImTFm2VjdE/Ho8S6xIxnxLPMpsyEODYuNsqizIzEgnJJbsivyLHJv0XMicy6dM2NRsqQyZbLqcSazYrEg091zLxmzY91zZHNk8y7zZbKkDY1yZbEmsiHdsyYxrLGhMyXxI3Hh8uvxq5hYsSMVm9sxKHHpzjMkCLFo2tlb8yJUG/KjcWOaMygNDnHlsmTxLNuxLvGq8ixc86HzolTzovKpzfHlsaLxINuxbxOb8e/ZcmxVGHOg8yIZsSPODguyqLOnnLOoGzOos6kybFGbHlvzYvOrMSWxKQizrHOs861x4PJsUFwy4nJo2NoxI/OjsqGxJrKmmdnxJ1lzbrNvMiMx4fMhse/YV/FvMqQxIDEmDrPn8WnIsmzyJjKkcmoOcqGx4jEksuUMTU1x7gtyrQ3y7U5ZS3Kh8aJyYw0zLUszJvFhcmdxpvEq19CxLhuX8%2BlyYjLp82GOMmYLc%2BsMc2pyacsz6zLr8qhNjPHuM%2B6yZnPvMqHz78wyZ1WSMmVyZfNh9CUxJfMtTnOrSzQj9Coy6kxNzk0zJDQm8y00J400IDEmtCCbNCE0IbQiNCjypEyyazEl8m40JvQtdCdz77QuNCgxJpWRU7IvMqRzakuM8uy0KzQlcunLMSWN8uyM8%2B3z7nQlNCcz73Qn9CByq/Qvc6y0IjRjtGQyYnPjTbQjtCQyajKlNCVy6nKoTXRm9Ggz7vRotGKXcykz7zPo9CJz6fQkcST0LTQqDPHlcq2Lc%2Bpy5XRtdGe0bfRodC30Lki0LvRptCH0b/JpjXOrtKX0ZbEl8maybfSg8uvMMybz7TJmNGH0bnSkNCiyZXLpM2HyrbQkMy1z7TSmtKfyY3OrdCa0aDQttGJ0pDSktCF0afSp9GBNM2GyazSjdKk0o/Ri8%2Bk0anJiMqzxJPNhdCny5TMm9Cs0ZrRnNKM04HSttOD0rjQvtGN0Y/JldKXzYfHiNCty5TNiNCa0K7LlMm20IvSjdK10aPMpMeV0b7Ils%2BmWzjElDI50qPSm9KXNs%2Bx0bLTi9G10LPTpNGI0aPQutGl0rnSlNOq0IrNqi7JqdKvMzfUh9Kr06DSrTnUhdOR07zPpNGA06wxzq/ShdOK0JnKs8qU05zLr9GfxonPvNGUxJPTktGk0IPTv9C/yZXHlcST07HJm9OL05vTtsmWyY7NqsmZxJfQqjY4z7fSo9KOz77QsMSUyrLQodOFypE0zq450bbQldKH07bLscuy06/TutKl05PTvtOV1L/Jic%2B0xJXEpNOcyYvLjtOK1JzRsdK007vRun3MpMmaz6PPoMSA0pXLpNOu1KrLscqqLcSW0oo305DVm9WM1KPQvNSl0pXLp86uxrnSr9S7NcSk1YfUhzc41J3UudSQ0rvJicuyxJPPudCoN9S10q/LrzHOrdG11YvTgtWx0pPUptGB07TTiNOA1a/WkdGM1ZDRktGU1JrRl8q2047Qs9Wu0bjWmtKR1Y7SutWQ1o3EkjXRrtCo1o/Vh9Ovz7XWkNSi0bzVos%2Bk1IHKkdOwyrXRrdOKz67Jq9WU1rHKltWK1I/RutO91KTTlda5yabWltWG0pvQmNO01ZjLqdO41I3WtNaC1JLJq8SX0JjTismN1YHTtdSL1YHKs9C01pnUoteH1bLTldSSybfUlMqz1pjWpdek04TTl9WA1JTJt9aHy7HJjdaL0K/Rm9O514XSt9ao0pTWqs6c1ITMkNOcz67QmdeRy5TFhdOj17vQoNOn1rfSldSDy5/TitWBONer1JvLqdiTzKLUuNet1JDTlNK614oyyrLEl9af0YTShTPVp8%2Bt0KnVu9ej15bJiNK9Lsmr17TQmMmX14HToMmo0a3WgMmOyYvNh9am2JzSlNSSLdOtzYfRtc%2Br1oY20qLXt8mXN8%2B0yYos1JTJqcun1a3Yv9iqy7bUldS%2B17BbzJvRhNe02LXZh8ux17nXotia14bWp9eI1qnZlsmaN9iu1K3Yo8uk2IbJqNeh15XVncykyYvVodOpybTPp8qX0pvVmM%2BuzJzVqsqGz7XWpNaB2aHYvNCI2J7Vv9GT1q7LsdS12avVvMeV2YXZr9Km1JLYtdiu1bvWiNif157Sn9aN1YPPq9iq2oHXvdaU14vOrtCr0Ybam9Km1pzEltae1ovRmNai0Z3PuNqO1Y3Zo9e%2B2ZbQsMSW07nUm8un2pPSsM2p1YTao9iLxJrRvc%2Bh1rjZtdOszYbLpNmDyZvPrzfYs9KfzJvYk9aA06XanNqv2oPbgdGC2afKl9Kv25PJttiGxYY52qfYitCh1JI4yrTJqNSKxrnKqNuJy6/QmNe52q3WktWz16jTh8ux16zagNqk2ZbJjsST1rDEl8uk2KLal9me26rXpdaT05bRqtaNyrTKqduWNNuI25nTtNiJ2rvRu8Sa06jav9KV0JnKtdqK0YTQqteN1ozFhs6N27zZotem2J3bgdWW2K7ah9GbyZvZrNCZ1YPcmdaDyY3XmdOK0LHPsNumz63Svdip1J7NmdGE167agtaDLcmn26HRlNCnz7zNqtW32JXLssuy0qDZjNKq0LPZkNKr1oHQsNmn0pfZldGq2ZjFhtma0JHZnNCw0Zzcmdy11ZDKl8SSzYjSr9S10q7UrtCz0ZXbndWe1Z7HucWqx7zNlW5mb8%2BjzLjIj2xheU5hz5fEkELJgyDItsS%2BxrTEjd2x3bMi3bXErN23xYYgSsWiIMilx7RyIFjduW/Hm8SoanJ4LnDNs8SaxLjKsCLGhnRwOi8vd96gLsSqxKzIti5jb20vyJlpRmXEusemy7/PgMWKxqTJv8SDxbfFgsaRbnbHgcioxbzHg8aYdMakZ8e/xozEu8SH3r3Iqt6ydMWPaGXIjMe2yKnev9%2BKQsqbxrPGtdq/xZHNt8axxZXfkcW%2BxIHHmciCzKTGi0FjxZDOkt%2BWcs%2Bj35nMlsSx34jfkt6736nEkCLfosWKTWFqxK/fqN%2BqzqDfrN%2Bc3r7fnt%2Bw36HfgN%2B635jfvN%2BbxI/EisacyZHfoMSQRcWK36jdvGXFpt%2B034vEimnIk%2BCghd%2Ba36064KCJ4KCA4KCMIuCgjuCglcSLxa/goJHgoJPfgMmi3o7goJnfveCgiHLgoIrfn9%2Bx4KCgxYrgoKhv4KCl37PEpc6S3rTFgnJBZN67yJ7goJvfneCgt9%2BL3q7Ok8SO4KCc4KCt357EjMaQx5nFr8qQ4KCd4KGCSN6uZM2yxIPfruChic6Sx4DFksqw4KGBIuChilPMuuCghOChnOChikHHquChod%2B/xb/Ggce24KGPIsmkzLjfhm7goargoYjdo8S/y7rIgcSQQ8iadN6oxbPFtd63xbngoZzOscWNxKhTTFNf0b3NrOCgluCgmCLgooTgoobQs96M4KCp4KKM4KKF4KKHy5bEmsSc4KGez4rfjsenxJvFmM%2BPypvEqENPTE9SX8usyqvfuOCgsOCioeCio%2BCipeCineChrN%2BlxZHKkCLgoqvgoqRfyL5kyKbHhcSoREFOR0VSyINl34PMpsek4KG2Iljgo4ngo4rEvuChisWM35fgopLgoobJt8S%2Bx5jMn8Wi4KKD4KKTxYXEvuCglsSi37LNrOChhM6RxLXgoYbMpcuA4KK4csSn4KGoy77Po%2BCijeCipsus4KGH4KCu4KOr0JngoKzgo6/gopPWjeCjst%2Be4KOry7M6x4jgo5Bfy5zgo7vgo6vJqceHxJrgpIDgo63go7/go5g54KSC4KO84KSI4KO6zKTEtc6gyJ7NgM2N3anGqsasbMSaxYLFgGfMk2jMmOCkkt2qz6HMpMyLxK90VVJMyILIq3lExLphxKhk4KSv4KOnzKXgoYTEqExUSOCipdWgxphwzJfGlHRL4KGp4KOq4KKT4KO54KGr4KSA4KO24KSD4KO04KOt4KWE4KSH4KO21Z4%3D

This one is for SitOnIt seating. Chairbuilder | SitOnIt Seating

You can customize your task chair. Armrests, height adjustment, fabric, frame materials, etc.

A lot of the car companies have good ones. Check out Porsche and Ferrari (The Ferrari one you can even change the lighting on your customized car)

We studied a lot of these when we made our own configurators last year:

I’ve seen some good demos from Cl3ver 3D. If you want something with integrated eCommerce, you might need a custom solution.

https://www.cl3ver.com/3d-product-configurators/

My masters project research was centered around customization and rapid manufacturing. At the time, I found that most of them are really clunky and are just shuffling images to show different colors/textures on static objects. Here’s a few examples that I collected during that time (2013-2014):

http://n-e-r-v-o-u-s.com/shop/search_tags.php?search=custom

http://www.lampsplus.com/design-it/

http://shop.ford.com/build/f150/?gclid=Cj0KEQiAqdLDBRDD-b2sv6-i6MsBEiQAkT3wAmgA4I90JMCstRwrbZ2gCrj3EZB_cxqZDwMhEnckEjsaAtcf8P8HAQ&searchid=199279626|11841764826|70082480466|&s_kwcid=AL!2519!3!147679850290!b!!g!!build%20new%20%2Bf150&ef_id=USzSgwAAAJ3CN2oj:20170111020825:s#/select/

I’m not a developer, but I got pretty deep into WebGL & Javascript when I did my project so that I could make my own customizer. There is so much you can do with 3D content using WebGL, it seems pretty underutilized. But, I guess it just adds another level of complexity that retail sites don’t need.

This was my take on a customizer:
http://moczys.com/webGL/n-HedralCustomizer.html

And here is the accompanying project page:
http://moczys.com/2014/06/03/n-hedral/

Thanks guys, keep them coming.

Yo-
Most of the car configurators are pretty similar, like the Porsche and BMW ones. A few steps and options on the side, a few views of the car. The Ferrari one is surprisingly well done and along the lines of what I was looking for. The interface (scroll down to go to next step) is much more intuitive and interactive than clicking a bunch of option swatches all on one screen.

Lighting change and compare mode also pretty swell.

Good job on the Definitive/Polk compare tools. I found the lead through nicely done and easy to use, though I the final results presented were a bit confusing to me to know what was what (ie. I saw hidden speakers behind a concrete wall?) or what other options I might have (ie. how the speakers selected for me compare to others or if I could have any other options and/or how they would fit my parameters).

I’m also curious how a really structured build interface would work with repeat customers who sorta know what they want but still want to explore “custom” options. Interesting for sure the approach to use a customizer in the instance where it is really more a recommendation and matching of preference/use/cost/etc. to product than traditional customization.

Moczys-
Interesting project. Was pretty fun to play around with the customizer!


For the application I’m looking at we are going full custom and full 3D. At this point, I’m still working on trying to explore options of the base UI from a design and interface POV. I think the bunch of swatches/options presented all at once in a side menu with a poorly rendered 3D mold floating in white space is really not ideal functionally or graphically and feels like 1999 technology.

Keep them coming. I’m not a gamer, but even have been wondering what sort of interfaces there might be in games where you can customize characters, cars, etc. They must be better than some of these crappy web shops that feel like a freeware CAD interface…

R

Thanks for the feedback Richard. There is a little product recommendation tray that pops out if you click any of the speaker icons or the button in the upper right but my feedback to the team that built it is that the default state on the tray needs to be switched to displayed vs hidden. We need to make that change ASAP.

Also we need to scrub the database on the recommendations. Buying speakers is pretty confusing for a lot of folks, we are trying to make it simpler. It is definitely a harder task that I anticipated when we began that design process.

Keeping the tray out would help. Also never noticed the top tabs of Best Price/Match/Sound. Having some sort of rating for each speaker might also help, or ability to compare based on some characteristics. I have no idea for example what the difference is between a DI 6.5 and 5.5 and/or what are the tradeoffs or why it picked the ones it did for each suggestion. With something so complex and so many variables going the recommendation route I image must have taken some leap of faith and convincing of sales people who like to use complex charts and specs do the talking. Interesting use of a customization tool for something that is more function and selection than customization per se.




Assuming the customization is one mostly of form/color/look (as opposed to mainly function like picking speakers) I see a few different approaches.

The “top down” vs. “bottom up” concept is interesting and something I’m exploring. Most configurators let you build bottom up, choosing each part/color/spec. You get what you want by fiddling, but also may not have a good idea of what is possible or what the end result is when you are starting.

A “big picture” approach is one alternative (sorta like the Polk site) is to get the user to choose by “end result/effect” and then use that as a starting point for fine tuning (something missing in the Polk example I find). Another example I found is the Spotfiy UI getting you to choose music my “mood” (ie. party, chill sunday, etc.). This may feel less custom, perhaps but does it give a more satisfying result and less frustrating process? Sorta personal curation exercise more than customization perhaps.

Another alternative I’m looking at is the “top down” where you actually somehow start with ALL (or most) of the combinations and permutations and then dive in to fine tune or further filter those results at every step.

Imagine for example that there are 5,000,000 combinations of Ferrari color/interior/rim/spolier permutations. Would it make sense to start with ALL, but filter quickly by exterior color? If I know I want a red ferrari, the first step of picking an exterior color is a waste of time, and it’s not until I get into the nitty gritty details can I see what I want. If I can see at once all the red ferraris, it’s an easier task to CHOOSE the one I like, instead of making it from scratch. Especially since most people are not a designer and can’t imagine an option until they actually see it. While it may feel less like customization and more like personal selection, I’m wondering if it could be more satisfying, quicker and easier to also show the breadth of what is possible?

Thoughts?


R

[ Deleted ]

Cool 360 rotation on the ton chairs

Vitra’s is quite simple, but they do have 1000’s of variations of product and fabrics/frame colours so not suprising.

HM’s website really needs an upgrade. Looks very 2005…

https://www.vitsoe.com/rw/620/buy

I like how the vitsoe 320 chair has an illustration and then a close up of a nice render or photo so you can see what it really looks like. Also gives you a price straight up. Good to see they are confident enough in the product to publish prices like that.

That TON one is pretty good. HM is terrible…

R

Ikea kitchen builder: IKEA Home and Kitchen Planner - IKEA

Games have a lot of different types of customizers depending on the type of game. Role playing games of course have character customizers, but so do driving and simulator games that enable you to change paint colors, decals, accessories, etc. I’ve dabbled in game design, and it has been a while, but the current game engines might include customizer tools in their dev kits. I would recommend looking at Unity and/or Unreal Engine as there may very well be existing tools or scripting available.

Customizers for games can be virtually unlimited, but customizers for products not so much because once the user has a custom design then you need the order processing, manufacturing processes, and all of the other fun stuff that comes along with streamlining a build to order business model. It depends on the product; custom colors or graphics are one thing, but if you are developing a design tool that allows for customization of size, shape, and dimension then ideally your going to want your customizer tool to provide those modifications as data output useable by manufacturing. Bonus points if you can make the tool generate production drawings for manufacturing once the order is placed!

Interesting topic, can you give a rough idea of what type of item/product you need a customizer for? Or give us a little more context?

I should also add that if the customizer simply uses pre-designed components or modules that are sitting on a shelf then that is a simpler approach.

Maybe look at some virtual Lego building software?

I’ve been researching best-in-class examples as well, mainly to help our leadership understand customization issues.

Some examples:

http://projectone.trekbikes.com/ (really comprehensive)
Build Your Own | Custom Colored Appliances | BlueStar

Why did Thonet change their name? Their website is inspiring though. Love the fonts.

The Vitsoe one is nice because the product and options are relatively simple, so that an illustration can be used instead of full-resolution graphics. That would seem to be a good strategy for making the options load faster.

Vans has one that works pretty well, in my opinion.

yo - What am I missing? I don’t know how this works…

That vans one is one of the better ones I’ve seen for sure and exactly what I had in mind 3D-wise. Will play with it for a bit more.

Any others that present a different flow (showing pre-made options, filtering, etc.), I’m still on the lookout for.

Thanks,
R

Does anyone remember Customatix?

I happened to move to Santa Cruz right after the company opened for business. They had a showroom that was more just a visitor’s center, that showed how various options might look. I believe they had a few workstations available on site as well if you wanted to build a shoe there. I thought it was cool that they were right down the street so I actually designed and bought a couple pairs.

This was about the time that Nike ID was starting, and C-Max had more options at the time, and probably a better overall user experience. The company folded after a few years.