Responses by Jérémy Minié, creative front-end developer, and Frédéric Marchand, president and creative director, Locomotive

Background: The website targets actual and potential clients—more specifically, architects and project managers. It is used by sales representatives at Muraflex to simplify sales and ordering processes but also acts as a reference for professionals in the selection of a solution for their projects.

Design core: The design relies on a deconstructed grid with lots of negative space to showcase Muraflex’s line of products and services in a sophisticated way. While elegant and high end, it has a specific purpose: support sales and clients to get work done faster.

Favorite details: The site’s polished design and smooth animations being some of the things that come into mind on the creative side, but the business intelligence we helped Muraflex acquire through the deployment of this incredible sales tool⁠⁠—that’s probably what makes the real success of this project.

Challenges: The Zitto 3-D configurator was a technical challenge as we never implemented this kind of project before on a site. One of the first challenges we met was creating coherent textures with the 3-D customizer. As you can imagine, a wooden object doesn’t react to light the same way that leather and metal do. So for each available material, we created and used “bump map” textures on top of basic reflection settings to give our models a more realistic feel. And that customizer experience required a two-step development. First, we designed it for iPad use only on a conference stand. The great feedback on that first contact allowed us to carry on the next step, which was to provide an interface as intuitive and pleasant on smartphones’ smaller screens. We chose to partition the experience in more, smaller steps to avoid overloading the interface and fit with the device’s smaller screen. In the end, we delivered a great performing tool in a shorter deadline than expected, thanks to a development team who’s always eager to learn.

Navigation design: A highly visual, fullscreen navigation toggled by a burger menu highlights the complete Muraflex line of products with strong imagery. The tool kit (+) button on each of the product pages gathers all resources available for specific products, from downloading brochures or spec sheets to getting in touch with a Muraflex sales representative.

Technology: On the front-end side, we worked straight from our own boilerplate and its advanced transition system. As on most of our websites, we used our experimental smooth scroll library, which is a real advantage for all the scroll-related animations on Muraflex. We used WebGL technology through Three.js for the 3-D Zitto customizer. Our Charcoal CMS is the framework behind the site. It allows the administrator to add and manage most of the content on its platform, including products, specs, resources, contacts and leads. During development, the library dat.gui was a must have to tweak 3-D settings until we got the results we wanted. On top of all that, the Greensock Animation Platform’s libraries enabled us to tighten animations of the 3-D models.