Nana Wu
In the intersection of sustainable urban planning and high-end digital design, few collaborations have achieved the depth and technical sophistication of the partnership between Floema—a premier manufacturer of sustainable urban furniture—and the renowned Portuguese design studio Burocratik. Over a two-year period, this synergy resulted in a complete brand overhaul and the launch of a digital platform that manages to harmonize the rigid demands of B2B technical documentation with the fluid, emotional narrative of environmental stewardship.
The Foundation: A Two-Year Brand Evolution
The partnership began with a clear, ambitious directive: to elevate Floema from a specialized manufacturer to a powerhouse positioned alongside Europe’s elite product manufacturers. For Floema, which specializes in signage and urban furniture designed for natural spaces, the challenge was to communicate the immense scale of its catalogue without losing the human-centric philosophy of its mission: "Spaces for people, made for life."
The project was divided into two distinct phases. The first year was dedicated to a comprehensive rebranding exercise, restructuring the company’s internal identity and redesigning its physical product catalogues. This foundational work was critical; it ensured that the brand’s messaging was consistent across every physical touchpoint—from business cards printed on Gmund Beer Ale to brochures finished with Fedrigoni Materica. By the second year, the focus shifted to the digital realm, culminating in the launch of Floema.com, a platform that functions as both a high-performance sales engine and a sophisticated storytelling medium.
Designing Direction: The Anatomy of a Logo
At the core of the new brand identity lies the "F" logo. While seemingly simple, the design is a calculated nod to the company’s legacy in signage. The letter features an intentional twist, transforming the character into a directional arrow that points upward. This design choice serves as a visual metaphor for the brand’s forward-thinking approach to public spaces.
The process of arriving at this final form was far from linear. The studio engaged in extensive visual experimentation, utilizing AI tools like Midjourney to rapidly iterate on sculptural interpretations of the "F." However, as Burocratik’s creative team emphasized, the AI was merely a tool for exploration. Once the concept was solidified, the logo was rebuilt from the ground up in 3D, allowing for precise control over materials, lighting, and animation, ensuring that the brand identity remained rooted in craftsmanship rather than algorithmic convenience.
Typographic Materiality
The brand’s visual language extends into its typography, where the studio sought to mirror the realities of Floema’s manufacturing process. Traditional, clean sans-serif typefaces felt disconnected from the industrial reality of CNC-cut metal and recycled plastics.
To bridge this gap, the studio selected Zimula by La Bolde Vita. This geometric typeface features rounded ink traps that echo the constraints of CNC machining—the very process used to create Floema’s furniture. In a bold move, the designers removed the "R" counter—the inner shape of the letter—mimicking the natural behavior of production processes where internal sharp corners are technically impossible. This detail, framed as "intent" rather than "error," anchors the brand’s visual identity in the physical truth of its products.
The Technical Triumph: 3D Optimization at Scale
The most significant technical achievement of the project is the integration of 230+ interactive 3D product models within the website. Balancing high-fidelity 3D assets with web performance—particularly on mobile devices—required an iterative, and at times grueling, process of optimization.
To manage this, the development team built a custom processing pipeline directly into the headless CMS. Every GLB file uploaded by the client undergoes an automated optimization process using glTF Transform, Meshoptimizer, and Draco. This pipeline cleans, centers, and compresses each model, ensuring that the website remains responsive. By removing unnecessary polygons and screws—what the team referred to as "glamorous but necessary work"—they achieved a level of visual realism that serves both the B2B professional seeking technical specs and the casual visitor exploring the brand’s aesthetics.
Furthermore, the team implemented a custom Three.js setup to handle shadows. Instead of "baking" shadows—which would be static and heavy—the system generates them in real-time from the model geometry, using an adapted PCSS (Percentage-Closer Soft Shadows) implementation. The shadows are cached once the model stops moving, providing a soft, realistic effect without taxing the user’s browser, a testament to the project’s focus on sustainable performance.
AI as a Creative Partner
While the industry continues to debate the role of artificial intelligence, Burocratik’s approach to Floema serves as a case study in intentionality. Beyond the initial logo exploration, AI was used to introduce "living" elements to the website.
The About page features a scene of a riverside, inhabited by a kingfisher and an owl. These elements were generated through AI, but they were not simply "pasted in." They were integrated through extensive human art direction, masked, and glitch-corrected to ensure they felt cohesive with the 3D-modeled environment. The birds follow three distinct animation sequences—entry, idle, and exit—triggered by scroll interactions, creating a seamless, immersive experience that feels organic rather than robotic.
Implications for B2B Digital Strategy
The success of Floema.com holds significant implications for the future of B2B digital design. Traditionally, industrial manufacturing websites have been static, text-heavy, and purely transactional. Floema proves that a high-conversion sales platform can—and should—be an extension of the brand’s soul.
By prioritizing strategy and "sorting the foundations" before a single line of code was written, the project successfully avoided the common pitfalls of digital bloat. The result is a platform that empowers the client with complete autonomy over their content while providing a premium experience that reinforces the brand’s promise: "Spaces for people. Made for life."
Official Perspectives: A Partnership Built on Craft
For Burocratik, a studio with two decades of experience, the Floema project was an opportunity to apply their "fearless" design philosophy to a tangible, real-world product. The studio’s commitment to the project went beyond the digital; it was a partnership of mutual respect where the client, Floema, provided the resources and trust necessary for the designers to push boundaries.
"We enjoy working with real, tangible brands where design can make a measurable difference," the studio noted. "Floema is one of those projects. The client understood what was being built and, beyond simply giving us time, found the resources and commitment to do it properly."
The project remains a benchmark for how digital agencies can act as true business partners rather than just service providers. By merging high-end 3D engineering with a deep, narrative-driven brand identity, the team has not only set a new standard for urban furniture marketing but has also created a blueprint for the future of B2B digital experiences.
Technical Specifications
The robustness of the platform is built upon a modern, high-performance tech stack:
- Framework: Vue/Nuxt.js
- Headless CMS: Sanity
- Hosting: Vercel
- Animation & Interaction: GSAP, Rive, and Lenis for smooth scrolling
- WebGL Magic: Three.js, with custom shader implementations for real-time shadows and outlines.
- Integration: Zoho for product wishlist management.
As the industry looks toward the next generation of web design, the collaboration between Floema and Burocratik stands as a reminder that the most compelling digital experiences are those that ground their complexity in the reality of the physical world. Through rigorous technical optimization and a steadfast commitment to the "Made for life" philosophy, they have successfully brought the natural, human-centric world of urban furniture into the digital age.
Sagoh
Asep Darmawan
Raul Delapena Setiawan
Reynand Wu
Azzam Bilal Chamdy
Ali Ikhwan