novalon-website/.impeccable/critique/2026-07-07T12-40-50Z__src-app-marketing.md

---
target: current UI/UX design vs Bain
total_score: 24
p0_count: 1
p1_count: 4
p2_count: 1
timestamp: 2026-07-07T12-40-50Z
slug: src-app-marketing
---
Method: dual-agent (A: design review · B: detector + browser evidence)

## Design Health Score

| # | Heuristic | Score | Key Issue |
|---|-----------|-------|-----------|
| 1 | Visibility of System Status | 2 | Active nav exists; homepage crashes with only “出错了” + toast, no useful status |
| 2 | Match System / Real World | 3 | Chinese enterprise context fits, but terms like “数据中台” / “全链路” are jargon for non-technical buyers |
| 3 | User Control and Freedom | 3 | Standard back/forward works; error page only offers “重试”, no escape path |
| 4 | Consistency and Standards | 3 | Tokens are consistent, but product/solution/service pages use nearly identical card templates → monotony |
| 5 | Error Prevention | 2 | Form labels present, yet the homepage crashes before any prevention can happen |
| 6 | Recognition Rather Than Recall | 3 | Mega dropdown + labeled icons help, but too many cards strain working memory |
| 7 | Flexibility and Efficiency | 2 | No search, no shortcuts, no recent items; power users must browse level by level |
| 8 | Aesthetic and Minimalist Design | 2 | White space is generous, but repeated eyebrow labels, big numbers, and zero imagery create noise + monotony |
| 9 | Error Recovery | 1 | Error boundary text is vague, no diagnosis or recovery guidance |
| 10 | Help and Documentation | 1 | No FAQ, no contextual help, no whitepaper download; pages must self-explain |
| **Total** | | **24 / 40** | **Acceptable — significant improvements needed** |

## Anti-Patterns Verdict

**LLM assessment: Yes, the site reads as AI-generated.**

Tells found across the marketing surface:
- Repeated `01/02/03…` card numbering on product, solution, and service grids — used as decoration, not real sequence.
- Tiny uppercase eyebrow labels (“Product Matrix”, “Industry Expertise”, “Our Process”, etc.) above nearly every section.
- Identical card templates reused across three different business pages: icon + number + title + description + tag + link.
- Side-stripe borders on cards (colored left/right bars on hover) — explicitly banned in the Impeccable register.
- Generic hero metrics (“6+ 产品线 / 100% 自研率 / 全栈技术覆盖”) — the SaaS cliché.
- Zero real photography or screenshots; every page is icons + text.
- Tight Chinese typography with `leading-[0.88–0.92]` and `tracking-tighter`, harming readability.

**Deterministic scan (Assessment B):**
- CLI detector hit 2 warnings: `bounce-easing` in `detail.test.tsx` (test file — noise/false positive) and `layout-transition` (`transition: width`) in `src/components/ui/scroll-progress.tsx` (real).
- Browser overlay on 5 pages found: `layout-transition: width/height`, `low-contrast 2.6:1` for `#94a3b8` text on white (WCAG AA failure), `single-font: pingfang sc` (likely false positive from fallback resolution), and `image-hover-transform` on `<img>`.
- Console shows repeated Framer Motion `useScroll` hydration errors on the homepage: `Target ref is defined but not hydrated`.

**Visual overlays:** Assessment B injected the detector overlay successfully via Playwright headless; screenshots are saved in `/private/tmp/impeccable-screenshots/`. No persistent user-visible overlay is active in the IDE browser.

## Overall Impression

The site has a disciplined token system and a clear four-layer narrative structure, but it currently ships as a generic AI-template consulting landing page. The biggest single issue is that the homepage does not render — it collapses with a React error boundary. Even if that were fixed, the lack of real imagery, repeated card templates, and weak proof points leave it far behind Bain’s editorial confidence.

## What’s Working

1. **Token and design-system discipline** — colors, typography, spacing, and shadows are fully variable-driven in `globals.css`; the cinnabar red `#C41E3A` is used with restraint.
2. **Four-layer narrative is consistent** — every detail page follows Hero → Value → Trust → CTA, giving visitors a stable mental model.
3. **Responsive and motion-respect basics are in place** — `prefers-reduced-motion`, focus-visible, 44×44 touch targets, and mobile safe-area handling show engineering care.

## Priority Issues

### [P0] Homepage crashes on load
- **What**: `http://localhost:3000/` renders an error boundary with heading “出错了” and a “4 errors” toast. Console points to `HeroSection` in `home-content-v13.tsx` throwing `Target ref is defined but not hydrated` from Framer Motion `useScroll`.
- **Why it matters**: For a B2B consulting site, the homepage is the trust front door. A crashing first impression is catastrophic for CEO/CIO/CTO visitors.
- **Fix**: Guard the scroll ref in `HeroSection`; add a robust fallback UI for empty or malformed CMS data; log the error source.
- **Suggested command**: `$impeccable harden`

### [P1] Zero real imagery across the entire site
- **What**: No photography, team portraits, client scenes, or product screenshots anywhere; every page relies on Lucide icons and geometric decoration.
- **Why it matters**: Brand consulting sites are judged first on credibility. Icons alone read as template work and undermine the “沉稳 · 精致 · 可信赖” brand promise.
- **Fix**: Introduce 1–3 high-quality real images on the hero, case-study, and about/team sections. Avoid replacing photography with colored blocks or icon grids.
- **Suggested command**: `$impeccable shape`

### [P1] Product / solution / service pages are the same template
- **What**: All three listing pages use identical “icon + big number + title + description + tag + link” cards. Visitors cannot visually distinguish what type of offering they are looking at.
- **Why it matters**: It reinforces the AI-template feel and causes reading fatigue; it also fails to match the different mental models for products (features), solutions (industry pain), and services (process).
- **Fix**: Give each listing page a distinct module language — product cards can carry feature screenshots, solution cards can lead with industry pain + outcome, service cards can show process steps and deliverables.
- **Suggested command**: `$impeccable distill`

### [P1] Uppercase eyebrow labels repeat on every section
- **What**: Sections are prefaced with labels like “Product Matrix”, “Industry Expertise”, “Professional Services”, “Our Process”.
- **Why it matters**: This is one of the strongest AI-landing-page grammar markers of 2023–2026 and strips away brand uniqueness.
- **Fix**: Keep at most one deliberate label system; otherwise use short Chinese section introductions or let typography alone create hierarchy.
- **Suggested command**: `$impeccable distill`

### [P2] Low-contrast helper text fails WCAG AA
- **What**: Detector measured `2.6:1` for `#94a3b8` text on white; WCAG AA requires `4.5:1` for body text.
- **Why it matters**: Small muted labels and placeholders become unreadable for users with low vision or on bright screens, and it feels cheap.
- **Fix**: Bump helper/muted text to at least `#64748B` on white, or darken the body text toward `--color-text-primary`.
- **Suggested command**: `$impeccable audit`

## Persona Red Flags

**Jordan（首次访问者）**
- 首页直接看到“出错了”，5 秒内无法判断是公司问题还是自己的问题，极大概率离开。
- 即便首页正常，面对 6 个产品卡片和“数据中台”“全链路”等术语，没有解释入口。
- 没有明确的“从这里开始”引导，CTA 多但目的不清晰。

**Riley（压力测试者）**
- 首页崩溃且错误信息模糊，无诊断细节。
- 案例使用匿名客户（“某上市制造企业”），无法验证真实性。
- “500+ 项目验证”与关于页 2014 起步的时间线存在可信度张力。
- 联系表单未展示对 XSS、超长输入、特殊字符等边界情况的处理。

**Casey（移动用户）**
- 主要 CTA“立即咨询”在顶部导航，单手拇指难以触及。
- 联系表单字段多，无智能默认值或自动填充优化。
- 长页面依赖汉堡菜单，无底部快捷导航。
- 首页崩溃在移动端更容易直接返回搜索结果。

**Wei（中国 Fortune 500 CIO，重视结果证明与文化可信度）**
- 首页崩溃是首要红旗——对大型采购决策者不可接受。
- 看不到任何 Fortune 500 级客户名称、具体项目负责人、可验证的业务成果。
- 团队页无真实高管/顾问照片与背景介绍，难以建立“同行者”信任。
- 没有行业认证、合作伙伴背书、白皮书下载等深度信任资产。

## Minor Observations

- Cards use side-stripe borders on hover (`border-left/right` colored accent) — banned decorative pattern.
- `scroll-progress.tsx` animates `width`, causing layout thrash; should use `scaleX` on a transform layer.
- Several H1/H2 lines use `leading-[0.88–0.92]` and `tracking-tighter`; Chinese dense strokes become hard to read.
- Image hover transforms are applied directly to `<img>` elements; if used, keep subtle and respect reduced motion.
- The homepage Framer Motion `useScroll` error repeats 6+ times and is caught by the global error tracker.
- Footer ICP/公安备案 and WeChat QR code are good local trust signals, but buried deep.
- Mixed English eyebrows with Chinese headings make the brand voice feel less decisive.

## Questions to Consider

- If the homepage cannot render in dev, what is the current production deployment status, and is the crash already live?
- Do you have real team photos, client logos, or case-study imagery that can replace the icon grids, or should we source credible stock first?
- Are “01/02/03” numbering and uppercase eyebrows a deliberate brand system, or inherited scaffolding that can be removed?

## Gap vs Bain & Company

| Dimension | Bain | Novalon current | Gap |
|---|---|---|---|
| Imagery | Real people, client scenes, team photography | Zero photography; only Lucide icons | Large |
| Client proof | Named clients, specific business outcomes, quantified impact | Anonymous “某上市制造企业”, generic percentages | Large |
| Data proof | Concrete figures ($300M saved, 2.5× stock price, 90% FTE reduction) | “40% 效率提升 / 3× 决策效率” without source | Medium |
| Interactive entry | “Answer two questions” industry/problem funnel | No personalization; only fixed browse | Medium |
| Thought leadership | Latest briefs, client results, insights on homepage | No recurring insights/research module | Medium |
| Team credibility | Advisor photos, author bylines, team bios | About page lacks real portraits | Large |
| Module diversity | Hero, case carousel, Q&A funnel, article cards, CTA | Three listing pages use the same card grid | Large |
| Stability | No visible crashes | Homepage crashes on load | Critical |

**Core conclusion**: Novalon is currently a feature-list template site; Bain is a trust-building editorial platform. Closing the gap requires, in order: fix the homepage crash, introduce real imagery, replace anonymous proof with verifiable case studies, and diversify the page modules beyond the single card-grid template.