Project Overview
BrushFloss is a growing multi-location dental care group serving families across Massachusetts. Their services span paediatric dentistry, orthodontics, and adult dental care, delivered through locally owned clinics that prioritise approachability, convenience, and community trust.
The BrushFloss team engaged Web Design Studio, a specialist web design studio, with a comprehensive Figma design file covering 15+ pages and a clear brief: build a professional, conversion-focused WordPress website using Divi that could serve patients searching for dental care by location, specialty, and convenience.
Our web design studio delivered the complete website within 15 days, including all custom functionality, third-party integrations, and a fully responsive layout across every device.
About the Client
BrushFloss operates multiple dental clinic locations across Massachusetts, including Hopkinton, Westborough, Millis, Weston, Wayland, and Grafton. Their model is built around community-based dentistry: locally owned practices with a consistent, trustworthy brand across all locations.
Their patient base is primarily families, parents bringing children for paediatric dental care, adults seeking orthodontic treatment, and seniors needing comprehensive general dentistry. The website needed to serve all three demographics clearly and efficiently, while making it simple for any visitor to find their nearest BrushFloss location and book an appointment in seconds.
The Challenge
The BrushFloss project was one of the most technically complex Divi WordPress builds our web design studio has delivered. The brief required a far wider scope than a standard brochure website:
- 15+ pages, including a home page, service pages for each dental specialty, individual location pages, an about page, blog, contact, and legal pages
- Location-based dentist finder, allowing patients to search for their nearest BrushFloss clinic by city or postcode, with dynamic location listings and clinic-specific detail pages
- Google Maps integration, embedding interactive Google Maps on every location page with directions functionality and accurate clinic pin placement
- Online appointment booking, integrating a third-party appointment scheduling system directly into the Divi layout
- Complex jQuery interactions, including animated counters, smooth scroll effects, parallax sections, interactive service cards, and a multi-step location accordion
- Advanced hover effects and CSS transitions, across service cards, team member profiles, location cards, and CTA buttons, all matching the Figma design exactly
- Responsive across all breakpoints, with specific Divi responsive overrides for tablet (768px) and mobile (480px)
- Brand colour system, a pink/coral and teal palette with custom Divi global presets to ensure consistency across all pages
- Performance optimisation, image compression, Divi performance mode, caching configuration, and Core Web Vitals compliance
- Delivery in 15 days, a firm deadline tied to a planned marketing campaign launch
Web Design and Development Process
Our web design studio structured the BrushFloss project into five clear phases, allowing parallel development of templates and custom functionality while keeping the 15-day timeline on track.
We mapped every Figma frame to a Divi page template, identified reusable section patterns, and set up the global design system, brand colours, heading fonts, button styles, and spacing, as Divi global presets and custom CSS variables before building a single page.
We built the homepage, service category pages (Paediatric Dentistry, Orthodontics, Adult Dentistry), and a reusable location page template in Divi. Each template used Divi's Theme Builder to ensure consistent headers, footers, and sidebars across all pages.
We integrated the Google Maps JavaScript API across all six location pages, with custom-styled map markers matching the BrushFloss brand colour. We also built a jQuery-powered location finder on the homepage, patients can click any location from an accordion list, see a live map preview, and navigate to the full clinic page.
We integrated BrushFloss's third-party appointment scheduling system into every location page and the main "Make an Appointment" CTA. The booking flow is embedded directly into the Divi layout, no external redirects, keeping patients on-site through the full booking journey.
Custom jQuery scripts powered animated stat counters, scroll-triggered section reveals, smooth anchor navigation, and the interactive location accordion. Hover effects, including card lifts, colour transitions, and image overlays, were implemented in pure CSS for maximum performance. Final QA covered five browsers, three breakpoints, and physical iOS and Android device testing.
Technologies & Tools
Key Features Built
Location-Based Dentist Finder
One of the most important conversion features on the site. Patients visiting BrushFloss often don't know which location is closest to them. We built a jQuery-powered interactive location finder on the homepage, a dynamic accordion listing all six clinic locations. Clicking any location expands a live Google Maps preview alongside key clinic details (address, phone, hours). A prominent "More Info" button drives patients to the full location page. This feature significantly reduces the number of steps between a first-time visitor and a booked appointment.
Online Appointment Booking
Every location page and the main homepage CTA feature an embedded appointment booking module. The scheduling system is integrated directly into the Divi layout, no popups, no external redirects. Patients select their location, preferred date, dentist, and appointment type without leaving the page. The integration required custom PHP to pass location-specific parameters to the booking API dynamically based on which location page the patient is viewing.
Google Maps Integration
All six location pages feature fully interactive Google Maps embeds with custom-branded map markers in BrushFloss's coral/pink brand colour. Each map is initialised with the exact clinic coordinates and includes a "Get Directions" link that launches Google Maps navigation. On the homepage location finder, maps update dynamically when a clinic is selected, implemented via the Google Maps JavaScript API with jQuery event listeners.
jQuery Animations & Interactions
The BrushFloss design called for a lively, family-friendly feel, which required a range of custom JavaScript interactions beyond what Divi provides natively:
- Animated number counters, patient count, locations, satisfaction rating, triggered on scroll into view
- Scroll-triggered fade-in and slide-up reveals for content sections and service cards
- Smooth anchor scroll navigation for the "How it Works" and services sections
- Interactive location accordion with jQuery show/hide and map update triggers
- Patient testimonial slider with auto-advance and manual navigation controls
Hover Effects & CSS Transitions
Every interactive element features polished CSS transitions that match the Figma design specifications precisely:
- Service cards, smooth lift with pink drop shadow on hover
- Location cards, background colour shift and border highlight
- Team profiles, image overlay with contact details on hover
- CTA buttons, colour fill transitions with 200ms ease
- Navigation items, underline slide animations
Responsive Design, Every Breakpoint
The BrushFloss website was built with a structured Divi responsive system, not just "it works on mobile" but precisely designed for each breakpoint. The location finder collapses from a two-column layout on desktop to a full-width accordion on mobile. Service cards reflow from three columns to a single column. Navigation transforms to a full-screen mobile menu. Every Divi module has custom responsive overrides set for tablet and mobile, matching the original Figma responsive frames exactly.
Results Delivered
Why Businesses Choose Web Design Studio
BrushFloss needed more than a standard web design agency. They needed a web design studio with proven experience in complex Divi WordPress builds, one that could translate a sophisticated, multi-page Figma design into a fully functional website with real third-party integrations, on a fixed 15-day deadline.
Our studio's deep Divi expertise, structured project management approach, and experience with Google Maps APIs, jQuery development, and third-party booking system integrations made Web Design Studio the right partner for this project.
The result is a professional, high-performing dental group website that serves patients at every stage, from discovering BrushFloss for the first time, to finding their nearest clinic, to booking an appointment in under a minute.
Looking for a Divi Web Design Studio?
If you have a Figma design that needs converting to a professional Divi WordPress website, with custom integrations, Google Maps, booking systems, or complex interactions, Web Design Studio is the web studio built for exactly this level of work. Our design studio specialises in:
- Figma to Divi, pixel-perfect conversion with custom CSS, jQuery, and PHP
- Multi-page WordPress websites, 5 to 50+ pages, delivered on schedule
- Third-party integrations, Google Maps, booking systems, CRMs, payment gateways
- Complex jQuery & animation, scroll effects, counters, sliders, accordions
- Ongoing WordPress support, post-launch updates, maintenance, and new features
Our web design studio handles the full scope, from Figma audit to WordPress setup, Divi build, QA, and go-live. Get a free quote from our design studio →
