Files
novalon-website/.impeccable/critique/2026-07-06T04-39-49Z__src-app-marketing-page-tsx.md
T
张翔 cf99e7556c chore(infra): 更新 Nginx 部署配置与项目上下文文档
- 更新 CI/CD 子域名反向代理配置
- 调整 Nginx 静态文件服务器配置
- 更新 CONTEXT.md 领域共享语言文档
- 添加 CLAUDE.md 代理工作指南
- 更新 Playwright E2E 测试配置
2026-07-07 06:52:07 +08:00

5.3 KiB

target, total_score, p0_count, p1_count, timestamp, slug
target total_score p0_count p1_count timestamp slug
src/app/(marketing)/page.tsx 24 1 3 2026-07-06T04-39-49Z src-app-marketing-page-tsx

Impeccable Critique: Novalon Website — Bain Consulting + Mobile First

Method: ⚠️ DEGRADED: single-context (Assessment A API error, Assessment B pending — synthesis from direct codebase analysis + deterministic detector)

Design Health Score — Nielsen's 10 Heuristics

# Heuristic Score Key Issue
1 Visibility of System Status 3/4 Scroll progress bar exists, active nav states clear. No loading feedback on navigation.
2 Match System / Real World 3/4 Chinese business terminology appropriate. Some jargon without inline definition.
3 User Control and Freedom 3/4 Mobile menu has Escape key support. No "back to top" button. Breadcrumbs missing on detail pages.
4 Consistency and Standards 3/4 Design token system is excellent. SectionLabel used consistently but IS the eyebrow anti-pattern.
5 Error Prevention 2/4 Contact form submits without visible client-side validation. No confirmation before CTA actions.
6 Recognition Rather Than Recall 3/4 Navigation labels clear. Icons have text labels. Mega dropdown well-structured.
7 Flexibility and Efficiency 2/4 No keyboard shortcuts. No search functionality. One primary path through the site.
8 Aesthetic and Minimalist Design 3/4 Clean, professional. But eyebrow on every section + 6 identical industry cards + zero imagery.
9 Error Recovery 1/4 No visible error handling patterns in marketing pages.
10 Help and Documentation 1/4 No contextual help, no FAQ section, no onboarding guidance.
Total 24/40 Acceptable

Anti-Patterns Verdict

LLM Assessment: The site has a strong conceptual foundation but falls into several AI-generation patterns. The eyebrow labels on every section, the identical industry card grid, and the complete absence of photography are the three biggest tells.

Deterministic Scan: 14 findings across 6 categories — 6 side-tab, 2 gradient-text (dead code), 3 bounce-easing, 2 gray-on-color (admin only), 1 layout-transition.

Additional manual findings: Eyebrow on every section (P1), identical card grids (P1), zero imagery (P0), decorative grid bg defined but unused (P3), continuous looping animation (P2), spring animations throughout (P2), content version sprawl (P2).

Bain Consulting Design Fit

Dimension Score
Typography Authority 3/4
Color Confidence 3/4
Layout Authority 3/4
Trust Signaling 3/4
Professional Photography 0/4
Data Visualization 3/4
Overall Bain Fit 15/24 (63%)

Mobile First Assessment

Dimension Score
Breakpoint Strategy 4/4
Touch Targets 4/4
Content Priority 3/4
Navigation 4/4
Typography Scaling 4/4
Horizontal Overflow 3/4
Performance 3/4
Form Usability 2/4
Overall Mobile First 27/32 (84%)

Overall Impression

Strong architectural foundation — design token system, mobile-first breakpoint strategy, and component architecture are production-grade. But the site reads more as "premium SaaS" than "consulting firm" due to zero photography, eyebrow labels on every section, and restrained near-monochrome palette.

What's Working

  1. Design token architecture: CSS custom properties → Tailwind mapping is textbook-quality. Bain-worthy.
  2. Mobile-first implementation: Breakpoints, touch targets, font scaling, and mobile navigation are all correctly implemented.
  3. Case studies section: Dark-background cards with progress bars, metrics, client quotes — strongest consulting pattern on the site.

Priority Issues

[P0] Zero Professional Photography

Site reads as "tech product" not "consulting firm." Add hero imagery, team photos, client scenario photography.

[P1] Eyebrow Label on Every Section

SectionLabel appears above every heading — impeccable's #1 AI-generation tell. Vary the cadence.

[P1] Identical Industry Card Grid

6 same-shape cards. Differentiate treatment per industry.

[P1] Spring/Bounce Animations Throughout

15+ locations using spring physics. Replace with standard exponential easing.

[P2] Side-Tab Border Accents on Cards

border-l-4 on insight/callout cards. Replace with background tint + top border or icon.

[P3] Dead CSS Utilities

.text-gradient, .text-gradient-brand, .bg-grid defined but never used. Remove.

Persona Red Flags

  • Jordan (First-Time CEO): Text-only hero fails to communicate "real consultants." No client logo wall.
  • Casey (CTO on Mobile): Dense case study text hard to scan. No tap-to-call option.
  • Zhang Wei (Tech Evaluator): No technical methodology visible on homepage. Unqualified metrics.

Minor Observations

  • tracking-tightest not in tailwind config
  • FloatingInkParticles respects reduced-motion but still violates no-continuous-loop rule
  • font-brand (楷体) not used on homepage
  • Multiple content version files (v1-v13) create maintenance debt

Questions to Consider

  1. Should the site use real photography or curated stock as placeholder?
  2. Is the "premium tech" positioning intentional, or should it shift toward "consulting warmth"?
  3. Should case study text use expand/collapse for mobile readers?