Build in Amsterdam

Moooi Paper Play

Step into an Extraordinary Life

Best Visual Design - Aesthetic / Winner

Build in Amsterdam

Best Visual Design - Aesthetic

Winner

Bridging the gap between the shoppable realm & the extraordinary world of Moooi Rémy Barthez, Lead Developer and Margot Gabel, Lead Designer

Watch

Q: Can you briefly describe your project and the concept behind it?

A: Paper Play, a captivating experience, was conceived as a series of enthralling chapters akin to a theater play's acts. The objective was to showcase and make Moooi's new products shoppable in an unforgettable manner. The hero product, the Plié Plissé Light designed by Lukas Bazle, was the primary inspiration. Drawing from kinetic movements found in nature, the lampshade boasts striking pleats that set the stage for the entire experience.

Q: Once you settled on your idea, what influenced your decision on the chosen technical approach? How did it differ or go beyond approaches you’ve taken in the past?

A: For Paper Play, we revived our beloved tech stack from A Life Extraordinary: PixiJS and GSAP. To achieve a cinematic vibe, we crafted scene-by-scene animations and audio transitions using GSAP timelines and PixiJS features.

Q: What were some of your biggest learning and takeaways from this project?

A: The unique collaborative process with multi-disciplinary artists. After working with Andres Reisinger for Beauty Blooms & Benoit Challand for Defy Gravity, we teamed up with visual artist Merijn Hos, motion designer Jurrian Hos, and Dutch audio design studio KLOAQ to seamlessly weave all elements into an immersive online experience.

Q: What web technologies, approaches, tools, or resources did you use to develop this experience (WordPress, headless, AI, Sublime Text, HTML5, Adobe XD, etc)?

A: The experience is built using the WebGL framework PixiJS, with GLSL filters. We wrote all animations and audio transitions in GSAP timelines. To generate sprite sheets, we created CLI scripts that use TexturePacker to output three formats (PNG, WebP, and Basis) at two ratios and resolutions (desktop and mobile). Finally, the app is integrated into the React-based Moooi.com e-commerce platform, which uses headless WordPress and WooCommerce.

Watch

Q: How did the final product meet or exceed your expectations? What results did you see?

A: The pandemic-prompted digital experience brought Moooi's products to life, reaching a wider audience and inspiring a fresh approach to storytelling. The 3-chapter concept extended to Salone del Mobile '23, featuring a 4th chapter, Divine Dreams, and bridged further the online and offline webAR experiences with a multi-sensorial appearance in Milan.

Q: Why is this an exciting time to create new digital experiences? How does your team fit into this?

A: At BIA, we like to fight e-commerce sameness and monotony by crafting digital flagship stores that push boundaries and enrich our clients' brand universe. These digital experiences elevate e-commerce and conversion rates by seamlessly bridging the online and offline worlds.

Q: How did you reach a good balance of your own creative ideas and technical capabilities with a fair representation of the client’s brand?

A: Our fruitful long-standing partnership with Moooi has fostered a deep understanding of their creative approach and expectations. Constantly challenging each other, our close collaboration with Moooi and their creative partners strikes the perfect balance.

Q: What did your initial moodboard, wireframe, or prototype look like? How did those ideas change throughout the design process?

A: Our initial moodboards blended product photography, paper textures, dancers, and stage design. We embraced a storyboard approach for vertical scrolling. Very early on we defined the main parts of the story: the psychedelic entrance, the watercolor carpets, the cabinet assembling, the dancing crane birds, etc. The creative process refined key story elements through ongoing collaboration with Moooi's team and the Hos brothers.