[{"data":1,"prerenderedAt":180},["ShallowReactive",2],{"/blog/launch-cancel-flow-design-2-0":3},{"id":4,"title":5,"articleSection":6,"author":7,"body":8,"category":6,"coverBuilder":163,"cta":164,"ctaBody":163,"ctaTitle":163,"dateModified":165,"datePublished":166,"description":167,"draft":168,"extension":169,"hideCover":168,"image":170,"meta":171,"navigation":172,"ogImage":163,"path":173,"readTime":174,"seo":175,"sidebarCta":163,"stem":176,"tags":177,"wordCount":178,"__hash__":179},"blog/blog/launch-cancel-flow-design-2-0.md","Launch: Cancel Flow design 2.0","Product Releases","scott",{"type":9,"value":10,"toc":148},"minimark",[11,15,18,21,26,49,54,58,61,66,73,78,83,86,90,93,97,100,109,113,116,119,124,128,131],[12,13,14],"p",{},"Offering the subscription industry’s best cancel flow is continually our top priority, and that means creating an experience that's straightforward, intuitive, and enjoyable for your customers.",[12,16,17],{},"Because when we’re acting on your behalf, you’re entrusting us with your brand reputation and customer affinity.",[12,19,20],{},"That’s why I’m thrilled to introduce the next phase of our cancel flow experience. It’s designed to make the best impression on your behalf and fit cleanly into your design stack.",[22,23,25],"h3",{"id":24},"whats-new","What’s new?",[27,28,29,37,43],"ul",{},[30,31,32,36],"li",{},[33,34,35],"strong",{},"A fresh, modern design"," is clean and inviting, adapting to your brand's style guidelines and personality with one click.",[30,38,39,42],{},[33,40,41],{},"New, smooth, dynamic animations"," propel customers forward through the flow, welcoming interaction.",[30,44,45,48],{},[33,46,47],{},"🎉 Use the optional confetti animation"," to celebrate positive outcomes in a fun, human way.",[50,51,53],"h2",{"id":52},"design-decisions","Design decisions",[22,55,57],{"id":56},"new-persistent-top-bar","New persistent top bar",[12,59,60],{},"One major addition to the design is the presence of an “undercard” or “top bar.” This bar serves as a framing mechanism for every step of the cancel flow, presenting in plain language what your customer is seeing.",[62,63,65],"h4",{"id":64},"examples","Examples",[12,67,68],{},[69,70],"img",{"alt":71,"src":72},"","/images/blog/launch-cancel-flow-design-2-0/figure-1.webp",[12,74,75],{},[69,76],{"alt":71,"src":77},"/images/blog/launch-cancel-flow-design-2-0/figure-2.webp",[12,79,80],{},[69,81],{"alt":71,"src":82},"/images/blog/launch-cancel-flow-design-2-0/offer.webp",[12,84,85],{},"From our research, cancel flow steps written with clear framing—e.g. what this step is offering and why it’s being offered—received higher interaction rates and resulted, ultimately, in more feedback and better offer uptake. That’s why, with this new design, every step type is automatically categorized and micro branded for maximum effect.",[22,87,89],{"id":88},"updated-typography","Updated typography",[12,91,92],{},"Version one of Churnkey’s Cancel Flow used Inter as the default font. For this version, I shifted the default selection to Helvetica Neue, which I think has more consistent spacing and is appealing to more brands. You can still, of course, override any layout decision with your own custom CSS—including the font stack.",[22,94,96],{"id":95},"one-setting-customization","One-setting customization",[12,98,99],{},"Churnkey’s Cancel Flow should always be a good citizen within your user interface and feel like it was something created by your product design team. That led me to two significant design decisions:",[101,102,103,106],"ol",{},[30,104,105],{},"Make brand customization require only one selection: your primary color. From there, the layout extrapolates secondary and tertiary colors throughout.",[30,107,108],{},"Remove the option to upload your company’s logo. It’s rare for an internal customer-facing flow to include a logo, and this had a nice side effect of reducing customization overhead.",[22,110,112],{"id":111},"remembering-the-human","Remembering the human",[12,114,115],{},"Animated transitions between flow steps, entrance, and exit make the new Cancel Flow seem snappy and more human.",[12,117,118],{},"Additionally, I felt that a special touch of interactivity—in the form of an optional confetti feature—was an important addition to help remind customers of their value and reward them for sticking around.",[120,121],"video-embed",{"src":122,"title":123},"/img/cancel-flow-confetti.mp4","The optional confetti celebration in a Churnkey cancel flow",[50,125,127],{"id":126},"more-to-come","More to come",[12,129,130],{},"Churnkey’s Cancel Flow is the most modern, adaptable, and easy to use in the subscription industry. It’s live in every account today.",[12,132,133,134,141,142,147],{},"And if you aren’t a Churnkey customer, ",[135,136,140],"a",{"href":137,"rel":138},"https://app.churnkey.co/register?ref=churnkey.co",[139],"nofollow","start a free trial"," or ",[135,143,146],{"href":144,"rel":145},"https://savvycal.com/churnkey/strategy?ref=churnkey.co",[139],"book a meeting with us"," now.",{"title":71,"searchDepth":149,"depth":149,"links":150},3,[151,152,162],{"id":24,"depth":149,"text":25},{"id":52,"depth":153,"text":53,"children":154},2,[155,159,160,161],{"id":56,"depth":149,"text":57,"children":156},[157],{"id":64,"depth":158,"text":65},4,{"id":88,"depth":149,"text":89},{"id":95,"depth":149,"text":96},{"id":111,"depth":149,"text":112},{"id":126,"depth":153,"text":127},null,"newsletter","2025-01-23","2023-01-24","Offering the subscription industry’s best cancel flow is continually our top priority, and that means creating an experience that's straightforward, intuitive, and enjoyable for your customers. I’m thrilled to introduce the next phase of our cancel flow experience. It’s designed to make the best impression on your behalf and fit cleanly into your design stack.",false,"md","/images/blog/launch-cancel-flow-design-2-0/cancel-flow-2.webp",{},true,"/blog/launch-cancel-flow-design-2-0","2 min read",{"title":5,"description":167},"blog/launch-cancel-flow-design-2-0",[6],461,"60elkk_7GYHSLn24lkSHk9xCdpWvcBuJNtsa_huaAss",1787075318631]