Kawader — Design & UX Audit

1. Executive Summary

Top 5 wins (ship-ready fixes)

1. Fix canonical URL to https://kawader-cine1.odoo.com (or the recovered domain once transferred) — 1-line Odoo website setting change, immediate SEO impact.
2. Add JSON-LD LocalBusiness on Home + Contact, Product on product pages (snippets below). Currently 0 structured data, 12 routes eligible.
3. Translate AR meta titles — all AR pages currently render "Home | Kawader-Rentals" in English even though the body content is fully Arabic. Fix in i18n_translations.py.
4. Delete the 4 unused design tokens (--kw-border-hover, --kw-text-secondary, --kw-green-soft, --kw-red-soft) and merge the near-duplicate grays.
5. Add missing <label> elements on the 17 shop filter checkboxes (critical a11y; 1 template fix).

Top 5 deferred fixes (next round)

1. Hero value-prop text + trust signals on homepage (currently YouTube video only, no narrative).
2. Tokenize 51 raw rgba(143, 67, 163, X) uses as named opacity tokens.
3. Collapse 6 duplicated .kw-product-card blocks across homepage.css / shop.css / product.css / components.css into components.css only.
4. Close RTL gaps: .kw-feedback-float, .kw-mobile-cta, .kw-process__steps (currently forces direction: ltr, breaking 1→2→3→4 narrative in Arabic).
5. Typography scale: 40 unique sizes → 8-step scale. Spacing: 35 values → 8px-base 8-step scale.

2. Design System Findings

Token hygiene

Typography scale

Current: 40 unique font-size values across 9 CSS files. 9 cluster in a 0.17rem range (0.58, 0.6, 0.62, 0.65, 0.68, 0.7, 0.75, 0.78, 0.8rem) — visual chaos with no rhythm.

Proposed scale:

--fs-xs:   0.7rem   (11.2 px)
--fs-sm:   0.8rem   (12.8 px)
--fs-base: 0.875rem (14 px)
--fs-md:   1rem     (16 px)
--fs-lg:   1.125rem (18 px)
--fs-xl:   1.25rem  (20 px)
--fs-2xl:  1.5rem   (24 px)
--fs-hero: clamp(2rem, 4vw + 1rem, 3.5rem)

Spacing scale

Current: 35 unique spacing/gap values. 10+ cluster in 0.2–0.7rem range.

Proposed 8px-base scale:

--sp-1: 0.25rem (4px)
--sp-2: 0.5rem  (8px)
--sp-3: 0.75rem (12px)
--sp-4: 1rem    (16px)
--sp-5: 1.5rem  (24px)
--sp-6: 2rem    (32px)
--sp-7: 3rem    (48px)
--sp-8: 4rem    (64px)

Component duplication

3. UX Conversion Leaks

These are observed against the live site without survey data; confidence is directional, not quantitative.

4. Accessibility Findings

Axe-core results (WCAG 2.1 AA) across 6 routes × 2 locales × 2 viewports = 24 runs:

Critical: form labels

Shop page filter checkboxes and the contact form inputs are missing <label for=...> associations. On EN+AR desktop runs, shop shows 17 unlabeled form elements; contact shows 4. Fix in the QWeb templates (shop filter widget is an Odoo stock view; may require a snippet override or the existing brand/js/a11y-shim.js to extend its reach to filter checkboxes).

Serious: role-img-alt

Decorative images marked role="img" without aria-label. Usually fixable by either removing the role="img" (if truly decorative) or adding aria-label="" describing the image.

Per-page axe HTML reports under outputs/audits/design-audit-20260415-225451/a11y/.

5. Arabic / RTL Localization

6. Performance

Network waterfall (Home + Product)

Main bundles

Frontend JS: 802 KB wire / 2.77 MB decoded. Frontend CSS: 138 KB wire / 740 KB decoded. These are Odoo's consolidated bundles — not directly shrinkable without dropping modules, but reasonable for v18.

Product images

Sampled 5 products: average primary-image weight ~20 KB. Image optimization is not a priority.

Homepage YouTube embed

Homepage hero uses a live autoplay YouTube embed — contributes ~450 KB document + multiple xhr/fetch calls to youtube.com. On mobile (or slow networks) this is the largest LCP blocker. Replace with a poster image + click-to-play (lazy YouTube loader).

CrUX real-user

Requires CRUX_KEY env var (Google API key). Re-run CRUX_KEY=... node tools/odoo/audit/perf_probe.js to capture 75th-percentile LCP/CLS/INP from real visitors.

7. SEO + Schema

Structured data

0 JSON-LD blocks across all 12 routes (6 EN + 6 AR). Priority snippets:

<!-- Home + Contact: LocalBusiness -->
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "@id": "https://kawader-cine.com/#org",
  "name": "Cine Kawader For Artistic Productions",
  "alternateName": "Kawader Art Productions & Film Services",
  "url": "https://kawader-cine.com",
  "telephone": "+970 59 958 8521",
  "email": "management@kawader-cine.com",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Al-Omaryoon St. 25",
    "addressLocality": "Ramallah",
    "addressRegion": "West Bank",
    "addressCountry": "PS"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": 31.9040, "longitude": 35.2033 },
  "taxID": "562789826"
}

<!-- Product pages -->
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Aputure LS 600d Pro Daylight LED Monolight (V-Mount)",
  "image": "...primary carousel image src...",
  "brand": { "@type": "Brand", "name": "Aputure" },
  "offers": {
    "@type": "Offer",
    "priceCurrency": "USD",
    "price": "... (daily rental rate) ...",
    "availability": "https://schema.org/InStock",
    "url": "..."
  }
}

Meta + canonical

• Canonical URLs all point to https://www.kawader-cine.com/ — the Squarespace domain Kawader is currently recovering. Search engines will de-rank the Odoo storefront and point to the abandoned site. Fix in website settings: update the base URL to https://kawader-cine1.odoo.com/ (or the recovered domain post-transfer).
• AR canonicals use /ar_001/ — Odoo's internal locale slug, not the public /ar/ path.
• Zero <link rel="alternate" hreflang=...> between EN and AR equivalents.

Sitemap + robots

• robots.txt: 118 B, 200 OK
• sitemap.xml: 55 KB, 200 OK — URLs point to kawader-cine1.odoo.com (mismatch with canonical).

8. Proposed Roadmap (Rounds 5–8)

Round 5 Quick wins (1–2 h, low risk)

• Fix canonical base URL in Odoo website settings → Odoo storefront domain.
• Delete 4 unused design tokens; merge --kw-text-muted / --kw-text-secondary.
• Tokenize 51 rgba(143, 67, 163, X) uses as --kw-purple-{8,12,25,40}.
• Add --kw-royal-purple-hover, --kw-royal-purple-active; replace 2 hardcoded hex values.
• Add AR <title> translations to i18n_translations.py.

Round 6 Conversion + SEO (2–3 h)

• Inject JSON-LD LocalBusiness on Home + Contact; Product on product pages; BreadcrumbList on shop.
• Hero value-prop + CTA overlay on homepage YouTube embed.
• Trust-signal band: 3–5 client logos + 2 testimonials pulled from recent WhatsApp confirmations.
• Replace autoplay YouTube hero with poster + click-to-play.
• Emit hreflang alternates between EN and AR equivalents.

Round 7 RTL + A11y polish (2–3 h)

• Close 50-node form-label gap (shop filters + contact form). Extend a11y-shim.js or fix QWeb.
• Remove .kw-process__steps { direction: ltr } on AR.
• Add RTL rules for .kw-feedback-float, .kw-mobile-cta, .kw-loading*, .kw-empty-state*.
• Add visible focus rings; verify keyboard navigation pass.
• Fix role-img-alt — add aria-label="" to 10 decorative-image nodes.

Round 8 Component consolidation (3–4 h)

• Dedupe .kw-product-card* across 4 CSS files → single definition in components.css.
• Dedupe .kw-price-card*, .kw-date-chip*.
• Introduce 8-step font-size scale; migrate 40 raw values.
• Introduce 8-step spacing scale (8px base); migrate 35 raw values.
• Extract inline styles from pages_builder.py (163 inline style="..." attrs per prior audit) into brand/css/contact.css etc.

Appendix — Artifacts

• outputs/audits/image-orientation-20260415-224057/ — A1 portrait/landscape audit (5% portrait / 40 products)
• outputs/audits/design-audit-20260415-225451/B3-a11y-summary.json — axe-core rollup
• outputs/audits/design-audit-20260415-225451/a11y/ — 24 per-page axe HTML reports
• outputs/audits/design-audit-20260415-225451/B5-perf.json — perf probe + bundle sizes + waterfalls
• outputs/audits/design-audit-20260415-225451/B6-seo.json / B6-seo.md — SEO + schema audit
• tools/odoo/audit/{a11y_axe,perf_probe,seo_schema,image_orientation,console_sweep,e2e_flow,image_sweep,link_crawl}.js — re-runnable probes