Overview
The brief, in full
William Penn needed a complete rewrite of their e-commerce storefront — faster, more mobile-friendly, and built on a modern stack. Built by a team of four in Next.js and shipped within a year.
Platform
Next.js, deployed on Vercel
Core Tech Stack
Rendering Strategy
Performance & SEO
Client
William Penn · India
Key Features
Development Process
How it was built
A deliberate, phased approach — from discovery through to production delivery.
01
Discovery & Audit
Audited the legacy storefront for performance bottlenecks, broken mobile flows, and SEO gaps. Benchmarked against pen retail peers (Cult Pens, Goulet Pens, Pen Heaven) and premium retail sites known for strong product discovery. Mapped the full user journey: homepage → brand page → collection → PDP → cart → checkout. Aligned on must-have v1 features with the William Penn team.
02
Architecture & Project Setup
Chose Next.js for its hybrid rendering model: SSR for product and category pages (real-time stock and pricing), SSG for brand landing pages (stable content, maximum speed), and ISR for editorial and blog content. Set up TypeScript, Tailwind CSS for the design system, and a REST API layer for the product catalogue and order management system.
03
Design System & Component Library
Built a product-first design system: clean white surfaces, a neutral serif/sans type pairing, and considered micro-interactions for hover states and cart updates. Every component was built mobile-first and tested across breakpoints. Developed a shared component library (product cards, brand tiles, mega-nav, filter sidebar) used consistently across all page templates.
04
Product Discovery & Search
Implemented a faceted filtering system for browsing by brand, nib type, ink type, price range, and material. Built brand storefront pages with featured products, brand stories, and editorial content. Integrated site search with real-time suggestions and ranked results. Added product comparison and wishlists to support high-consideration purchases.
05
Performance & SEO
Optimised every critical page for Core Web Vitals: next/image for automatic format conversion and lazy loading, font optimisation via next/font, above-the-fold resource prioritisation, and route-level code splitting. Added structured data (Product, BreadcrumbList, Organization) for Google rich results. Clean URL architecture and automated sitemap generation for full crawlability.
06
QA, Staging & Launch
End-to-end QA across 15+ device and browser configurations. Full checkout flow tested across all payment methods. SEO audit using Lighthouse and Screaming Frog before go-live. Staged rollout with zero-downtime deployment on Vercel, DNS cutover with immediate rollback capability. Post-launch monitoring via Vercel Analytics and Google Search Console.
A modern storefront worthy of the world's finest writing instruments — fast, beautiful, and built to last.
Reflection
What I learned
What went well
Shipping a complete e-commerce platform with a four-person team in under a year required ruthless scoping and strong component reuse. Next.js's hybrid rendering model was the right call — SSR where freshness mattered (PDPs, cart), SSG everywhere else, which kept build times short and page loads fast.
- Next.js hybrid rendering kept performance high without sacrificing real-time data
- Tailwind's utility-first approach enabled consistent design at high velocity
- SSG brand pages meant instant load times for William Penn's most trafficked content
- Tight team of four meant clear ownership and no coordination overhead
Challenges Overcome
Migrating a large product catalogue from the legacy platform without data loss or SEO regression required careful URL mapping, 301 redirects for every old URL, and redirect testing at scale before cutover. Building a performant filter system for thousands of SKUs across 100+ brands needed thoughtful API design to avoid over-fetching.
- 301 redirect mapping for all legacy URLs to preserve SEO equity
- Filter system designed around API-side faceting to avoid client-side performance issues
- Image pipeline: standardising product photo formats across 100+ brand suppliers
- ISR cache invalidation strategy for product pages with live stock changes
What I'd Do Differently
With more runway, I'd invest in a headless CMS (Contentful or Sanity) for the editorial and brand content, giving the William Penn marketing team full autonomy over page content without developer involvement. I'd also explore adding a pen recommendation quiz — a high-engagement feature for customers who are new to fine writing instruments.
- Headless CMS for marketing team content autonomy
- Pen recommendation quiz for new-to-fountain-pen customers
- Progressive Web App with offline browsing for product research on the go
- A/B testing framework on PDP layout to optimise add-to-cart rates
