← All projects

LegitRoofing

An international commercial experience that lets visitors compare roofing services and systems without losing the path to an estimate.

Explore demo Request a quote
portfolio.local/demos/legit-roofing
Legit Roofing hero on desktop
Legit Roofing hero on mobile
  • Tabbed comparison
  • Conversion architecture
  • Geographic coverage
  • International design
Sector
Roofing and construction
Contribution
Visual direction · Conversion · Front end
01

The commercial challenge

A broad technical offer can lead to a direct decision.

Need

The offer combines repair, replacement, installation, maintenance, multiple roof systems, credentials and coverage across South Florida.

Objective

Turn a broad offer into a direct sequence from problem to service, system, credentials, coverage and estimate request.

Designed response

I defined the visual direction, conversion architecture, interactive service console, editorial roofing system and responsive motion.

Built with

HTML5CSS3JavaScriptARIA TabsLenisIntersectionObserver

Validated with

Playwright QA1440 / 390 px
02

Interface evidence

The solution on screen

Legit Roofing original hero
01

Compare services without leaving the page

The console switches between repair, replacement, installation and maintenance while preserving context and the next commercial step.

  • Tablist and tab roles
  • Updated aria-selected
  • Linked panel content
Service comparison adapted to mobile
02

Technical choice becomes visual

Roof systems, credentials and service areas use different rhythms instead of a repeated corporate grid.

  • Photographic cards
  • Ticker and animated SVG
  • Coverage grouped by county
03

Commercial journey

From a roofing problem to a specific request.

  1. 01

    Detect

    The hero starts with problem and urgency.

  2. 02

    Compare

    The console explains four services.

  3. 03

    Choose

    Roof systems add technical depth.

  4. 04

    Request

    Phone and email lead to an estimate.

Legit Roofing mobile composition

Demonstrated capabilities

Comparison, credentials and conversion in one journey.

The accessible console and commercial architecture demonstrate product design applied to an international service business.

Discuss a project
04

Verifiable build

The engineering stays available without slowing the story.

Solution

Accessible tabs compare scope and differences in one place.

Solution

Photography, illustration and density shifts separate service, system and coverage.

Solution

Estimate actions return after every decisive section.

Built features

Interactions with a specific purpose.

  • Mobile menu with aria-expanded
  • Tabbed service console
  • Scroll progress
  • Ticker and animated SVG
  • Roof-system cards
  • County coverage
  • Phone, email and Instagram
05

Implementation quality

A broad offer turned into a clear path.

Responsive

Console, cards and coverage reorder without losing controls or CTAs on mobile.

Accessibility

Tabs use roles, ARIA states, visible focus and semantic navigation.

Performance

Direct JavaScript interactions with primary content available without application hydration.

Delivered

  • Complete commercial architecture
  • Functional four-service comparison
  • Editorial roof-system presentation
  • Structured coverage and contact

Does your offer need this kind of clarity?

Let’s design a website that helps people understand, trust and act.

Tell me what the business sells, what content exists and where the decision stalls today. We will define scope before quoting.

Request a quote