Public Access
133 lines
9.2 KiB
Markdown
133 lines
9.2 KiB
Markdown
---
|
||
target: homepage index.html
|
||
total_score: 26
|
||
max_score: 36
|
||
na_heuristics: 10
|
||
p0_count: 3
|
||
p1_count: 3
|
||
timestamp: 2026-08-15T09-22-42Z
|
||
slug: index-html
|
||
---
|
||
# ODOO4projects.com Homepage — Design Critique
|
||
|
||
Method: dual-agent (A: design review · B: detector + browser evidence)
|
||
|
||
## Design Health Score
|
||
|
||
| # | Heuristic | Score | Key Issue |
|
||
|---|-----------|-------|-----------|
|
||
| 1 | Visibility of System Status | 3/4 | Billing toggle gives feedback; order widget never marks server location as required |
|
||
| 2 | Match System / Real World | 3/4 | "No FTP, no shenanigans" is borderline informal for B2B hosting voice |
|
||
| 3 | User Control and Freedom | 2/4 | Order widget: no Escape key, no backdrop-click close, small × target |
|
||
| 4 | Consistency and Standards | 3/4 | Blog post pages still dark/cyan (legacy); order widget uses ~15 inline styles bypassing tokens |
|
||
| 5 | Error Prevention | 2/4 | No validation before Stripe redirect — empty `?location=` possible; no pre-checkout confirm |
|
||
| 6 | Recognition Rather Than Recall | 4/4 | Features fully visible on cards; Most Popular badge kills comparison effort |
|
||
| 7 | Flexibility and Efficiency | 3/4 | Yearly toggle good; domain-count differences buried in feature text |
|
||
| 8 | Aesthetic and Minimalist Design | 3/4 | Blog cards after pricing add density to an already long Persuade page |
|
||
| 9 | Error Recovery | 3/4 | Coupon feedback clear; blog fetch failure shows only "Could not load blog posts." |
|
||
| 10 | Help and Documentation | n/a | Persuade surface; FAQ tab + support link cover it |
|
||
| **Total** | | **26/36** | **Good (72%)** |
|
||
|
||
## Design Specificity Verdict
|
||
|
||
**High specificity — composed for THIS product.** Hero headline ("Deploy Odoo in 5 Minutes"), Odoo-specific features (Quick Git, ODOO Settings Panel, 2 Workers), growth-themed plan names (Side Hustle → Empire), real partner instances in the trust bar, Odoo-specific blog topics, and a custom Stripe routing pattern. The skeleton (icon cards + pricing grid) is a familiar hosting-page pattern, but the content is authentically this product.
|
||
|
||
**Deterministic scan:** Detector exit code 2 (44 findings, regex-only mode — HTML parser modules unavailable, so this is an undercount). Real hits: 12 low-contrast green check icons (#28a745 at 2.9:1–3.1:1), 4 undersized functional labels (9.6–9.92px), 2 skipped heading levels, 5 line-length violations, 17 off-ramp font sizes, 19 off-palette colors. The detector caught the contrast and text-size failures that the human review missed — those are its best catches. False positives: `overused-font` (Inter IS the brand font per DESIGN.md), hero gradient midpoint #2a1a26 (within palette family), rgba(33,37,41,X) opacity tones (intentional accessibility variants), em-dash count (moderate for marketing copy).
|
||
|
||
**Visual overlays:** Browser injection succeeded; 17 anti-patterns reported in console. No reliable user-visible overlay persists (servers auto-exited after idle).
|
||
|
||
## Overall Impression
|
||
|
||
A warm, confident, genuinely specific landing page with a working pricing widget and honest social proof. The bones are good. The problems cluster at the edges: legibility (green checks, tiny labels), dismissal (order widget trap), and ending (blog after the conversion point). The single biggest opportunity: turn the post-pricing ending from content exploration back into a conversion moment.
|
||
|
||
## What's Working
|
||
|
||
1. **The pricing widget plays.** Billing toggle live-updates all four prices; location selector is Odoo-contextual; coupon defaults to "FREE TRIAL" — warm hand-holding most hosts don't do.
|
||
2. **The dark hero band with Warm Sand CTA** creates sharp hierarchy; the "5 Minutes" highlight in #f0cda8 draws the eye to the value prop; Holland.webp at 8% adds texture without noise.
|
||
3. **"Your Company" placeholder in the trust bar** is strategically honest — it invites the visitor to imagine themselves there and links to pricing.
|
||
|
||
## Priority Issues
|
||
|
||
**[P0] Low-contrast green check icons fail WCAG AA** (detector)
|
||
- **What**: 12 `fa-check` icons in #28a745 on pricing cards — 2.9:1 on Warm Paper, 3.1:1 on white.
|
||
- **Why**: Below 4.5:1; fails accessibility and reads washed-out on the featured card.
|
||
- **Fix**: Darken the success green (e.g. #1e7a34) or switch checks to Plum Velvet with green reserved for savings text.
|
||
- **Command**: /impeccable colorize
|
||
|
||
**[P0] Undersized functional text** (detector)
|
||
- **What**: "1 month free" and "up to -10%" at 9.92px; badge labels "guide"/"news" at 9.6px — below the 10–11px floor.
|
||
- **Why**: These are decision-relevant (savings, content type); unreadable on mobile.
|
||
- **Fix**: Raise to ≥0.72rem with 11px minimum; give the toggle sub-labels room.
|
||
- **Command**: /impeccable typeset
|
||
|
||
**[P0] Order widget traps users** (design review)
|
||
- **What**: `#orderWidgetOverlay` closes only via a 2.4rem × button — no Escape, no backdrop click, undersized touch target.
|
||
- **Why**: Accidentally opened widget = forced path; mobile users have no convenient exit.
|
||
- **Fix**: Backdrop click + Escape listener in script.js; enlarge close hit area to ≥2.8rem.
|
||
- **Command**: /impeccable harden
|
||
|
||
**[P1] Hero stats waste prime real estate on redundancy** (design review)
|
||
- **What**: "Deploy in 5 min" and "Instant setup" say the same thing; two of four stat slots.
|
||
- **Why**: The hero is the only place for credibility metrics; redundancy forfeits it.
|
||
- **Fix**: Replace "Instant setup" with a real metric (uptime, instances deployed, avg deploy time).
|
||
- **Command**: /impeccable layout
|
||
|
||
**[P1] Empire plan: blank feature row + weakest CTA on the highest-margin plan** (design review)
|
||
- **What**: `<li><br/></li>` blank entry in the feature list; "Contact Us" as outline button vs "Buy Now" primaries below it.
|
||
- **Why**: Blank row reads as "ran out of things to say"; the custom plan should be the most confident ask.
|
||
- **Fix**: Replace blank row with a concrete feature; make CTA "Get Custom Quote" in primary style.
|
||
- **Command**: /impeccable clarify
|
||
|
||
**[P1] Skipped heading levels hurt structure** (detector)
|
||
- **What**: h1→h3 (missing h2) at hero→features; h3→h5 (missing h4) at blog→footer; footer uses h5s.
|
||
- **Why**: Screen-reader navigation and outline integrity for assistive tech.
|
||
- **Fix**: Promote features-strip headings to h2; footer headings to h3/p.
|
||
- **Command**: /impeccable audit
|
||
|
||
**[P2] Blog after pricing weakens the conversion ending** (design review + synthesis)
|
||
- **What**: Page ends on content exploration ("Read more →") right after the pricing decision.
|
||
- **Why**: Peak-end rule — the emotional close should reinforce the decision, not invite second-guessing.
|
||
- **Fix**: Replace trailing blog grid with a final CTA band ("Ready to deploy?" + pricing link), or move blog above pricing.
|
||
- **Command**: /impeccable layout
|
||
|
||
**[P2] "Satisfied or reimbursed" is undefined** (design review)
|
||
- **What**: Strong claim with no qualifier anywhere.
|
||
- **Why**: "Reimbursed for what, when?" introduces a tiny trust question at the exact conversion moment.
|
||
- **Fix**: Add a time qualifier ("within 7 days") or link to legal.html.
|
||
- **Command**: /impeccable clarify
|
||
|
||
**[P2] Weak features-strip hierarchy** (design review)
|
||
- **What**: Feature h3s at 0.9rem compete with their own descriptions; line-height 1.
|
||
- **Why**: The first value-prop section after social proof should lead the eye, not whisper.
|
||
- **Fix**: h3 to 1rem+, line-height 1.3, tighter tracking.
|
||
- **Command**: /impeccable typeset
|
||
|
||
## Persona Red Flags
|
||
|
||
**Jordan (first-timer)**:
|
||
- Tab 1 contains nested `<strong>` tags ("Full management through your <strong>ODOO Settings Panel</strong>") — invalid HTML, visually noisy, and "ODOO Settings Panel" is unexplained jargon.
|
||
- FAQ tab has only 4 questions — no "What is Odoo?" or "Do I need to know code?"; feels like a teaser, not help.
|
||
|
||
**Riley (stress tester / comparison shopper)**:
|
||
- On the Rise (featured, $36.25) is 87% more than Side Hustle ($19.40) with the only listed difference being Git module installs — the price jump needs a clearer justification or feature gap.
|
||
- Empire: "Our service on your server" doesn't answer who provides infrastructure or whether it's BYO cloud.
|
||
|
||
**Casey (mobile, on-the-go)**:
|
||
- Trust bar partner row (7 items, 2rem gaps) forces horizontal scrolling on 390px viewports; logos read as tiny unlabeled icons.
|
||
- Billing toggle sub-labels at 0.62rem are barely legible; 48×26px switch is a tight thumb target.
|
||
|
||
## Minor Observations
|
||
|
||
- Order widget ~15 inline styles bypass the CSS custom properties — theming drift.
|
||
- Footer uses h5 headings ("Useful Links," "About us," "Follow us on") — odd semantics.
|
||
- "AccellerSales" spelling (double l) in the trust bar — verify.
|
||
- Chat widget (agent.js) overlaps the footer on narrow viewports.
|
||
- Holland.webp hero texture's purpose is unclear — if it signals the NL data region, label it.
|
||
- script.js `isEmpire` param naming is unclear (controls CTA style, not price).
|
||
|
||
## Questions to Consider
|
||
|
||
- Why does "On the Rise" carry "Most Popular" when Side Hustle is 47% cheaper — is that badge conversion data or a guess? Would "Recommended — best value for growing teams" be more honest?
|
||
- The page says "No DevOps required" then features "Git-based module deployment" — who is actually reading this page, the owner or their technical contact?
|
||
- What if the highest-priced plan made the strongest ask instead of the weakest?
|