Responses by Astrid Kunzelmann, lead producer, and Hugo Piquemal, technical director, Merci-Michel.
Background: A collaborative design tool integrated into apparel brand Lacoste’s worldwide loyalty program, the website Lacoste - Members Experience enables members to customize and share polo shirt designs. Lacoste’s studio then selects the most successful creations and produces them as limited editions for its members. The site is one of the most advanced of its kind, in line with Lacoste’s broader desire to present itself as an innovative brand.
Design core: We wanted to create a very powerful customization tool that was also accessible to as many people as possible. Visitors can draw, use stickers and Lacoste patterns, and place the brand’s logo wherever they like on the digital polo shirt. This makes the experience accessible and fun for a very wide audience. More expert users will also be able to download the polo template and edit it with external software, or they can copy and paste any image and text to apply it to the polo.
Challenges: One of the most decisive challenges for the website was its optimization. The site needed to work on all machines on the market—mobile and desktop—and, above all, be smooth. If images were lost during the drawing process due to excessive power demand, then the drawing tool would be unusable. Thanks to this optimization work, it’s now possible to draw using the tool with very good rendering quality.
Special navigational features: As the website is a tool for the general public, it needed to be ready to use in just two clicks. For desktop devices, customization needed to remain accessible but also allow for more expert use and leave room for precision. For mobile devices, there are inevitably fewer elements, so we had to be more intuitive and fun. This meant practically working on two different projects in parallel.
Technology: For the back end, the project runs on Firebase with a Firestore database. The front end is our internal framework based on Vue.js and three.js.
Special technical features: For the polo rendering, we created a rendering pipeline just for this project. Each polo has three different UVs—classic and dynamic elements, elements that loop for very large zooms, and patterns that export to manufacturing. In addition to this, a lot of information passes through data stored directly in the vertices via vertex colors: zones with joins, paint zones and rollovers, among other elements. The site was a real headache to design, but making it all accessible is what we like to do at Merci-Michel.