Case Study

XenoPatch
Therapy Reimagined,
Trust Built In

A full-scope project for XenoPatch — a certified MedTech startup behind XenoHeat and XenoBelt therapy devices. Brand strategy, visual identity, Webflow development, and custom WebGL animations — from positioning to a live, responsive website.

Year
2026
Services
Brand Strategy · Web Design · Development
Category
MedTech / B2B
Duration
6 weeks
01 Xenopatch
02 xenobelt
03 xenoheat
Hero section of the XenoPatch website — physiotherapy device worn on the lower back, shoulder, and back, with animated wave background
Hero
Problem & Solution section of the XenoPatch website — UI cards showing 90% time savings, energy and maintenance metrics, and therapy quality benefits for physiotherapy practices
Problem & Solution
Use Cases section of the XenoPatch website — feature cards highlighting portability, comfortable application, and insurance reimbursement for physiotherapy clinics and home use
Use Cases
Products Overview section of the XenoPatch website — XenoHeat and XenoBelt physiotherapy devices displayed as CE-certified product cards with descriptions
Products Overview
Product Comparison section of the XenoPatch website — feature comparison table for XenoHeat and XenoBelt showing heat, cold, contrast therapy, and vibration capabilities
Product Comparison
Benefits section of the XenoPatch website — visual overview of key advantages including energy savings, patient satisfaction, and practice efficiency with device lifestyle imagery
Benefits
Social Proof section of the XenoPatch website — client logos and partner cards including clinics, physiotherapy practices, and sports organizations using XenoHeat and XenoBelt
Social Proof
Testimonials section of the XenoPatch website — five-star reviews from physiotherapists and practice owners praising ease of use and time savings in daily clinical practice
Testimonials
XenoPatch website CTA section — trial offer with risk-free testing, transparent rental model, and appointment request form
CTA
XenoPatch website footer — navigation, contact details, newsletter signup, and "Designed & Built by Deplova" credit
Footer
XenoBelt product page hero — CE-certified wearable thermotherapy device for mobile and active therapy use
Hero
XenoBelt product overview — feature cards showing heat and cold therapy ranges, app control, stable temperature, and use cases across clinic, home, and sports settings
Product Overview
XenoBelt features section — device shown on treatment table with icons highlighting time efficiency, personalization, therapy freedom, and clinical value
Features
XenoBelt use cases section — physiotherapist applying the device during active exercises, manual therapy, functional positions, and mobile treatment scenarios
Use Cases
XenoBelt app interface showing temperature, vibration, contrast, and duration controls on mobile — intuitive device management via smartphone
App Showcase
XenoBelt economics section — CE-certified device with benefit icons covering no consumables, high utilization, minimal effort, and flexible rental model
Economics
XenoBelt testimonials section — quote from a practice owner pilot user alongside partner and client logos
Testimonials
XenoBelt CTA section — risk-free trial offer with rental model, instant usability highlights, and appointment request form
CTA
XenoPatch website footer — navigation, contact details, opening hours, newsletter signup, and "Designed & Built by Deplova" credit on dark blue background
Footer
XenoHeat product page hero — CE-certified heat therapy device shown in packaging with wave background and navigation
Hero
XenoHeat pain points section — problem cards highlighting complex handling, high operating costs, inflexibility, and outdated perception of traditional heat therapy
Pain Points
XenoHeat product overview — device on treatment surface with stable temperature chart, instant start and optional vibration highlights
Product Overview
XenoHeat key features section — UI cards showing 90% time savings, low energy and maintenance metrics, portable use across clinic and home settings, and hygienic application
Key Features
XenoHeat Team Benefits section — XenoPatch device packaging alongside benefit icons covering reduced daily workload, safe operation, reliable service, time savings, and working in a modern practice
Team Benefits
XenoHeat Team Benefits section — XenoPatch device packaging alongside benefit icons covering reduced daily workload, safe operation, reliable service, time savings, and working in a modern practice
Team Benefits
XenoHeat patient benefits section — woman receiving heat therapy while lying down, highlighting comfort and positive treatment experience
Patient Benefits
XenoHeat app showcase — two smartphones displaying temperature, vibration, and duration controls for precise real-time therapy management
App Showcase
XenoHeat economics section — CE-certified device with cost cards showing reduced energy consumption, no consumables, and predictable monthly pricing
Economics
XenoHeat testimonials section — five-star quote from a practice owner pilot user alongside partner and client logos
Testimonials
Brand Strategy
Web Design
Webflow Development
WebGL Animation
Medical Device
The Brief

A medtech brand with clinical proof, but no digital presence to show for it

XenoPatch had everything a modern medical brand needs to succeed: EU certification, insurance reimbursement, a device combining heat, cold, EMS and vibration in one. What it didn’t have was a brand system, a clear positioning, or a website that matched the quality of the product.

The ask: build it from scratch. Three interconnected landing pages — a homepage and two product pages for XenoHeat and XenoBelt — designed and developed as a unified system, each capable of standing alone.

The Scope

Three landing pages.
One coherent system.

Three interconnected pages that each stand on their own. XenoPatch, XenoHeat, and XenoBelt share one design system and visual language — but drop a visitor on any of them and they'll get the full picture: the product story, the value, the CTA.
‍
Each page has its own narrative, custom infographics, and a distinct feel. Scroll animations cascade through the content, WebGL shaders bring warmth and tech energy to key sections, and every pixel is responsive across all breakpoints — built clean on Client First from the ground up.

01 Market & Competitor Analysis
B2B & B2C landscape mapping — direct rivals and indirect players to define XenoPatch’s true differentiator.
02 Brand Positioning & Archetype
The Sage archetype, tone of voice, and core messaging framework for all three landing pages.
03 Visual Identity System
Color palette, wave identity, and a warm-to-cold gradient — the visual system reflects what the product does: heat and cold in one device.
04 Design
High-fidelity Figma mockups for Homepage, XenoHeat, and XenoBelt — each with its own hero, narrative, and conversion flow.
05 Webflow Build & Adaptation
Full Client First development of all three pages — shared components, unified design system, clean structure. Every section tested and adapted for desktop, tablet, landscape, and mobile.
06 Animation — motion layer
AOS-triggered cascade reveals, a smooth marquee, and two custom GLSL WebGL shaders — fluid sine-wave geometry on the hero and a soft wave field on the card section. Every motion layer written from scratch.
Look & feel

Visual Identity

Headlines & display
H1 • Lato • Bold • 64px • 4rem • Line height 1.1 • LS -1
Therapy reimagined — Simple. Intelligent. Efficient.
Body font
Poppins • Regular • 18px - 1.125rem • Line height 1.6 • LS O

XenoPatch technologies are already being used in various physiotherapy practices and clinics. Our close collaboration with medical partners allows us to continuously develop our solutions and align them even more closely with the needs of everyday therapeutic practice.

ffffff
Background
f2f7f9
Background
ffc369
Accent
275dad
Accent
f7f6ee
Background
020202
Text primary
gradient
Background
Overview

Highlights

The Sage
01
Brand Strategy First
From archetype (The Sage) and tone of voice to color palette and wave identity — every design decision rooted in strategy.
02
Three Standalone Landings
XenoPatch, XenoHeat, and XenoBelt — each with its own narrative, custom infographics, and CTA. Drop a visitor on any page and they get the full picture.
03
One Connected System
Shared design tokens, navigation, and visual language — three pages that always feel like one brand.
04
WebGL, Live in Browser
Two custom GLSL shaders written from scratch — fluid sine-wave geometry on the hero and a soft wave field on the card section.
05
Responsive on All Breakpoints
Desktop, tablet, landscape, mobile — every section tested and adapted across all three pages.
06
Client First Architecture
Built entirely on Client First — clean class structure, scalable components, easy for any Webflow developer to maintain.
Kind words

Client Feedback

Portrait of Anja Deplova, web designer
Available Now

From Idea to Launch — Let's Talk

Tell me about your project. No pitch, no pressure. WhatsApp replies in 15 min, email within 1 hour.
WhatsAppEmail

More Projects