Building a High-Performance Digital Experience for DermaSensor

Industry

Medical Technology / Healthcare

Platform

WordPress

GTmetrix

Grade A

About the Client

DermaSensor is a healthcare technology company developing an FDA-cleared, AI-powered device designed to support physicians in evaluating suspicious skin lesions. Its technology combines advanced spectroscopy and AI to provide clinicians with objective information during patient visits.

With a growing range of solutions, resources, physician services and clinical information, DermaSensor needed a digital experience that could communicate complex technology clearly while making it easy for physicians and healthcare professionals to find information, request demos and engage with the brand.

The Challenge

DermaSensor needed more than a visual website refresh. The new platform had to bring together a sophisticated healthcare product, complex clinical information, lead generation and live data into one intuitive digital experience.

The project presented several key challenges:

Creating a completely bespoke website experience that reflected the innovation and credibility of a medical technology company.
Communicating complex technology and clinical information in a way that remained clear and accessible to different audiences.
Connecting live business data to the website so key information could update automatically rather than relying on manual content changes.
Building a physician finder that could help users locate healthcare providers with a DermaSensor device nearby.
Creating a bespoke reimbursement calculator to help physicians understand potential reimbursement opportunities.
Developing custom forms and integrating them with HubSpot to support DermaSensor’s lead-generation and marketing workflows.
Improving the website’s underlying performance to deliver a significantly faster and more efficient experience across devices.

The challenge was ultimately to create a website that felt as advanced as the technology behind DermaSensor, while still being intuitive, conversion-focused and exceptionally performant.

The Solution

Madcraft designed and developed a fully custom digital experience for DermaSensor, combining bespoke UX/UI design with custom development and integrations tailored specifically to the organisation’s requirements. Rather than relying on an off-the-shelf template or standard functionality, the website was designed around DermaSensor’s unique content, audiences and digital workflows. The result is a modern, highly visual website that makes complex medical technology easier to understand while connecting the front-end experience directly to the systems and data DermaSensor relies on behind the scenes.

The Results: Before & After

Performance was a major focus of the rebuild, and the results show a substantial improvement across both GTmetrix and Lighthouse testing. The previous site received a GTmetrix Grade D, with a Performance score of 55%, Structure score of 73%, Largest Contentful Paint of 1.2 seconds, and Total Blocking Time of 2.8 seconds. Following the rebuild, the website achieved a GTmetrix Grade A, with Performance improving to 92%, Structure to 87%, Largest Contentful Paint reduced to 896ms, Total Blocking Time reduced to just 211ms, and Cumulative Layout Shift at 0. Lighthouse testing also showed a significant improvement in overall performance.

The previous site scored 26/100 for Performance, compared with 94/100 following the rebuild. Accessibility increased from 87 to 97, while Best Practices improved from 50 to 96. The Lighthouse performance metrics also improved dramatically, with First Contentful Paint moving from 7.5 seconds to 0.8 seconds, and Largest Contentful Paint moving from 56.4 seconds to 1.0 second in the supplied test results. The result is a considerably faster, more efficient and more polished digital experience, providing a stronger foundation for DermaSensor’s continued growth.

Performance at a Glance

GTmetrix

Grade: D → A
Performance: 55% → 92%
Structure: 73% → 87%
Largest Contentful Paint: 1.2s → 896ms
Total Blocking Time: 2.8s → 211ms
Cumulative Layout Shift: 0.01 → 0

Lighthouse

Performance: 26 → 94
Accessibility: 87 → 97
Best Practices: 50 → 96
SEO: 92 → 92
First Contentful Paint: 7.5s → 0.8s
Largest Contentful Paint: 56.4s → 1.0s

Turning Live Data Into a Digital Experience

One of the standout features of the new DermaSensor website is the live Suspicious Lesions Scanned To Date counter on the homepage. Rather than displaying a static figure, Madcraft connected the homepage graphic to DermaSensor’s live data through HubSpot. Every time the DermaSensor device is used and the underlying data changes, the figure can update automatically on the website. This turns a simple statistic into a living representation of the technology’s real-world use, giving visitors an immediate sense of the device’s growing impact while removing the need for manual updates.

Other Key Functionality

Bespoke Digital Design

Every aspect of the website was designed specifically for DermaSensor. From the overall information architecture and page layouts through to interactive components, animations, content sections and conversion points, the experience was created around the brand rather than adapted from a pre-existing template.
The design balances the credibility expected of a healthcare technology company with a modern, approachable digital experience that makes complex information easier to understand.
HubSpot Integration & Custom Lead Capture

All key website forms were custom designed and developed around DermaSensor’s specific requirements, rather than relying on generic form templates.
The forms were integrated with HubSpot to ensure enquiries and lead information flow directly into the client’s existing marketing and sales ecosystem.
This creates a seamless connection between the website and the team’s internal workflows, while allowing the front-end experience to remain completely aligned with the DermaSensor brand.
Reimbursement Calculator

We integrated a bespoke reimbursement calculator to help physicians explore reimbursement information in a more interactive and accessible way.
Instead of requiring users to navigate complex information manually, the calculator provides a guided digital experience designed around the questions and requirements physicians have when exploring reimbursement.
Real-Time Physician Finder

The website also features an integrated Find a Physician experience, allowing users to discover healthcare providers with a DermaSensor device near them.
The real-time map provides a more useful alternative to a static directory, helping visitors move from learning about DermaSensor to finding a provider in their area.
Custom Content & Interactive Experiences

The website was built around a flexible content structure capable of supporting DermaSensor’s extensive range of clinical, educational and product content.
Custom components were developed to bring complex information to life through interactive layouts, visual storytelling, statistics, resources, videos, calls-to-action and structured content sections.
Responsive, Mobile-First Experience

The website was designed and developed to provide a consistent experience across desktop, tablet and mobile devices.
Every major component was considered across different screen sizes, ensuring that complex content, forms, maps, interactive elements and conversion points remain easy to use regardless of how visitors access the website.

Connecting Design, Data & Technology

The DermaSensor project demonstrates what is possible when website design and development are considered as one connected digital experience. Rather than simply presenting information, the website connects design, live data, HubSpot, custom functionality and performance optimisation into a single platform. From the live Suspicious Lesions Scanned counter to the Physician Finder, reimbursement calculator and custom HubSpot forms, each feature was developed to solve a specific business or user need. The result is a website that not only communicates DermaSensor’s technology, but actively supports how the organisation engages with physicians, generates enquiries and presents its growing real-world impact.

Why Custom Development

DermaSensor’s requirements went far beyond what a standard website build could provide. The combination of bespoke design, live data, HubSpot integration, custom forms, a reimbursement calculator and a real-time physician finder required a digital platform designed around the organisation’s specific workflows. By developing the experience around DermaSensor rather than forcing its requirements into pre-built functionality, Madcraft was able to create a more flexible, scalable and performance-focused website that can evolve alongside the business. DermaSensor’s new website brings together high-end digital design, custom development and real-world integrations to create a digital experience worthy of an innovative healthcare technology company. From the first interaction through to conversion, every element has been designed to make complex information clearer, connect users with the right resources and support DermaSensor’s wider business objectives.

The result is a bespoke, high-performance digital platform that connects people, data and technology — and performs significantly better than the website it replaced.