Echo SmartLab - Web Design, Web Development & 3D Integration
Launch-ready web presence for a Swiss AI wearable startup
A fully launch-ready, GDPR-compliant web presence for a Swiss AI hardware startup - built to attract investors, early adopters, and technology partners from a standing start.
The brief
Echo SmartLab is a Swiss startup developing a wearable AI-powered voice communication device. Their brief was a launch-ready site capable of holding its own against major consumer tech brands - visually authoritative, technically precise, and fast across all devices.
The result is a full-page scrolling experience featuring a live interactive 3D product viewer, use-case sections, technical specifications, and a lead-capture system built for investors and early adopters.
Client - Echo SmartLab GmbH
Headquarters - Switzerland
Industry - AI Hardware · Wearable Tech
Scope - Design, Development, Mobile Optimisation, 3D Integration
Live site - echosmartlab.com
What we built
Six deliverables. One launch-ready product.

Too many campaigns fail because the ads work but the infrastructure behind them does not. We built every layer in parallel - paid media, landing page, registration flow, and SEO foundations - so no registration was lost between the click and the confirmation email.
Full-Page Scrolling Design
Continuous scroll narrative across Home, Product, Applications, and Characteristics with smooth section transitions.
Interactive 3D Product Viewer

Live model viewer with rotation, zoom, and sticky positioning during scroll. Custom field-of-view control for consistent presentation across all devices.
Full Mobile Optimisation

Dedicated mobile pass resolving Duda breakpoint constraints, stacking context conflicts, and touch interaction across all sections.
Glassmorphism Navigation

Dropdown navigation with device-specific anchor behaviour and correct z-index layering across all breakpoints.
Lead Capture System

Interest form with field-trial opt-in, newsletter checkbox, and database-backed submission for investor and early adopter enquiries.
Custom Loading Overlay & 404 page

Branded screens maintaining visual consistency across the full user journey.
Under the hood
Three significant technical challenges - each resolved with custom solutions built outside of Duda's native capabilities.
| Challenge | Soution |
|---|---|
| Duda mobile stacking context conflicts — mobile live rendering diverges from desktop preview due to isolated stacking contexts in parent containers | Custom JavaScript using IntersectionObserver and getBoundingClientRect() for sticky section title logic. Z-index conflicts resolved by targeting Duda's injected DOM structure directly, verified against live mobile rendering |
| model-viewer pinch-to-zoom on mobile — locking all FOV attributes prevented natural zoom interaction, making the model feel broken on touch devices | A bounded FOV range was preserved deliberately. Fixed starting FOV with a controlled zoom band — natural pinch-to-zoom without allowing the model to zoom out past a usable presentation state |
| Performance budget with 3D viewer and carousels — combined JavaScript weight required careful load management to maintain acceptable page speed | Non-critical scripts deferred to Body End. Carousel assets optimised to WebP under 200KB. JPEG at 80–85% for photographic assets. PNG restricted to transparency-only use cases |
Selected screens
Outcome Statement
A fully launch-ready, GDPR-compliant web presence for a Swiss AI hardware startup — built to attract investors, early adopters, and technology partners from a standing start.
Got a technology product that needs a launch-ready web presence?
We design and build websites for technology businesses that need to establish credibility - with investors, partners, and early customers.
