Webshop & 3D product-configurator
„A white helmet is a missed opportunity“ - for helmade, we developed the digital brand experience and a web tool for product configuration, bringing this statement to life. This innovative start-up sells motorsport helmets with customized designs all over the world.
Brand building for e-commerce
helmade aims to revolutionize individual helmet designs. The process of designing and ordering takes place on an e-commerce site with a WebGL product configurator - performant on any device.
Born from motorsports and aiming on high class design, the site had to ensure a brilliant digital brand experience and product staging for helmade. Since all helmets get manufactured as individual items, the 3D models in the webshop have to be as photorealistic as possible.
We accompanied the start-up from developing its brand experience up to the digital configuration of its products. The brand is told and built via the concept of digital individualization, which is unique in the helmet branch. As a base for international standardized, scaleable retail and after sales, the e-commerce platform Magento serves as the backend system.
Functional and performant cross-device
Our WebGL configurator is the center of the consumer experience. The products in 3D can be customized with several designs and more than hundred variations of colors. 3D modeling in low poly and development in WebGL ensures high performance and functionality in any popular browser, on mobile as well as immersive displays for events or point-of-sales.
Guided by predefined design lines, the customer receives freedom of configuration at a max. The product lacquering, after all, is fully handmade - in the end you get an individual, unique item.
Ambition of the site
The strategy challenged us on several levels: Building up the brand itself; telling its idea and story while permanently staging products - in the meanwhile, ensuring fun with product design for the user. Therefore we especially valued visual inspiration, intuitive user interfaces and a fast onboarding on the configurator.
3D-Rendering of products
The experience is essentially shaped by the 3D-products. The best solution to achieve a complete, detailed and perfect depiction of the helmets was the implementation of 3D in WebGL.
For this reason, our partner 747studios modeled and rendered all products from scratch. It ought to be done on „low poly“-level, to ensure performance in web and mobile. Afterwards, textures and shadings were created in comparison to lacquering samples of all hundreds of colors, including special effect colors.
Design for each target audience
Motorsports, Motorbike and Scooter - each product category has its own world with a different target group. How can we establish a consistent Brand Experience without „scaring off“ the diverse audience? The visual design shapes the brands style: Bold. Solid. Fun. We created an individual entry for each product world. The combination of video content, logo, and typography embodies helmade’s promise of quality: „handcrafted with passion“.
Interfaces: custom and personal
The interface’s design stages the character of helmade: clear words, a colorful dress and passion for detail. Colors of the helmets are transferred to the interface; the website’s elements directly react to user-input in the configurator.
Content production all around the product
Products cleary have priority - image and video content though tell the brand’s values passion and individual character. To ensure this, we undertook the videoshootings’s art direction, postproduction and integration of accessories into the shop’s product catalog.
Joy of use - with passion
Fun and passion layed at the development team’s heart, brought to life throughout the whole site. Customer feedback proofs that: the configurator is perceived as an stand-alone ‚program‘, not as a website. This statement points out its native, direct and stabile feeling within navigation - adjectives, which not often pertain to applications on websites. Quality results in joy of use and makes all the difference.