77 lines
6.3 KiB
Markdown
77 lines
6.3 KiB
Markdown
---
|
||
target: app
|
||
total_score: 18
|
||
max_score: 24
|
||
na_heuristics: 7,10
|
||
p0_count: 0
|
||
p1_count: 2
|
||
timestamp: 2026-08-16T01-13-38Z
|
||
slug: app
|
||
---
|
||
# Design Critique: app (AyrisLegal Web Application & Landing Surface)
|
||
|
||
**Method:** dual-agent (A: `e6f7d208-1fbc-4daa-b3a3-962cc0a92ccc` · B: `a945c7f8-9c10-46ce-aeef-f16ddea465de`)
|
||
**Target:** `app` (`app/[locale]/page.tsx`, `components/contact-form.tsx`, `app/globals.css`)
|
||
**Design Reference:** `DESIGN.md` ("The Modern Jurist Studio") & `PRODUCT.md`
|
||
|
||
---
|
||
|
||
### Design Health Score
|
||
|
||
Mode: **Persuade** (Marketing & Conversion Landing Surface). *Heuristics 7 & 10 scored n/a per mode-applicability rules.*
|
||
|
||
| # | Heuristic | Score | Key Finding / Rationale |
|
||
|---|---|:---:|---|
|
||
| **1** | Visibility of System Status | **3/4** | Clear "Gönderiliyor…" and confirmation states on form; live pulse in hero. Minor gap: no inline field-level entry feedback. |
|
||
| **2** | Match System / Real World | **4/4** | **Exceptional.** Speaks authentic Turkish legal terminology (*Tensip zaptı, Esas/Karar, Bilirkişi raporu, Çelişki tespiti, UDF/UYAP*). Zero generic fluff. |
|
||
| **3** | User Control and Freedom | **3/4** | Annual/monthly pricing toggle is smooth and reversible; clear section navigation. Success state lacks in-place reset. |
|
||
| **4** | Consistency and Standards | **2/4** | Severe token drift between `globals.css` (Dark Navy/Teal), `page.tsx` (White/Red), and `login` (Blue). Form placement rule violated on home page. |
|
||
| **5** | Error Prevention | **2/4** | Contact form has `noValidate` with no client-side regex or length validation. Unrestricted phone input formatting. |
|
||
| **6** | Recognition Rather Than Recall | **3/4** | Clear side-by-side pricing tier inclusions and visible document artifact previews. |
|
||
| **7** | Flexibility and Efficiency | **n/a** | *Mode: Persuade.* Accelerators and power-user shortcuts are not applicable to a landing page. |
|
||
| **8** | Aesthetic & Minimalist Design | **3/4** | Strong typographic hierarchy with Archivo and JetBrains Mono. Undersized text (<11px) and repetitive eyebrow kickers add minor noise. |
|
||
| **9** | Error Recovery | **1/4** | Critical gap in `ContactForm`: API 400 errors collapse into a generic message without field-level error highlights or recovery guidance. |
|
||
| **10** | Help and Documentation | **n/a** | *Mode: Persuade.* In-depth app docs not applicable; key questions handled in SSS accordion. |
|
||
| **Total** | | **18/24** | **Good (75%)** *(Renormalized over 8 applicable heuristics)* |
|
||
|
||
---
|
||
|
||
### Design Specificity Verdict
|
||
|
||
- **Domain Specificity:** High. Real Turkish judicial procedural artifacts (*Kira Tespiti Bilirkişi Raporu, 2024/100 Esas Tensip Zaptı, Yargıtay Ceza Genel Kurulu*) anchor the product deeply in authentic attorney workflows.
|
||
- **Architectural Clichés Identified:** Repetitive uppercase eyebrow chips above 5 headings, numbered `01 / 02 / 03` section tags, and an abrupt full-dark section inversion (`bg-zinc-950`) in the security module.
|
||
- **Deterministic Scan Summary:** 14 findings detected. True issues confirmed for `gradient-text`, legacy `codex-grid-background` in `globals.css`, undersized UI text (<11px in document badges), `low-contrast` text (`text-zinc-400` @ 2.59:1), and generic `blue-600` styling in `login/page.tsx`.
|
||
- **False Positives Dismissed:** Deep ambient card shadows (`0 30px 70px -25px rgba(...)`) and the `LivePulse` red status dot were verified as intentional tokens documented in `DESIGN.md`.
|
||
|
||
---
|
||
|
||
### Priority Issues
|
||
|
||
1. **[P1] Architecture & Scope Violation: Contact Form embedded on Homepage instead of dedicated `/iletisim`**
|
||
- *Why it matters:* Violates explicit project rules in `AGENTS.md` and `PRODUCT.md` (*"İletişim formu sadece /iletisim sayfasında — ana sayfada olmaz"*), cluttering homepage conversion and eliminating dedicated landing routes.
|
||
- *Fix:* Create `app/[locale]/iletisim/page.tsx` with the complete lead form; replace the homepage bottom section with an editorial CTA card linking to `/iletisim`.
|
||
- *Suggested Command:* `/impeccable layout app/[locale]/page.tsx`
|
||
|
||
2. **[P1] Contact Form Payload Mismatch & Error Recovery Breakdown**
|
||
- *Why it matters:* In `contact-form.tsx`, `org` is sent as `barNo` and `phone` as `message`. Furthermore, `noValidate` bypasses browser validation and API 400 responses swallow field-specific feedback.
|
||
- *Fix:* Align payload keys with backend schema, implement accessible inline validation, visible focus rings, and `aria-live` alert regions.
|
||
- *Suggested Command:* `/impeccable harden components/contact-form.tsx`
|
||
|
||
3. **[P2] Design System Token & Palette Schism (`globals.css` vs `DESIGN.md` vs `login`)**
|
||
- *Why it matters:* `globals.css` configures Dark Navy + Teal, while `DESIGN.md` and `page.tsx` use Paper White + Zinc + Ayris Red, and `login` uses generic `blue-600`.
|
||
- *Fix:* Align `globals.css` `:root` tokens directly with `DESIGN.md` (`--primary: #E61919`, `--background: #FFFFFF`, `--border: #E4E4E7`, `--muted-foreground: #71717A`), purge unused teal/orb styles, and update `login/page.tsx`.
|
||
- *Suggested Command:* `/impeccable typeset app/globals.css`
|
||
|
||
4. **[P2] Mobile Loss of Core Feature Demonstration (*Çelişki Avcısı*) & Legibility Deficits**
|
||
- *Why it matters:* The signature *Çelişki Avcısı* card is hidden on mobile screens (`hidden sm:block`), depriving mobile lawyers of the primary differentiator. Additionally, multiple metadata tags use undersized text (<10px) and low-contrast `zinc-400`.
|
||
- *Fix:* Inline the contradiction detection callout into the mobile document stream, enforce a minimum 11px font size floor, and update `text-zinc-400` to WCAG-compliant `text-zinc-500`.
|
||
- *Suggested Command:* `/impeccable adapt app/[locale]/page.tsx`
|
||
|
||
---
|
||
|
||
### Persona Red Flags
|
||
|
||
- **"Jordan" (Confused First-Timer Attorney):** Hero CTA promises *"Ücretsiz Deneyin"* (implies self-serve trial), but links to a form stating *"Kurucu ekipten biri sizi arar — 15 dakikalık canlı demo"*. This creates expectation mismatch and friction.
|
||
- **"Casey" (Distracted Mobile Attorney on the go):** Loses the entire *Çelişki Avcısı* demonstration on screens under 640px. Pricing toggle buttons have tight touch targets.
|
||
- **"Av. Mehmet" (Litigation Lawyer):** Sees only tenancy disputes (*Kira Tespit Davası*) in previews; wants proof that AyrisLegal handles complex criminal or heavy commercial court dockets.
|