Spanner UK - electronics website design for a modular laptop brand
Spanner UK is the British edition of our modular electronics concept project. It shares the configurator, exploded view and parts marketplace with the global concept, but it is built specifically for Britain: pound sterling with…
Spanner UK is the British edition of our modular electronics concept project. It shares the configurator, exploded view and parts marketplace with the global concept, but it is built specifically for Britain: pound sterling with VAT included, UK English ISO keyboard matrices, Royal Mail trade-in labels, and statutory protections aligned with the Consumer Rights Act and WEEE recycling standards.
Project facts
- Client: Spanner Devices Ltd, London (concept project)
- Sector: Consumer electronics
- Markets: United Kingdom
- Services: Market localisation · Copywriting · Brand adaptation · Consumer electronics e-commerce design · Accessibility (WCAG 2.2 AA) · SEO foundations
- Templates: 13 page templates shared with every Spanner edition
- Stack: Next.js (static export), React and Tailwind CSS; one region pack (copy, data, alt text) and one theme per market
The brief
A hardware commerce site tuned for British buyers and UK consumer law
Selling modular hardware in Britain requires precision around components and consumer rights. Spanner UK swaps ANSI keyboards for UK ISO layouts, recalculates every price to include 20% VAT, and switches shipping terminology to domestic delivery. Trade-in logistics route through prepaid Royal Mail labels, while warranty and return messaging reflects the Consumer Rights Act and UK WEEE regulations.
Designing for United Kingdom
What actually changed between the US and this edition
- Pricing and tax - US edition: USD pricing with tax calculated at checkout · United Kingdom: GBP pricing with VAT included across all products and configurator steps
- Fulfillment - US edition: Shipping with US carrier estimates · United Kingdom: Free UK delivery over £79, dispatched within 5 working days
- Keyboard hardware - US edition: US English (ANSI) as default layout · United Kingdom: UK English (ISO) with double-height return key as standard choice
- Trade-in flow - US edition: Generic recycling path and domestic label · United Kingdom: Prepaid Royal Mail label with battery recycling under the WEEE scheme
- Consumer protection - US edition: Standard manufacturer warranty · United Kingdom: 1-year warranty explicitly layered on top of Consumer Rights Act rights
- Returns policy - US edition: Standard 14-day return window · United Kingdom: 30-day return policy for both assembled laptops and DIY kits
- Finance disclosures - US edition: Monthly installment breakdown · United Kingdom: Representative APR calculations with illustrative credit warnings
- Forms and validation - US edition: ZIP code and US phone formatting · United Kingdom: Postcode validation (EC1V 9HX) and UK telephone formatting (020)
Brand adaptation
The same Spanner, with a local accent
The interface moves away from neon gamer aesthetics towards British industrial craft. A warm stone backdrop supports deep green text and structural panels, while a muted madder accent highlights selections and checkout actions. Instrument Sans provides clean technical discipline in headings, backed by Inter for high-density spec sheets and configurator options.
Homepage, configurator and marketplace
The homepage opens on a scroll-driven exploded assembly of the chassis, showing the mainboard, battery and quick-swap port modules in high detail. Prompts highlight free UK delivery over £79 and next-day dispatches. In the configurator, customers toggle between the pre-assembled build and the DIY Edition, choose UK ISO keyboard switches, and watch VAT-inclusive totals recalculate live with representative APR finance figures.
Compliance, accessibility and trust
- Terms of sale and 30-day return policies calibrated to the Consumer Rights Act 2015, exceeding statutory cooling-off minimums.
- WEEE scheme statements detailing certified disposal for lithium batteries, circuit boards and plastics.
- Consumer credit disclosures showing representative APR and total payable figures without misleading credit pre-approval claims.
- Passes automated WCAG 2.2 AA checks on every page at 360, 390, 768 and 1440 px: no contrast failures, no unreachable controls, no horizontal scrolling.
- A language switcher built from
hreflangsits in the header on desktop and in the footer on phones.
One system, twelve markets
Every visible string lives in one region pack per market (copy, data and alt text), and every colour and typeface in one theme file. This edition needed no new templates or components: a region pack, a theme, local data and legal content made it a different brand experience. For a hardware brand with international plans, a new market becomes a content project rather than a rebuild.
Deliverables
- Market profile: language, formats, legal and seasonality
- Full localised copy across 13 templates, header, footer and forms
- Brand adaptation: palette, type pairing and logo descriptor
- 0 regional photographs (Pexels, credited in
credits.json) - Local legal content
- Accessibility pass (WCAG 2.2 AA, automated) and QA at four screen widths
- Portfolio media: stills, full-page captures, scroll video, OG image, brand board
FAQ
Why does Spanner UK default to an ISO keyboard layout?
British typists rely on the ISO standard for the vertical Enter key, the pipe key beside Left Shift, and dedicated pound sterling symbols. Offering ANSI alone frustrates UK buyers.
How does the configurator handle UK VAT?
All hardware options, storage upgrades and accessories display gross pricing inclusive of 20% VAT from the first configuration step, preventing basket price jumps at checkout.
Is Spanner an active computer hardware retailer?
No. Spanner is a concept project developed by our agency to demonstrate UX architecture, faceted component filtering and product configurators for electronics brands.