Built with Webflow
TOSOO — MedTech Web Design & Webflow Development
Serhii Yurkovskyi
TOSOO — MedTech Website Design & Webflow Development
UI/UX Design
Visual Design
Data Visualization
Motion & Interaction Design
Webflow Development
TOSOO is a Swiss neurotechnology company developing investigational technology for sleep monitoring and neuromodulation. This project brings its AXORA platform, scientific background, and research applications into a clear, structured website.
I handled the complete website design and development, including page layouts, visual assets, animation, and the Webflow build. The experience combines human photography, scientific graphics, and detailed product presentations to explain the technology and guide research teams toward a product inquiry.
Introducing the Technology Through Design
The homepage introduces TOSOO through a deep navy background, large typography, and a waveform visual that connects directly to the product’s focus on brain activity and sleep.
The content moves from a concise introduction to the scientific context and platform itself. This gives visitors a starting point before they explore the more technical product pages.
Bringing People Into the Product Story
The neuromodulation page opens with photography showing the headband in a human setting. It introduces the technology through a conversation around the device, giving the page a practical context from the first screen.
The interface layers the headline, supporting explanation, and primary action over the photograph, using contrast and spacing to keep each element distinct.
Showing How the Platform Fits Together
AXORA combines a headband, a patient app, and research software. Product compositions bring these elements together, showing the relationship between the physical device and the digital tools around it.
Labels and interface details explain each component’s role. The composition gives visitors an overview of the system before the surrounding content introduces its capabilities and specifications.
Giving Scientific Information a Clear Structure
EEG signals, sleep stages, and research metrics are central to the website’s content. I organized these materials into diagrams, data cards, and supporting explanations with a consistent visual hierarchy.
Large figures provide entry points, while labels, contextual notes, and references carry the detail. This structure lets visitors move between an overview and a closer reading of the scientific material.
Creating Distinct Paths Through the Product
The website gives sleep monitoring and neuromodulation their own product pages, reflecting the different questions researchers may bring to the platform.
Each page introduces its application, explains the relevant capabilities, and provides a path toward an inquiry. Shared navigation and visual patterns connect the pages into one website while allowing each product story to develop in detail.
Building a Consistent Visual Language
Deep navy, white, and warm orange establish the visual language across the website. Navy frames key introductions, white gives technical content room to breathe, and orange draws attention to important actions.
Large headings organize the page into clear sections. Smaller labels, fine dividers, and structured grids provide a consistent framework for product details, research information, and supporting content.
Adding Motion to the Reading Experience
Motion extends the visual language through animated headings, transitions, and numerical displays. Waveform imagery connects the animation to the subject of sleep and brain activity.
GSAP brings these behaviors into the Webflow build. The motion gives sections a paced introduction as visitors scroll, while typography and layout continue to carry the main structure of the page.
Making the Research Background Accessible
The company story brings together TOSOO’s academic origins, development milestones, team, and scientific co-founders. These elements give visitors context about the people and work behind the platform.
Across the website, research references and supporting information sit alongside product explanations. Visitors can explore both what the technology does and the background presented by the company.
Taking the Website From Design to Development
I handled the project from the initial page layouts through the live Webflow build. Figma, Adobe Illustrator, and After Effects supported the design and visual work, with Webflow and GSAP used for implementation and animation.
Working across both design and development allowed me to carry the typography, compositions, and interaction details into the finished website.
Explore the live project: tosoo.ch
Have a complex product that needs a clear, distinctive website? Get in touch to discuss web design and Webflow development.
Like this project
Posted Sep 7, 2026
Designed and launched TOSOO's MedTech website in Webflow, with clear product pages, scientific visuals, custom motion, and guided inquiries.
