Project Overview
Patrick Flynn’s Auto Body is a family-run collision and repair center based in Vista, California, serving vehicle owners across North County San Diego including San Marcos, Carlsbad, and Oceanside. The shop offers eight distinct service lines — collision repair, auto painting and refinishing, frame repair and laser alignment, mechanical repairs, routine maintenance, free towing and detailing, Sprinter van and large vehicle specialist work, and custom auto services — positioning it as a full-service shop rather than a single-discipline repair facility. With a 4.2-star Google rating across 52 reviews and partnerships with parts and suspension brands including Fuel, Whiteline, Air Lift, and Nankang, the business needed a website that matched the quality of its physical work and established its credibility as a local repair authority before a visitor ever picks up the phone.
Business Goals
The client needed a complete Figma-to-WordPress build that would serve as the shop’s primary digital presence and local lead generation channel. Beyond a clean, professional design conversion, the site needed to give prospective customers a visual understanding of the repair process before booking, showcase completed work through both a photo gallery and a dedicated video gallery, and make the enquiry and contact path as straightforward as possible. For a local auto body shop, the website’s job is to convert a visitor who arrived through a local search into a phone call or a contact form submission — and every section of the build was planned around that goal.
Website Strategy
The page architecture follows the decision journey of a customer who has just experienced a collision or is evaluating repair shops for the first time: services overview, the step-by-step repair process, completed work evidence through the gallery sections, social proof through testimonials and Google Reviews, and a clear contact path. The Resources section — branching into a Blog and a Video page — was built to serve a secondary purpose beyond immediate conversion, providing locally relevant automotive content that supports the shop’s search visibility for Vista and surrounding area queries over time. Service area specificity is built into each individual service page — Collision Repair in Vista, CA; Frame Repair and Alignment in Vista, CA; Mechanical Repairs in Vista, CA — giving the site geographically targeted landing pages for the service-plus-city-name searches most likely to bring in relevant local traffic.
Design & Development Process
The Figma design arrived with a strong automotive visual identity — dark header, bold hero typography, and a structured services section with individual service cards linking through to dedicated service pages. Converting this to Elementor required careful attention to the hero slider section, which cycles through multiple background images with consistent typographic overlay positioning, and to the brand logo carousel, which scrolls through the shop’s vehicle manufacturer affiliations — Lexus, Honda, Mazda, Jaguar — and parts brand partnerships continuously.
The five-step repair process section was built as a numbered visual timeline — Free Estimate, Disassembly, Repair and Paint, Refinishing, Delivery — using Elementor’s timeline widget with custom CSS applied to match the Figma design’s specific connector styling and icon sizing. Placing this section prominently on the homepage was a deliberate content decision: for a service where customers may be unfamiliar with what a collision repair actually involves, a clear visual explanation of the process reduces hesitation and positions the shop as transparent and professional before any contact is made.
Technical Implementation
The build runs on WordPress with Elementor 4.0.7, using the additional custom breakpoints feature to tune intermediate layouts at tablet-width independently from desktop, and Elementor’s external CSS print method to keep render-blocking styles off the critical path. SVG font icons were enabled for sharper icon rendering across the service cards, repair process steps, and contact section.
The image gallery on the homepage was built as a lightbox-enabled grid, allowing visitors to click through to full-resolution versions of completed repair and paint work without leaving the page. Custom CSS was applied to the gallery grid to match the Figma design’s specific column ratio and gap treatment, which differed from Elementor’s default gallery spacing.
The video gallery — accessible through the Resources navigation dropdown and displayed as a dedicated page — was built using the Plyr video player, configured with a facade-loading pattern that displays a thumbnail and play button placeholder until the visitor clicks, preventing the full Plyr and video asset bundle from loading on page entry. This is particularly important on a gallery page with multiple embedded videos, where simultaneous embed script loading would noticeably impact page performance. The Plyr player was styled with the shop’s brand color applied to the play button and progress bar, keeping the player visually consistent with the site rather than defaulting to Plyr’s standard blue.
Google Reviews integration was configured to pull and display the shop’s Google Business Profile rating and review count directly on the homepage, giving visitors a verifiable trust signal that sits outside the shop’s own control — which carries more credibility than internally managed testimonials for a local service business.
User Experience Improvements
Separating the image gallery from the video gallery into distinct sections — the image gallery on the homepage, the full video gallery under Resources — reflects the different browsing behavior each medium supports. Visitors browsing quickly through the homepage benefit from seeing a compact image gallery of completed work without committing to watching a video. Visitors who want deeper evidence of the shop’s quality and approach can navigate to the dedicated Video page and watch extended demonstrations at their own pace. The newsletter signup in the footer captures returning visitor contact information for customers who are not yet ready to book but want to stay connected with the shop’s content and promotions.
Performance Optimization
Plyr’s facade loading pattern was the most significant single performance decision on this build, given that the video gallery page could easily have become the slowest page on the site if multiple video embeds loaded their full scripts simultaneously. Image assets across the homepage gallery and service pages were delivered in WebP format and sized to display dimensions rather than full upload resolution. Elementor’s external CSS print method and font-display: swap Google Font configuration kept the homepage load time clean despite the hero slider, brand logo carousel, service grid, and gallery sections all rendering within a single page.
Mobile Optimization
Elementor’s additional custom breakpoints feature was used to handle the brand logo carousel, repair process timeline, and services grid at intermediate screen sizes — the timeline in particular required careful mid-breakpoint handling to transition from a horizontal numbered sequence on desktop to a clean vertical stack on mobile without losing the visual connection between steps. The Plyr video player scales correctly across all breakpoints natively, and the lightbox gallery was tested across touch devices to confirm swipe navigation behavior between images functions correctly without relying on desktop hover states.
Conversion Optimization
The contact form on the dedicated Contact Us page collects the key information the shop needs to respond usefully — name, phone, email, and message — without adding unnecessary fields that increase form abandonment. The call-to-action in the navigation header — “Call Now” linking to the shop’s direct number — sits above the fold on every page, serving visitors who are ready to call immediately without needing to scroll to the contact section. Google Reviews are positioned at the base of the homepage before the newsletter signup, meeting visitors at the point where they have reviewed the services, process, and gallery and are forming their final opinion before committing to contact.
Final Outcome
The completed website gives Patrick Flynn’s Auto Body a professional, conversion-focused digital presence built from the Figma design with full visual fidelity across all breakpoints. The dual gallery system — lightbox image gallery and Plyr-powered video gallery — provides a depth of completed-work evidence suited to the different ways local customers evaluate a repair shop before making contact, while the service-area-targeted service pages support ongoing local search visibility for the Vista, CA market.
Conclusion
This Figma to WordPress development project for Patrick Flynn’s Auto Body demonstrates how a well-structured local service website — combining a clear repair process explanation, a dual gallery system, Google Reviews integration, and geographically targeted service pages — can give a family-run auto body shop the digital presence it needs to compete confidently for local search traffic and convert arriving visitors into workshop enquiries.