In response to your Web Build Brief, this document presents our platform recommendation, answers your key questions, and outlines how we'll deliver both the studio site and shop redesign — on time for the book launch.
We evaluated each platform against your specific requirements — bespoke SVG illustrations, Lottie animations, editorial photography, CMS-managed blog, and the warm, tactile aesthetic of the House Nine brand.
| Requirement from Brief | Squarespace | Webflow | Next.js Custom |
|---|---|---|---|
| Lottie animated monogram | Via code injection only | Basic embed | Native lottie-react, full control |
| Entrance animations on scroll | CSS injection | Built-in interactions | Framer Motion + IntersectionObserver |
| Custom SVG illustrations | Images or code blocks | SVG upload | Native React components, animatable |
| Smooth page transitions | Not supported | Limited | Framer Motion AnimatePresence |
| Hover states on project images | Template-limited | Custom interactions | Full CSS/JS control, bespoke |
| CMS blog with categories & RSS | Built-in | CMS collections (rigid) | Custom blog engine, fully flexible |
| "Shop this project" Shopify link | External link only | External link only | Storefront API — live product data |
| Core Web Vitals (LCP < 2.5s) | Variable | Good | Excellent (SSR/ISR + Next Image) |
| Mobile-first responsive | Theme-dependent | Manual breakpoints | Custom responsive, full control |
Shopify remains the commerce backbone — product management, checkout, payments, and customer accounts all stay in the Shopify admin you know. Both frontends are built in Next.js for a unified brand experience.
Your team manages products, orders, and customers exactly the same way as today
housenine.co.uk
Next.js + Express.js + MongoDB
8–10 pages + blog + page builder
Framer Motion + Lottie animations
New domain TBC
Next.js frontend + Shopify Storefront API
Same design system as studio site
Custom product pages, cart & checkout
Existing products & accounts carry over
The editorial home of House Nine — image-led, authoritative, warm. 8–10 core pages with a CMS-managed blog. Built on Next.js for complete creative freedom.
Hero image slider or full-bleed single image. Short headline + subtext. Links to Projects and Services. Press logos strip. "Visit the Shop" CTA.
Split layout: studio overview + founder bio (Jojo Barr). Team grid with names and roles. Client testimonials section.
Filterable project grid. Individual project pages with full-bleed photography, brief summary, and "Shop pieces from this project" CTA linking to shop.
Full Service design offering. Process steps. FAQ accordion. Prominent enquiry form.
Dedicated landing page: cover image, author bio, pre-order links to external retailers, mailing list sign-up. Live by August 2026 at latest.
Logo grid of publications with links to articles. Editorial quotes.
CMS-managed blog. Categories, search, author label. Individual post pages. RSS feed.
Enquiry form (linked to FormCrafts or native). Email address. Social links.
Shopify's product management, checkout, and payment processing remain unchanged in both options. The difference is in how the storefront — what your customers see — is built. We present both honestly and recommend the one we believe best serves House Nine long-term.
| Consideration | Option A: Theme | Option B: Next.js Headless |
|---|---|---|
| Design consistency with studio | Different design system | Same components, same code |
| Product page customisation | Theme sections (limited) | Fully custom, editorial layouts |
| Animations & transitions | Basic CSS only | Framer Motion (same as studio) |
| Performance (Core Web Vitals) | Theme-dependent | SSR/ISR + Next Image optimisation |
| Product management | Shopify Admin (same) | Shopify Admin (same) |
| Checkout & payments | Shopify Checkout | Shopify Checkout (same) |
| Customer accounts & trade | Shopify native | Shopify Customer Account API |
| Build time | ~1.5 weeks | ~2 weeks |
| Long-term maintenance | Separate codebase from studio | Shared codebase, one team |
Our recommendation: Option B gives House Nine a truly unified brand experience across both sites. Visitors moving between the studio and shop will feel they're in one world — same warmth, same quality, same attention to detail. The Shopify admin stays exactly the same for your team; the difference is entirely in what your customers see and feel. The minimal extra build time pays for itself in design consistency, performance, and long-term maintainability.
The Shopify admin experience remains exactly the same regardless of which option you choose.
This is the answer to Question 2 in your brief. Your team can update blog posts, project pages, and any other content — without a developer. Drag blocks, edit variables, preview, publish.
A complete redesign of a Victorian family home
Each block is designed for your specific content types. Your team edits the variables — we handle the design.
You mentioned wanting subtle, considered animations — not flashy. Here's our recommended animation stack and how we'll handle each type of bespoke element from your brief.
Our primary animation library. Handles entrance animations, scroll-triggered reveals, hover states, and smooth page transitions. Production-grade, performant, React-native.
For the animated House Nine monogram/logo. Your graphic designer supplies the Lottie JSON file; we integrate with full playback control (speed, loop, scroll-trigger).
Monogram, decorative dividers, section markers, service category icons. Supplied as SVG files by your illustrator. We embed as React components for animation and colour control.
Text and images fading/sliding in gently on scroll. Intersection Observer API + Framer Motion for smooth, GPU-accelerated entrance effects.
Gentle zoom or overlay text on project images. Subtle, tactile feedback that rewards exploration without overwhelming the photography.
Smooth crossfade between project pages using Framer Motion's AnimatePresence. Maintains the editorial, magazine-like browsing experience.
For the graphic designer's reference — these are the formats we'd like to receive:
Exported from Illustrator. Clean paths, no embedded rasters. Outlined text. Artboard = viewBox.
Exported as .json via Bodymovin (After Effects) or Lottie Creator. Keep under 150KB for performance.
High-res JPGs (min 2400px wide). We'll handle WebP conversion, responsive sizing, and lazy loading.
SVG (vector) for web. PNG with transparency as fallback. Current House Nine wordmark in vector format.
Your brief rightly flags SEO as business-critical — housenine.co.uk has accumulated domain authority and press backlinks. Here's how we protect and enhance that.
Two separate sites, one cohesive brand. Visitors should feel like they're browsing one unified House Nine experience.
Aligned with your brief's phasing. Both sites delivered well ahead of the August deadline and book launch.
Platform decision confirmed. Shop name confirmed. Domains registered. Asset inventory completed. Design brief to graphic designer. Design system established.
Week 1Studio site built (staging). All core pages populated with existing content. Page builder & blog CMS complete. Framer Motion & Lottie animation implementation. Design review with team.
Week 2–4Next.js storefront built with Shopify Storefront API. Product pages, collection pages, cart & checkout. New navigation structure. Shared design system with studio site.
Week 3–4301 redirect mapping & implementation. DNS switch. Google Search Console verification. GA4 setup. Book landing page built. Pre-order links and mailing list capture in place. Soft launch.
Week 5–6Both sites live. Post-launch monitoring & crawl error review. Book page ready well ahead of September launch. PR push. Shop lists book as a product.
Week 6+Aligned with your brief's scope table. We've broken the quote into the categories you requested.
| Item | In Scope | Notes |
|---|---|---|
| Studio site build (8–10 pages, CMS blog, page builder) | ✓ | Next.js + Express.js + MongoDB |
| Book landing page | ✓ | Live by August 2026 |
| Shopify shop — Next.js storefront + headless (recommended) | ✓ | Existing products carry over. Alternative: Shopify theme redesign |
| 301 redirect mapping and implementation | ✓ | Both sites |
| Custom domain configuration (both sites) | ✓ | After name confirmed |
| Bespoke animation implementation | ✓ | Framer Motion + Lottie. Assets supplied by designer |
| SVG illustration integration | ✓ | Files supplied by designer |
| Google Analytics 4 setup (both sites) | ✓ | |
| Google Search Console verification | ✓ | |
| Copywriting / content creation | ✗ | Supplied by House Nine team |
| Photography | ✗ | Supplied by House Nine team |
| Graphic design / illustration | ✗ | Commissioned separately |
| Brand identity design | TBC | To be agreed |
| Email marketing platform setup | TBC | Advise on current setup |
Broken down per your request: Studio site build | Shop redesign | Redirects/SEO | Animation.
| Scope Area | What's Included | Days | Hours |
|---|---|---|---|
| Studio Site Build | Next.js frontend, Express.js API, MongoDB, page builder, blog CMS, 8–10 pages, book landing page, hosting setup | 15 days | 120h |
| Shop — Next.js + Shopify Headless | Next.js storefront, Shopify Storefront API integration, product pages, collection pages, cart, checkout flow, customer accounts, navigation restructure, collection restructure, email templates.
If a new bespoke design is provided via Figma: +7 days (56h). |
7 days | 56h |
| Redirects / SEO | 301 redirect mapping & implementation, Google Search Console setup, XML sitemaps, GA4 configuration, Meta Pixel, crawl monitoring | 2.5 days | 20h |
| Animation | Framer Motion entrance animations, Lottie monogram integration, hover states, page transitions, SVG component integration | 2.5 days | 20h |
| Post-Launch Support | CMS usage guidance, answering questions, troubleshooting — ~1 day per fortnight over 2 months after go-live | 4 days | 32h |
| Total | 31 days | 248h |
Note: Total effort is 31 working days (248 hours) at 8 hours/day, Monday to Friday. Post-launch support is spread across 2 months (~1 day every 2 weeks). If a new bespoke shop design is provided via Figma, add 7 days (56h). See the Running Costs section for ongoing monthly infrastructure costs. Detailed development pricing will be provided in a separate commercial quote once scope is agreed.
An honest breakdown of what it costs to keep the lights on each month. We've designed the infrastructure to be lean — no over-engineered cloud services, no surprise bills.
All commerce functionality: product catalogue, inventory management, order processing, secure PCI-compliant checkout, Shopify Payments, customer accounts, trade accounts, discounts, shipping, and tax. The Storefront API is included on all plans — no Shopify Plus required for headless. Your team uses the same Shopify Admin dashboard as today.
A single server running both Next.js applications (studio site + shop storefront), the Express.js API, and the MongoDB database. 4GB RAM is comfortable for this workload. Includes 4TB data transfer/month. Automatic daily backups enabled ($4/mo) — 7-day retention, one-click restore if anything goes wrong. Easy to scale up if traffic grows (upgrade instance with one click, no migration needed).
Global CDN with 300+ edge locations worldwide. Your images, CSS, and JS are cached close to your visitors — London, New York, Sydney, everywhere. Includes free SSL certificates, DDoS protection, and Web Application Firewall. This is how we hit the LCP < 2.5s target on image-heavy pages.
MongoDB runs directly on the same Lightsail server — no separate database service fee. Stores page builder data, blog posts, and CMS content for the studio site. We configure automated backups to S3 for disaster recovery.
To move forward, we'd appreciate your confirmation on these items as outlined in your brief.