Executive Summary

Problem Churn-prevention page deprioritized to "Next Quarter" due to engineering constraints
Solution Designer-led implementation using AI + existing design system components
Key Result Shipped in Days, Not Quarters
Designer-Led Shipping to Production

Trial Expired Page Overhaul

How I shipped a churn-prevention page autonomously—from design to production—without using any frontend engineering capacity.

New Trial Expired Interface
Role & Approach
Solo Designer → Developer AI-assisted implementation, design system reuse
Duration & Constraints
1 Week Zero frontend engineering allocation
Organizational Impact
Cultural Milestone First AI-assisted production page

Why did this project require unconventional execution?

ablefy is a platform for creating, selling, and managing digital products and courses online. The Trial Expired screen is the critical moment where a user decides to upgrade or churn.

The frontend team was fully allocated to high-priority OKR projects. A valuable churn-prevention fix was deprioritized to "Next Quarter." I had already completed design deliverables for major projects, unblocking engineering entirely.

Instead of waiting, I chose to execute horizontally.

What was broken about the existing experience?

Old Trial Expired Page
The old "Trial Expired" page — a dead end with no clear path forward

Friction

Pricing plans were hidden behind a modal—two clicks away from a user ready to convert.

Broken Trust

"Book a Demo" links via Chili Piper were non-functional, eroding user confidence.

Dead End

Visually stark with no motivation or social proof. High-intent users were hitting a wall.

How did we reduce friction and build trust?

1

Zero-Click Pricing

Embedded pricing plans directly on the page, eliminating friction entirely.

2

Feedback Engine

Integrated a micro-survey asking "What's holding you back?" to capture objection data from non-converting users.

3

Trust Signals

Added rotating customer testimonials that auto-switch every 10 seconds.

4

Re-engagement

Embedded the "Growth Academy" video to remind users of the platform's core value.

Typeform Feedback Survey
Typeform survey capturing objection data

How did I ship without engineering resources?

I used LLMs to orchestrate the layout while strictly importing our internal Design System components for visual consistency. Extracted existing Pricing Modal logic to ensure zero new technical debt.

Opened a standard Pull Request in the main repository. Passed strict linting and code review by frontend engineers before merging.

Figma Design
Figma
Pull Request
Pull Request
Production
Production

How did we ensure measurable attribution?

Partnered with the Data Team to verify that existing tracking infrastructure could support the new flow. Manually tested dataLayer events to ensure upgrade_plan_flow and plan_selection_click events fired correctly before deployment.

We needed to attribute revenue to this specific intervention—not just general organic growth. Confirmed that current_plan_id and seller_id pass correctly, allowing us to calculate the exact euro value of every saved user.

dataLayer.push({
  event: 'ga-event',
  domain: 'seller',
  event_type: 'click',
  object: 'upgrade_plan_flow',
  element: 'plan_selection',
  event_name: 'plan_selection_click',
  current_plan_id: <user's current plan>,
  upgrade_plan_id: <selected plan ID>,
  seller_id: <seller ID>
})

What was the organizational impact?

Shipped in days, not quarters

Unblocked a key revenue path immediately without pulling a single hour of frontend time away from the main OKRs.

Cultural milestone

Demonstrated that designers can extend their impact beyond traditional boundaries when equipped with the right tools and autonomy.

New feedback loop

Integrated a Typeform survey to capture qualitative data on why users don't upgrade—creating a direct line to customer objections.

"Marks an important milestone to leverage AI to build a production-ready page inside a legacy product."

Guannan Li, Director of Product Growth
Slack message from Guannan Li

Reflections & What I'd Do Differently

1

Document the process for others

This approach could be replicated by other designers in the organization. I should have created a playbook documenting the tools, workflow, and guardrails for AI-assisted implementation.

2

Set up A/B testing from day one

While the page shipped successfully, I would have benefited from running a controlled experiment to quantify the exact conversion lift versus the old page.

3

Build organizational buy-in earlier

Some stakeholders were initially skeptical of the AI-assisted approach. Earlier communication about the methodology would have smoothed the approval process.