Structural Layout Grid
Bespoke museum-style grid layout designed to catalog different eco-coating colors, texture styles, and test parameters in a clean B2B design system.
The Digital Challenge
Sto Global, a heritage manufacturer of architectural coatings, needed to bridge the gap between their complex, tactile surface finishes (StoSignature coatings) and the digital workspace of architects. The spatial challenge was virtual: how to showcase physical texture depth, light reflection, and tactile grain on a browser without sending physical sample catalogs to every design studio in the region.
The project was bound by strict technical constraints:
- HD Texture Resolution: To realistically represent 3D coating details, the site had to stream high-resolution 4K texture files showing varying relief depths.
- Payload Capping: Target loading speeds had to remain under 1.5 seconds on typical mobile network configurations in APAC, capping the initial package size at 2.5MB.
- Brand Guidelines: All layouts had to follow Sto's strict global corporate identity regulations while adapting user circulation flow to localized B2B architect specs.
Our strategy utilized an optimized WebP/AVIF asset pipeline coupled with a custom lightweight WebGL shader that allows architects to simulate light reflection variations on the finishes at different angles, keeping the payload under 2.1MB.
Blueprint Index
STO-09
Texture Spec Matrix
WebGL texture buffers loaded via progressive decoding. Diffuse and normal maps compressed to 8-bit WebP assets. Memory bounds locked at 120MB GPU cache to support seamless rendering on standard handheld devices.
Stage 1: UI Staging & Design Verification
Material Taxonomy Interface
Classification system sorting coatings by composition, texture scale, and eco-certification ratings, enabling quick filtering for busy architects.
Stage 2: Dynamic Texture Visualizer
Interactive Light Angle Simulation
A custom lighting shader engine simulates dawn, noon, and dusk shadows bouncing off StoSignature rough coatings. This gives architects realistic, tactile confirmation of surface textures online, reducing the need for duplicate physical samples.
Stage 3: B2B Conversion & Sample Ordering
Integrated Sample Request Funnel
A streamlined checkout experience allowing verified design firms to order physical sample swatches directly. The automated design credentials check reduced sample preparation waste by 30% while raising verified specifications by 45%.
The Decision Matrix — Visible Thinking
Option A — Rejected
CMS Template Architecture
Standard CMS-Driven Image Carousels
Deploying a standard template-based website with raw uncompressed 4K images. Low upfront development costs, but payload size ballooned to 18MB, causing an average 9.2-second load time in APAC. Architects bounced before textures rendered. Rejected.
Option B — Executed
STO-10
Bespoke Static Site + WebGL Shader
Bespoke vanilla static architecture utilizing highly compressed AVIF/WebP assets, lazy-loading, and a dynamic HTML5 custom viewer simulating lighting angles. Page weight kept under 2.1MB, loading time dropped to 1.2s, and spec conversions increased by 45%.