MechanicDesk logo MechanicDesk

Website redesign · 3 concepts · demo build

Same content, three minimalistic
design directions.

Every word, price, feature bullet, phone number and integration from mechanicdesk.com.au is preserved — only the design system changes. Each concept keeps the mechanical/automotive character and the existing orange brand accent, applied with a more restrained, professional layout. Pick one and it becomes the production design.

Reference: mechanicdesk.com.au Content parity: 100% (single-page) Brand accent kept: orange from logo No frameworks · HTML + CSS + vanilla JS
01 · Blueprint

Blueprint

Light · technical · editorial

A light engineering document. Hairline grid, monospace spec labels, dimension lines annotating the product tour, and pricing as a comparison table. Orange appears only as a signal colour.

Sáng, kỹ thuật, kiểu bản vẽ engineering. Lưới hairline, nhãn monospace, đường ghi kích thước quanh khung sản phẩm, bảng giá dạng bảng so sánh. Cam chỉ dùng làm màu tín hiệu.

  • Archivo + Inter + IBM Plex Mono
  • Dimension lines, hex-bolt corner marks
  • Feature index + one detail panel
  • Pricing as a spec comparison table

Reads most “engineering company”: sober, precise, spec-driven.

Open Blueprint →
02 · Graphite

Graphite

Dark · precision · industrial

Graphite dark with orange used as a signal light. Hazard tape, carbon weave, a tyre-tread footer edge, a spec plate on every module, and a full-bleed workshop photo band.

Tối kiểu graphite, cam làm đèn tín hiệu. Băng hazard, vân carbon, dải gai lốp, biển spec cho từng module, dải ảnh xưởng full-bleed.

  • Space Grotesk + Inter + JetBrains Mono
  • Hazard tape, carbon weave, tyre-tread edge
  • Scrolling partner marquee
  • Module chips + spec plate panel

Most premium / performance-workshop feel of the three.

Open Graphite →
03 · Torque

Torque

Warm light · bold · friendly

Warm cream ground with bold display type, a large orange panel behind the product tour and soft rounded cards. Real workshop photography leads, and the 12 modules open one at a time.

Nền kem ấm, chữ to đậm, khối cam lớn sau khung sản phẩm, thẻ bo tròn mềm. Ảnh xưởng thật làm chủ đạo, 12 module dạng card mở rộng từng cái một.

  • Plus Jakarta Sans + Inter
  • Real workshop photography, tread strip
  • Bento “why” grid + ink stats
  • Expandable module cards, one open at a time

Warmest and most conversion-forward — closest to a modern SaaS landing page.

Open Torque →

What is identical across all three

Content

All 12 features with their full bullet lists and highlights, 18 partner integrations with descriptions, all 4 pricing plans across Australia / New Zealand / United Kingdom / Global, both optional addons, the “Suitable for” categories, the three named customers, both blog teasers, support channels, all four phone numbers, both email addresses and the About us text.

The product tour

Each hero runs the same ten screens of the real app inside a macOS browser window — dashboard, booking diary, job card, check sheet, timesheets, invoice, tax invoice, printed job card, inventory and reports — crossfading like a video, with the real mobile app on an iPhone in front of it. Frames come from MechanicDesk's own tutorial videos and the App Store listing; nothing is mocked up.

Minimalism by disclosure

Nothing long is printed in full. The 18 integration write-ups, every pricing inclusion beyond the headline price, the addons, each module's bullet list, the support numbers and the About us paragraph all sit behind click-to-open blocks, so the page stays quiet until you ask for detail.

Automotive character

Automotive iconography (gauge, piston, tyre, oil can, torque wrench, hex bolt), a workshop photo band, and per-concept cues: dimension lines and bolt marks in Blueprint, hazard tape, carbon weave and a tyre-tread edge in Graphite, real workshop photography and a tread strip in Torque.

Functionality

Sticky navigation, mobile menu, scroll progress, back-to-top, scroll reveal, animated counters, region price switcher, module explorer, integration category filter, Google Maps embed and a working contact form (demo confirmation, no backend).

Photography

The old cut-out category images and the two stock blog covers were replaced with licensed Pexels photography, credited in images/pexels/credits.json. Real brand assets — the MechanicDesk logo, the 17 partner logos and the three customer logos — are untouched.