Overview
Saskatoon Roofing Co. represents a modern, high-performance landing page designed specifically for local roofing contractors, which serves as the customer-facing front-end for the broader Contractor Growth System. The primary goal was to create a digital presence that not only looks professional but actively works to convert local traffic into qualified, structured leads. This meant focusing heavily on trust signals, clear pricing, and a frictionless estimate request process that plugs directly into a business’s operational workflow.
Live Demo & Dashboard Access
You can explore both the customer-facing site and the internal management dashboard:
- Dashboard Login: sk-roofing-dusky.vercel.app/login
Test Credentials:
- Owner:
mike@saskatoonroofing.ca/password123 - Employee:
sarah@saskatoonroofing.ca/password123
What needed to work
- Seamless, multi-step estimate request and lead capture experience
- Clear presentation of roofing services with transparent pricing
- High-performance, responsive layout that works flawlessly on mobile devices
- SEO-friendly architecture to improve discoverability in the Saskatoon area
- Trust-building sections designed to reduce friction before users contact the business
- Internal dashboard to manage incoming structured leads
- Estimate builder connected directly to lead data for generating and sending quotes for customer approval
Architecture
SvelteKit (Frontend Framework)
↓
Tailwind CSS (Styling)
↓
TypeScript (Type Safety & Logic)SvelteKit was chosen for its blazing-fast performance and excellent developer experience. By compiling away the framework overhead, the site delivers a lightweight, highly responsive experience crucial for users on mobile networks. Tailwind CSS enabled rapid UI development and consistent styling, while TypeScript ensured robust, error-free logic throughout the lead capture flows and dashboard interactions.
Engineering challenges
Conversion-Optimized Lead Capture
The core objective of the site is to generate leads. A traditional, multi-page form often results in high drop-off rates and provides low-quality data (e.g. a simple “I need a quote” message).
To solve this, the estimate request flow was designed as a guided experience. It clearly sets expectations and reduces cognitive load by breaking information into small steps (service type, property details, timeline, photo uploads). The focus was on gathering structured data to qualify the lead without overwhelming the potential customer.
From Website Visitor to Qualified Opportunity
Once a request is submitted, it enters the Contractor Growth System workflow. Instead of having customer information scattered across emails and spreadsheets, the contractor can access it from a central dashboard.
The dashboard provides a clear view of new leads, contacted leads, estimates sent, and won opportunities. The system allows contractors to create estimates directly from the structured lead data - adding items like materials, labor, and disposal - and send a dedicated estimate page to the customer for approval.
Building Trust Through Design
For local service businesses, trust is the primary currency. The design needed to immediately establish credibility.
This was achieved through the strategic placement of trust signals: clear service guarantees, transparent pricing tiers, and professional imagery. The layout prioritizes these elements above the fold, ensuring visitors feel confident in the company’s professionalism before they even read the detailed service descriptions.
What I shipped
- A high-performance, responsive frontend built with SvelteKit
- Guided, conversion-optimized estimate request forms
- A contractor dashboard for tracking and managing structured leads
- An integrated estimate builder and approval workflow
- Trust-building UI components designed to increase conversion rates
Outcome
The result is a fast, professional, and conversion-focused web presence that effectively communicates the value of Saskatoon Roofing Co. while simultaneously acting as the operational starting point for a contractor’s sales workflow. It bridges the gap between marketing and operations.
My role
Frontend Developer & UI/UX Designer - responsible for the overall design concept, technology selection, and frontend implementation using SvelteKit and Tailwind CSS.