diff --git a/challenges/design-engineer-001/submissions/abang-tah/index.html b/challenges/design-engineer-001/submissions/abang-tah/index.html new file mode 100644 index 0000000..df8ece7 --- /dev/null +++ b/challenges/design-engineer-001/submissions/abang-tah/index.html @@ -0,0 +1,625 @@ + + + + + + + Signalflow - Know Which Deals Will Close + + + + + + + + + + +
+ +
+
+
+ +
+
+ ✨ Now with Salesforce + Hubspot Integration +
+

+ Know Which Deals + Will Close Before Your Reps + Do +

+

+ Signalflow connects your CRM, marketing automation, and product + usage data to surface pipeline intelligence that actually helps + you hit your number. +

+
+ + Start Free Trial → + + +
+
+ +
+
+ Signalflow Dashboard +
+ +
+
+
+
+
+
+ + +
+
+

+ Trusted by 200+ B2B Revenue Teams +

+
+
+ ACME CORP + NORTHWIND + CONTOSO + FABRIKAM + WIDGETCO + + ACME CORP + NORTHWIND + CONTOSO + FABRIKAM + WIDGETCO +
+
+
+
+ + +
+
+
+

+ Everything You Need to Hit Your Number +

+

+ One platform that connects the dots across your entire revenue + engine. +

+
+
+ +
+
+ + + +
+

Pipeline Scoring

+

+ ML-powered deal scoring that learns from your historical close + patterns. Know which deals are real and which are wishful + thinking. +

+
+ +
+
+ + + +
+

Signal Detection

+

+ Automatically surface buying signals from product usage, email + engagement, and content consumption. Stop guessing, start + knowing. +

+
+ +
+
+ + + +
+

Data Unification

+

+ Connect your CRM, MAP, product analytics, and conversation + intelligence in one place. No more spreadsheet gymnastics. +

+
+ +
+
+ + + +
+

Revenue Forecasting

+

+ Bottom-up forecasting that uses actual engagement data instead + of rep gut feel. Give your board numbers you can stand behind. +

+
+ +
+
+ + + +
+

Rep Coaching

+

+ AI-generated deal recommendations for every rep, every day. What + to prioritize, what to let go, and what to say next. +

+
+ +
+
+ + + +
+

Alert System

+

+ Real-time Slack and email alerts when deals show risk signals or + buying intent spikes. Never be blindsided again. +

+
+
+
+
+ + +
+ +
+
+

+ The Numbers Speak for Themselves +

+ +
+
+
+ 34% +
+
+ Increase in Win Rate +
+
+
+
+ 2.3x +
+
+ Faster Deal Velocity +
+
+
+
+ 91% +
+
+ Forecast Accuracy +
+
+
+ +
+
+
+ "We went from guessing which deals would close to actually + knowing. Our forecast accuracy went from 60% to 91% in one + quarter. The board finally trusts our numbers." +
+
+
+ Sarah Chen +
+
+
Sarah Chen
+
+ VP Revenue Operations at Northwind SaaS +
+
+
+
+
+
+
+ + +
+
+

+ Up and Running in 15 Minutes +

+
+ +
+
+ 1 +
+
+

+ Connect Your Stack +

+

+ One-click integrations with Salesforce, HubSpot, Marketo, + Pendo, Amplitude, Gong, and 40+ other tools. No engineering + required. +

+
+
+ +
+
+ 2 +
+
+

+ Let Signalflow Learn +

+

+ Our models analyze your historical deals, engagement patterns, + and product usage data to build a custom scoring model for + your business. +

+
+
+ +
+
+ 3 +
+
+

+ Start Closing Smarter +

+

+ Get daily deal intelligence delivered to Slack, email, or + directly in your CRM. Your reps know exactly where to focus + every morning. +

+
+
+
+
+
+ + +
+
+
+
+

+ Stop Losing Deals You Should Have + Won +

+

+ Join 200+ revenue teams that use Signalflow to hit their number + every quarter. +

+ + Start Free Trial + +
+ Free 14-day trial + • + No credit card required + • + Setup in 15m +
+
+
+
+
+ +
+ + + + + diff --git a/challenges/design-engineer-001/submissions/abang-tah/rationale.md b/challenges/design-engineer-001/submissions/abang-tah/rationale.md new file mode 100644 index 0000000..886054a --- /dev/null +++ b/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. \ No newline at end of file