Submission: Abang Tah - Design Engineer 001

challenges/design-engineer-001/submissions/abang-tah/rationale.md

@@ -0,0 +1,73 @@
+Rationale — Signalflow Landing Page Redesign
+Abang Tan
+
+What the AI baseline got wrong
+The wireframe was structurally complete but conversion-blind. Three specific failures:
+
+No product evidence in the hero. The AI led with centered copy alone — no screenshot, no visual proof. For a VP Sales or RevOps buyer, credibility has to be shown, not claimed. A hero with no product UI is asking for trust before earning it.
+Flat visual hierarchy. Every section had equal weight. The stats — the three most persuasive data points on the page — were styled identically to everything else. 34%, 2.3x, 91% deserved to hit like a statement. They didn't.
+No spatial tension. The centered layout reads passively. Nothing pulls the eye. There's no left-right energy, no anchor point, no reason to keep scrolling.
+
+
+What I changed and why
+Hero: Split layout with live dashboard screenshot
+Moved from centered copy-only to a left-text / right-product split. The dashboard mockup on the right does conversion work that copy cannot — it makes the product tangible and kills the "what actually is this?" drop-off before it happens. This is the single highest-leverage change on the page. I also added a second floating device thumbnail to imply multi-surface context — a subtle signal that the product lives across a buyer's entire workflow.
+Typography: "Will Close" highlighted in brand blue
+Not decoration — precision. The headline has one phrase that carries the entire value proposition. Highlighting Will Close directs the eye to it in under two seconds and reinforces the predictive intelligence angle without adding a single word. Brand color applied with intent, not just compliance.
+Stats section: Dramatic scale on dark background
+Pulled the numbers out of a neutral white context and gave them a full dark-background section — then increased the number sizing significantly. 34%, 2.3x, 91% are the three most persuasive things on this page. They now have visual authority that matches their conversion value. The section change in background also creates rhythm — light, dark, light — that controls scroll pacing.
+Testimonial: Paired directly under the stats
+Placed the Sarah Chen quote immediately below the numbers, inside the same dark section. This is a deliberate sequencing choice: hit them with the proof, then immediately give it a human face and a specific story. The "60% to 91% in one quarter" line inside the quote mirrors the 91% stat above it — the repetition is intentional reinforcement.
+
+Tradeoffs I made
+The features card grid and the steps section were left structurally intact. The AI's 3-column card layout is competent and scannable — refactoring it would have been polish for its own sake. I focused time on the sections with the highest conversion leverage: the hero and the proof section. Knowing what not to touch is part of the judgment.
+Button copy changed from "Get Started" to "Start Free Trial Now" — specificity reduces hesitation at the click moment. Everything else was left alone. I was hired as a design engineer, not a copywriter.
+
+Conversion & Experimentation Layer
+
+This redesign is structured to support continuous optimization, not just a one-time improvement.
+
+Key elements are intentionally isolated for testing:
+
+Hero layout (centered vs split with product UI)
+
+CTA copy ("Start Free Trial Now" vs alternative variants)
+
+Stats section prominence and background contrast
+
+Testimonial placement relative to quantitative proof
+
+Primary success metric:
+
+Free trial conversion rate
+
+Supporting metrics:
+
+Scroll depth (engagement with proof sections)
+
+CTA click-through rate
+
+Time to first interaction
+
+By structuring the page around clear conversion moments, this design can feed directly into an experimentation loop where Signalflow (and FunnelEnvy’s agents) can iteratively improve performance based on real user behavior.
+
+Why this beats the baseline
+The AI version is a competent translation of a brief. It gets the structure right and misses the strategy entirely. Every change I made has a specific conversion rationale tied to how a skeptical enterprise buyer actually reads a landing page — not how a design checklist says it should look.
+The hero screenshot makes the product real. The stats section makes the numbers land. The testimonial sequencing closes the trust loop. That's not a redesign — it's a conversion argument built in HTML.
+
+
+Brand System Alignment Pass
+
+Following feedback, I performed a strict implementation pass to align the design with the Signalflow brand guide.
+
+Updates included:
+
+Replaced all colors with exact brand tokens (no approximations)
+
+Standardized spacing to the 8px system across all sections
+
+Corrected typography to match defined sizes and weights
+
+Refined components (buttons, cards) to match specified padding, radius, and borders
+
+This pass ensures the design is not only conversion-focused but also production-ready within a consistent design system.