Case studyWeb Development
Borsa Ltd
A Calgary contractor's site the studio actually runs: twelve content types, click-to-edit preview, and a quote form that arrives with a scope. Live at borsaltd.ca.
- Year
- 2026
- Client
- Borsa Ltd
- Services
- Website Development · UX/UI Design
- Status
- Live
01Brief
What we were asked
A complete rebuild for a Calgary design-and-build studio: nine page templates, a Sanity content system the studio runs without a developer, and an instant-quote form - live at borsaltd.ca.
02Challenge
Why it was hard
Borsa Ltd is a small Calgary general contractor whose reputation is built on tile work, legal basement suites, and kitchens people actually live in. The site it had did none of that justice. It carried a portfolio of older commercial jobs that no longer represented the business, nothing on the page answered the two questions every homeowner asks first - what does this cost and how long will my house be a jobsite - and publishing a finished project meant emailing a developer.
Two constraints shaped the rebuild. The first was ownership: a contractor cannot file a ticket every time a bathroom is finished, so every heading, photo, price line, and journal entry had to be editable by the studio itself, with a preview honest enough that nobody needs a staging URL explained to them. The second was search equity. The old URLs were indexed and ranking for the terms this business gets hired on, and a rebuild that quietly changed every slug would have thrown that away on launch day.
03The Build
Scroll through the product
01First impression
A trade site that carries itself like a studio
Most contractor sites open on a stock photo and a phone number. This one opens on the studio's own rooms, set in Manrope with a lot of white space and one clear promise. The four numbers under the fold - years building, projects delivered, review average, warranty - are the credentials a homeowner is actually checking for.
02Choose a service
Seven disciplines, one considered list
Instead of seven cards competing for attention, the services read as a short list. Hovering a line swaps the room beside it; clicking opens the full brief with what's included, what it costs, and what the studio needs from you. The whole list is CMS-driven, so adding an eighth discipline is an afternoon for the client, not a release for us.
03The work
The portfolio the business actually has
The projects index leads with the most recent job as a full case-study panel, then filters the rest by type - kitchen and bath, tile, renovation, addition, commercial. Every card is a real project record in Sanity with its own scope, location, duration, and crew size, published by the studio the week the site comes down.
04The case study
Six figures, fixed shapes
Each project gallery is six slots in fixed shapes - an opener, a square, three portraits, and the wide money shot - and the photographer got a delivery guide written against those exact ratios. Intrinsic size is decoded from the asset reference and the editor's crop applied on top, so every frame reserves its true aspect ratio before the image loads. Nothing shifts, nothing letterboxes, and any figure opens fullscreen.
05Price and process
The awkward questions, answered on the page
Five stages from a walk and a notebook to a binder and a year of warranty, then two ledgers side by side: eight things the studio brings, eight things it needs from you, in the week each one happens. Renovation anxiety is mostly uncertainty, and a page that names the allowance schedule before you call removes more of it than any hero image.
06The quote
A form that arrives with a scope
The quote brief asks four questions - what, when, how much, where - before it asks for a name, so the studio opens a real scope instead of 'please call me'. Server-side Zod validation, an email pattern strict enough to keep CRLF out of the SMTP envelope, and a token-bucket limiter in front of the Zoho transport keep that inbox clean.
04Notes
How it runs
The site is Next.js 16 on the App Router, server-rendered on Vercel, with Sanity as the content system behind it. Twelve schema types cover the whole surface - projects, services, journal posts, testimonials, trade partners, certifications, FAQs, the home and about pages, page headers, site settings, and video clips - so there is no hardcoded copy anywhere a client would want to change it. The Studio's Presentation tab renders the live site with every text and key image clickable straight to its field, which is what makes the studio comfortable editing it unaccompanied. A signed Sanity webhook revalidates the affected routes the moment something is published, so an edit is live in seconds rather than on the next hourly pass.
Photography is the product on a contractor's site, so the image pipeline got the most attention. Each project's gallery is six fixed slots - a 4:3 opener, a square, three 4:5 portraits, and a 21:9 panorama - and we shipped the photographer a delivery guide written against those exact shapes. Intrinsic dimensions are decoded from the Sanity asset reference and the editor's crop is applied on top, so every frame reserves the true aspect ratio before the pixels arrive: no layout shift, no letterboxing, no zoomed-in crops. Images are served as AVIF and WebP with a one-year cache, and any gallery figure opens into a fullscreen lightbox.
The quote form is the site's real conversion surface, and it is treated as a security boundary. A multi-step brief collects renovation type, timing, budget band, and neighbourhood, then validates on the server with Zod: a strict email pattern that keeps CRLF out of the SMTP envelope, a phone rule that only ever reaches the escaped mail body, and a token-bucket rate limiter in front of the Nodemailer transport that delivers through Zoho. What lands in the studio's inbox is a scoped brief, not a name and a phone number.
Discoverability was designed in rather than bolted on. Every retired URL from the previous site - twelve project pages and two keyword landing pages - 301s to its nearest live equivalent, and www folds into the apex. The site publishes a sitemap, an RSS feed for the journal, and an llms.txt summary for AI crawlers, and ships HSTS with a full security header set. Vitest covers the content, SEO, and feed helpers, and GitHub Actions gates every push on type-check, lint, and build before Vercel promotes it.
Stack
05Outcome
Where it landed
- Status
- Live
- borsaltd.ca
- Content Types
- 12
- Every page section editable by the studio
- Templates
- 9
- Home, studio, services, projects, journal, contact
- Legacy URLs
- 14
- 301s carrying the old site's search equity
06Craft
The work behind the work
More of the live site: the studio page that runs the founder's story from drywaller to general contractor, the credentials wall with the WCB account and liability cover spelled out, the by-the-numbers panel on the projects index, the journal built for the searches this business gets hired on, a field-guide entry with its own hero figure and service cross-links, and a service brief carrying real Calgary pricing context.
Have a product like this in mind?
We plan, design, and ship - the whole story, start to finish.