UI Forge Studio needed what every client needs: a site that explains the work plainly, earns trust, and is easy to maintain. Rather than describe how we build, this project shows it — the site you are reading is the deliverable, and this case study documents the decisions behind it.
The engagement covered the full scope we offer clients: strategy and content, a design system, design and development, SEO architecture, accessibility, and a content model that can grow without a rebuild.
The starting point was an earlier single-product website whose codebase had accumulated the usual debt: a heavy client-side state layer, animation libraries loaded from CDNs, content locked to an old CMS structure, and a handful of long-standing SEO and security defects.
The harder problem was credibility without shortcuts. A new studio has no archive of client logos or testimonials to lean on — and we had ruled out fabricating any. The site had to feel premium and trustworthy using only what was true: the thinking, the writing, the craft of the site itself.
- 01Present the studio in plain language a business owner can act on, without agency clichés.
- 02Build a premium editorial design system that works with zero animation — instant states only.
- 03Keep every claim on the site honest: no fake clients, metrics, portraits, or testimonials.
- 04Structure content in a typed, CMS-ready layer so pages never need a rebuild when the CMS arrives.
- 05Ship with search and accessibility handled as defaults, not add-ons.
Research
A structured research pass across premium studio and agency sites (documented in the repo) established the editorial direction: large display type, ledger-style metadata, hairline dividers, and restraint instead of decoration.
Design system
A small token set — paper, ink, one blue, two hairline tones — with a display serif for statements and a tabular-numeral “ledger” voice for metadata. Documented so every new page starts consistent.
No-animation accessibility
Motion was removed as a design constraint, not an afterthought: no transitions, reveals, carousels, or parallax anywhere. Hierarchy, spacing, and typography do the work; every interactive state updates instantly.
Development
Rebuilt on the Next.js App Router with React Server Components and TypeScript throughout. The legacy state library, animation dependencies, and dead product code were removed rather than carried over.
Content architecture
Page copy, insights articles, and case studies live in typed local content modules behind an async data layer, so a headless CMS can replace the source later without touching a single page.
SEO & migration
Clean locale-free canonicals with hreflang, service-specific landing pages, JSON-LD for the organisation, services, pages, articles and breadcrumbs, a generated sitemap, and permanent redirects mapping legacy URLs to their new home.
- Home
- Work1 case study
- UI Forge Studio website — design, content and Next.js development
- Services7 service pages
- Web design & development
- Website redesign
- Shopify development
- HubSpot websites
- Web application development
- React Native app development
- Website maintenance
- Process
- About
- Insights3 articles · 2 categories
- Website cost: what actually affects the price?
- Website ownership and hosting: what should your business own?
- WordPress vs Webflow vs a custom website: how to choose
- Category · Ownership and support01
- Category · Websites02
- Start a projectenquiry form
- Legalprivacy · terms · disclaimer
- Work1 case study
- Typed local content modules, one per content type
- Async data layer — pages never import a source directly
- A headless CMS replaces the modules without touching a page
The design system treats the page like a well-set document: a numbered ledger of sections, credits-style metadata tables, and full-width hairlines instead of cards and shadows. Dark “ink” bands are used sparingly for contrast, and the single accent blue is reserved for actions and indices.
During the rebuild we also fixed defects inherited from the previous codebase — an inverted API host allowlist, a sitemap that emitted relative URLs, CMS credentials exposed to the client, and diverging locale configurations — each documented in the rebuild audit.
- Server components by default; client JavaScript only where interaction requires it.
- A reusable block renderer shared by insights articles and case studies.
- Netlify-native enquiry form with server-side verification.
- Security headers, cache policy, and image optimisation configured at the platform level.
- AgDisplay · Instrument Serif 400to 10.4rem
- AgHeading · Instrument Sans 600to 4rem
- AgBody · Instrument Sans 4001.6rem
- #faf9f6
- #0b1220
- #1554cb
- #e8e6e0
- --color-blue#1554cb
- --spacing0.4rem
- radius · button0.2rem
- motionnone
- Design system
- Documented editorial tokens and reusable patterns, applied across every route.
- Frontend
- Next.js App Router with React Server Components by default; client JavaScript only where interaction needs it.
- Content
- Typed, CMS-ready content layer — swapping in Contentful requires no page changes.
- Accessibility
- Zero-animation approach verified in a dedicated audit, with semantic structure and visible focus states.
- SEO
- Metadata, canonicals, structured data, sitemap and reviewed legacy redirects, with intent-specific service pages.
- Security
- Inherited issues identified in the rebuild audit and removed — host allowlist, exposed CMS credentials, relative sitemap URLs.