Project Overview

Roofex was designed as a complete, sellable template rather than a single website. The goal was to create a system that a roofing business could adopt in an afternoon, with service pages following one repeatable pattern, CMS collections for projects and articles, and a homepage sequence that moves homeowners from identifying a problem to booking an inspection. Every section was built to handle content changes without breaking its layout.

My Role & Contributions

• Defined the template's page map, including four service pages, About, Blog, Contact, and legal pages.

• Designed the full UI system, covering typography, spacing, colour tokens, and component states.

• Built reusable components for service cards, process steps, service areas, testimonials, and FAQs.

• Set up CMS collections for services, projects, and blog posts so content scales without creating new pages.

• Developed the complete template in Framer with responsive breakpoints across all pages.

• Added measured motion and hover states that feel professional rather than decorative.

• Prepared the template for marketplace standards, including consistent naming, layer organisation, and documentation-friendly structure.

Design Highlights

• A single service page pattern that works equally well for installation, repair, restoration, and maintenance.

• A four-step process section that sets expectations before asking visitors to book an inspection.

• A service area block that allows businesses to showcase local coverage without requiring custom design work.

• Portfolio and testimonial sections connected to the CMS for effortless content updates.

• Booking CTAs repeated at natural decision points instead of after every scroll.

• Component variants that remain consistent even when text length or image ratios change.

Tools Used

• Figma

• Framer

• Framer CMS

Challenges & Solutions

Challenge

Templates often break when buyers replace placeholder content with longer copy, different image ratios, or fewer services.

Solution

I built every section using flexible stacks with defined minimum and maximum states, then tested each layout with short, long, and missing content before publishing.

Outcome

• A complete multi-page roofing template ready for marketplace listing.

• A reusable component library that keeps customisation fast and safe for non-designers.

• CMS-driven services, projects, and blog sections that scale as the business grows.

• Consistent responsive behaviour across every page and breakpoint.

• A conversion-focused user journey built around inspection bookings and quote requests.