M3 Glass Technologies came to Redwerk with a ready-made website, willing to create a configuration tool to enhance their customers’ online experience. In a physical store, clients can quickly reach a consultant for assistance; however, when they purchase online, the only options left are either to fill out the contact form or to rely on self-service.
M3 Glass Technologies asked us to design an interactive visualization…
tool so that customers could bring their ideas to life. For that, M3 Glass required us to create 3D models of a glass door and wall so that patterns could be applied on top of them.
One of the main requirements was to make the design responsive, focusing on a large Mac, latest versions of iOS and Android tablets, and a regular laptop. Of course, we wanted to make the interactive tool mobile-friendly as well.
The design team created separate 3D images of a glass wall and floor so that later the patterns from the client’s menu could be superimposed on these transparent backgrounds. M3 Glass Technologies provided us with the patterns catalog, and our part was to enable the transfer of the pattern onto the glass model with the help of HTML and CSS.
On top of that, our designers created an interface for the interactive tool so that M3 Glass consumers could easily visualize their glass-design ideas and customize the available pattern to their liking.
Initially, we worked with CSS mask and background properties to display the required pattern; however, Edge doesn’t support this approach, so we needed to find another way of displaying images. We had to change the SVG color/pattern on the back-end for all possible site modules.
We used transformation matrices for glass patterns in SVG. Everything worked well, but we noticed that not all designs got adapted (some of them did not change in color, whereas others were distorted in structure). Thus, we needed to check all the templates and bring them all to the same format.