Back to Overview
EXAMPLESAvailable

Subscription Cancellation Flow

Full end-to-end UXDL example modeling self-serve subscription cancellation and retention offers.


Visual Interaction Graph

Flowchart
Rendering diagram...
Subscription cancellation and retention flow graph.

Complete UXDL 0.1 Specification

YAML
uxdl: "0.1"
app: Enterprise SaaS
title: Subscription Cancellation
actors:
customer:
name: Workspace Owner
type: human
stripe_gateway:
name: Billing System
type: system
screens:
billing:
name: Billing Overview
type: page
states:
active: Subscription active and paid
retention_applied: 20% discount retention active
cancelled: Plan terminated at end of period
actions:
cancel_subscription:
name: Cancel Subscription Plan
actor: customer
relations:
review:
to: cancellation_review
cancellation_review:
name: Confirm Cancellation
type: modal
parent: billing
states:
offer_shown: Retention discount offer presented
actions:
confirm_cancel:
name: Finalize Cancellation
actor: customer
relations:
cancelled:
to: billing
state: cancelled
when: Customer confirms permanent cancellation
accept_retention:
name: Accept 20% Retention Offer
actor: customer
relations:
apply_discount:
to: billing
state: retention_applied
when: Customer accepts retention offer