- Agency: FocusReactive
- Credit: Eugene Boruhov, Solution Architect and Tech Lead
- Client: Vaisala Group
- Category: Website Design: Technology
- Location: London, United Kingdom
- Project Brief: Overhaul the Xweather website to reflect Vaisala’s evolving brand identity with a visually striking, highly interactive experience that keeps site speed high and gives editors full creative freedom.
Technology websites sell an invisible product best when every screen ties data to the place it describes. FocusReactive rebuilt Xweather, Vaisala’s weather intelligence platform for energy, finance, road, and aviation teams, on a headless Next.js and Storyblok system.
A deep midnight navy palette lets photography and product screens carry the color. Full-bleed shots of storm clouds, a desert solar farm, a city skyline, and dark country roads sit behind an inky blue-black with a faint teal cast, while logos and icons stay a soft misty gray.
Short headlines and proof points open every page. Thin, light sans serif lines like “First to know.” sit centered above three check-mark claims, such as trusted by 40% of Fortune 100, so buyers see credibility before they scroll.
Frosted glass cards place a slice of the product inside each scene. A lightning map rings a target in orange beside a monospace “Lightning ETA 60 min” tag, a finance view charts average temperatures by year, and a road view marks ice, low grip, and potholes with small colored dots.
Monospace pill tabs let each audience find its use case on the first screen. Energy, Finance, Roads, and Severe weather swap the hero photo, headline, and data card, so a commodity trader and a road agency each land on relevant content.
Navigation serves developers and enterprise buyers side by side. Six menus run across the top bar with a free API key link for self-serve developers and a Contact button for sales, and a full sitemap footer groups software, data products, industries, and developer toolkits.
Motion adds life without clutter. GSAP scroll interactions, CMS-controlled Lottie animations, a scrolling client logo marquee, and count-up stats like 15,000+ weather stations keep the dark pages moving.
A modular system hands creative control to the marketing team. Editors build bespoke, animation-rich pages from 77 components with over 100 layout variations, while Storyblok compresses large source photos and SVG icons keep graphics sharp and light.
