Back to projects
04 / PROJECTConcept / demo project

Velocity Motors

A premium automotive concept that takes visitors from a curated collection to a considered shortlist, detailed vehicle view and illustrative purchase estimate.

Velocity Motors home page with a performance-car hero and inventory action.
THE PROBLEMWHY IT EXISTS

Make a high-stakes choice easier to compare.

A performance-car catalogue has to show the excitement of each vehicle without hiding the practical questions behind it: specification, condition, price and likely payment. The interface joins discovery, comparison and the next exploratory step so a visitor can assess a car in context.

VISUAL SYSTEMDESIGN DIRECTION

Showroom atmosphere, decision-ready detail.

Near-black surfaces and large vehicle photography create the showroom feel. Warm off-white text, fine dividers and compact uppercase labels organise dense specifications; restrained motorsport red marks active choices and key figures. The layout shifts from editorial full-width moments to comparison tables while keeping the same hierarchy.

Ink #0A0A0A
Bone #F3F1EC
Chalk #F5F5F3
Velocity #C8102E
THE SOLUTION04 PILLARS
01

Find the right specification

A home-page finder passes choices into inventory. Search, filters for make, model, price, year, mileage and vehicle attributes, plus sorting and grid/list views, keep the collection navigable; a no-result state gives a way back.

02

Compare the trade-offs

Visitors can save vehicles and compare up to three side by side. Price, mileage, powertrain and performance sit in aligned rows with differing values highlighted; the shortlist persists in the same browser.

03

Inspect a car in detail

Each listing combines a photo gallery, specifications, equipment, illustrative history and related vehicles. A lightbox and mobile swipe gallery let visitors examine imagery without leaving the decision flow.

04

Explore the buying numbers

Calculators on the vehicle and financing pages adjust down payment, trade-in, term and sample APR for an estimated monthly cost. Inquiry, test-drive and reservation flows save demo records locally; they do not contact a dealer or hold a car.

USER JOURNEYHOW IT WORKS

From collection to informed shortlist.

Discovery controls, vehicle information and an illustrative payment view support a coherent evaluation, even though the transaction steps are demo-only.

  1. 01

    Narrow the collection

    Use the finder or inventory filters, then sort or change view to scan relevant vehicles.

  2. 02

    Compare candidates

    Save favourites and place up to three vehicles in a side-by-side specification table.

  3. 03

    Examine one vehicle

    Open a listing for photos, equipment, history notes and related options.

  4. 04

    Model the next step

    Adjust a payment estimate or try a local-only request flow, with no real booking, credit check or dealer contact.

IN PRACTICESCREENSHOTS
Velocity inventory filtered to Porsche vehicles with sorting, result cards and active choices.
Inventory controls turn a broad collection into a shortlist
Velocity detail page with vehicle gallery, pricing and next-step actions.
The vehicle page balances imagery and facts
Velocity side-by-side comparison of two vehicles and their specifications.
Differences aligned row by row
Velocity financing calculator with adjustable assumptions and an illustrative estimate.
A payment estimate with adjustable inputs
LIVE DEMOINTERACTIVE

Try it in your browser.

18 illustrative vehicles. Saved cars, comparisons and demo requests remain in this browser. Open standalone ↗
UNDER THE HOODTECH

How it is built.

  • Next.js + React + TypeScript static export
  • Tailwind CSS and Framer Motion
  • 18 local demonstration vehicles
  • URL-backed inventory search, filters and sorting
  • Browser-local saved, compared and request state
  • Responsive gallery and keyboard lightbox
  • React Hook Form + Zod validation
  • Client-side amortisation calculator
HONEST LIMITSWHAT IT IS NOT

Where the demo stops.

Velocity Motors is a portfolio concept using illustrative inventory, images, prices and vehicle histories. It has no live stock feed, authenticated account, payment processing, lender integration or dealership messaging. Reservation, appointment, valuation and financing submissions only create browser-local demonstration records; no vehicle is held and no credit is checked. Payment figures are estimates, not offers.

Open Velocity Motors Open standalone in a new tab ↗