Coilridge Garage Door Co.
A residential garage-door repair site that starts from what the door is doing.
Concept project · Fictional business demonstration Coilridge is a fictional company, built as a portfolio concept with no client and no customer engagement. AI-generated photographs illustrate the concept, not customer work. No reviews, ratings, credentials, pricing or performance promises are invented. The phone number is in the fictional 555-01xx range and the request form sends nothing.
A 12-route residential garage-door concept: a symptom-led homepage, five service pages, a labelled door anatomy diagram, a demonstration repair request and a matching WordPress theme verified in a local runtime.
Fictional concept, with visible disclosure and noindex in HTML, HTTP headers and robots.txt.
- Type
- 12-route residential garage-door repair concept
- Stack
- Eleventy 3, self-hosted fonts, classic WordPress parity
- Hosting
- Cloudflare Pages; WordPress validated locally
- Status
- Live concept demo, noindex
- Live demo
- coilridge-garage-door.pages.dev
Brief
A door that will not move is an urgent call
A homeowner with a stuck door, a snapped spring or an opener that has stopped responding usually knows the symptom, not the part. The design objective was a high-intent funnel for a local residential service that turns that symptom into a phone call or a service request.
The site keeps four homeowner needs in view:
- Match what the door is doing to a likely cause and the service that fixes it.
- Know which parts are safe to check and which are for a technician only, especially springs and cables.
- Decide between repair, spring or opener work and a new installation without a sales pitch.
- Call a technician first, with a short repair request as the alternative.
All business details are fictional. The case study evaluates the website, not an operating garage-door company.
Method
Reference-led, implemented from scratch
- The references
- Two public garage-door company websites were analysed as design references. They are not endorsements, and no affiliation is claimed or implied.
- What they informed
- Hierarchy only: state the service and area before company story, answer homeowner intent (a broken door now) in the first viewport, organise services around the part that failed, and keep the call where a visitor expects it on every page.
- How it was kept separate
- The analysis was distilled to structural principles in a separate step. Design and code worked from that distillation, not from the reference pages.
- What is original
- Name and mark, typography, colour system, every word of copy, the anatomy diagram, the photography direction and all 13 photo masters, the route structure, the components and every line of markup, CSS, JavaScript and PHP.
- What was not taken
- No reference text, photograph, logo, icon, colour value, CSS or markup. Claims seen on the references, such as reviews, ratings and credentials, were deliberately left out.
Design decisions
Problem, then service, then the call
Every page follows the same order a homeowner thinks in: what the door is doing, what that usually means, which service covers it, and how to reach a technician.
The symptom is the headline
The opening names the two most common emergencies and puts Call a Technician first, with Book a Repair Visit beside it and symptom chips underneath. On phones the header keeps an icon-only call button next to the menu, so the number never pushes the logo or menu off the screen.
Start with what the door is doing
Six numbered symptom panels give the usual causes in plain language, each with its own call button. Springs and loose cables get a yellow safety note, because they are the parts that injure people who try to fix them.
Know your door
An inline SVG diagram of a sectional door, seen from inside the garage, keys six parts to a list. Each part is marked technician only or safe to check, so a caller can describe the problem and knows what not to touch.
Service pages that keep the same call path
Each service page opens with its own safety note where one applies, the same two actions and a numbered process rail. On phones, once 30% of the page has been scrolled, a fixed bottom bar keeps both actions in reach.
One dark band to close
The steel navy panel is the only dark surface on the page and carries the last call to action over an exterior photograph. At 1920px the photograph is capped at its 1536px source width instead of being stretched.
Design system
Cobalt and steel, drawn from the hardware
- Colour
- Hardware cobalt #1E4FC2 for every action, steel navy-black #172230 for text and the single dark band, galvanized #EEF0F2 for alternate panels, and safety yellow #FFD34E only for safety notes and diagram markers.
- Type
- Big Shoulders Display at 700 and 800 for condensed, sign-like headings; Work Sans at 400 and 600 for body text and buttons. Both self-hosted.
- Mark
- A torsion coil drawn over stacked door sections, beside a condensed COILRIDGE wordmark. It reads as garage doors without a stock icon.
- Garage-door hierarchy
- Repair ahead of new doors, springs and cables flagged for safety, a repair-or-replace table instead of an upsell, and a five-step visit rail. Without the logo, the layout still tells you the trade.
Implementation
One static build, one WordPress theme, both checked
- Routes
- Home, a services directory, five service pages (repair, spring replacement, opener repair, installation and maintenance), service areas, about, contact, privacy and a custom 404: 12 routes.
- Photography
- 13 AI-generated masters and 105 responsive AVIF, WebP and JPEG derivatives. Defects were handled by reviewed retouches and delivery crops; none was upscaled.
- Responsive images
- Width-described srcset and sizes on every slot. Live checks found every image decoded as AVIF and none displayed wider than its file.
- Static and WordPress
- A classic theme with editable copy fields and one business-details option. 24 of 24 rendered route pairs matched the static site at two widths, 118 assets were byte-identical and 24 editor checks passed. It was verified in a local runtime and is not deployed as WordPress.
- Analytics
- Call, CTA and form events are marked in the HTML, with GA4, Tag Manager, Search Console and consent as disabled injection points. No analytics script ships, and the demo form sends nothing.
- Indexing
- Intentionally noindex in HTML, HTTP headers and robots.txt, as a concept. Lighthouse SEO is therefore not shown; its only failing audit is crawlability.
Measured results
Measured on the live concept
Lighthouse 12.8.2; one lab run per page and device on 22 Sep 2026. Not field data or a multi-run median.
| Page / device | Performance | Accessibility | Best Practices | LCP | CLS |
|---|---|---|---|---|---|
| Home, mobile | 99 | 100 | 100 | 1.98 s | 0 |
| Home, desktop | 100 | 100 | 100 | 0.51 s | 0 |
| Garage Door Repair, mobile | 100 | 100 | 100 | 1.38 s | 0 |
| Spring Replacement, mobile | 99 | 100 | 100 | 1.84 s | 0 |
Measured
- 12 live routes and 131 files byte-identical to the release build.
- 22 live axe runs across 11 routes at two widths, zero reported violations.
- 72 live route and width checks with no console errors, CSP violations or failed requests.
- Custom 404, HTTPS redirect, strict CSP and noindex headers.
Not claimed
- Leads, bookings, sales or customer acquisition.
- Conversion lift or any other business outcome.
- Field Core Web Vitals or real-user INP.
- A production WordPress hosting deployment.
- Search ranking. The concept is noindex by design.
Credits
Credits and disclosure
- Concept project. Coilridge Garage Door Co. is a fictional business demonstration; there was no client, no real company and no customer engagement.
- Design, copy, photography direction, build, QA and deployment: Tarkenil Studio.
- Reference-led: two public garage-door company websites informed hierarchy only. No copy, photograph, icon, colour, logo or markup was taken from them, and no affiliation is claimed or implied.
- Typefaces: Big Shoulders Display and Work Sans, both under the SIL Open Font License 1.1, self-hosted.
- Photography is AI-generated and illustrative. It shows no customer property, staff or completed work.