top of page
封面.png

Surfshark Subscription Flow Redesign: Creating a Better Exit Experience

Time

Mar 2025

Tool

Figma

Role

User experience researcher

User experience designer

Skills

Wireframe

Prototype

User interface designer

User experience writer

Brief Intro

This project aims to enhance the overall user experience of canceling a subscription on Surfshark.

The Outcome

User Satisfaction Increased from 3/10 to 7.4/10

Frame 1.png
Ellipse 1.png
Screen1 V2.png

The Newly Add Unsubscribe Button Enhances Accessibility 

The “Cancel plan” action is styled in red to clearly signal its importance and potential consequences. Using a high-visibility color for this destructive action helps users quickly identify it, make more confident decisions, and reduces the risk of accidental clicks.

Ellipse 1.png

Use a Friendly and Trustworthy Design to Encourage Users to Stay

  • The tone of the message is revised to be warmer and more reassuring, helping users feel supported during the cancellation process.

  • The key benefits of staying subscribed are clearly highlighted to reinforce the value of the service.

  • Additional options—such as keeping the current plan or learning more about it—offer users more flexibility and reduce impulsive cancellations.

screen2-1.png
Ellipse 1.png

Use Accordion Layout to Improve Content Clarity

The accordion design organizes multiple cancellation paths in a compact, readable format. This reduces cognitive load and enables users to quickly find the method relevant to their subscription channel.

Ellipse 1.png

Offer Clear and Intuitive Support Choices

  • Designed two contact methods: Email and Live Chat, giving users flexibility based on their support needs.

  • Added supportive microcopy under each option to clearly communicate expected response times and set user expectations.

  • Introduced a floating live chat button at the bottom-right corner to improve visibility and allow quick access to help without scrolling.

Screen2-3.png
Ellipse 1.png
Screen4 V2.png

Re-engage Users with Thoughtful Messaging After Cancellation

A friendly tone combined with a reminder of remaining benefits and clear re-subscription options encourages users to reconsider and potentially rejoin. This approach keeps the door open for future engagement.

MacBook Air - 1.png

Before vs. After Cancellation Experience

Before

After

Business Insight 💰

From a business perspective, these improvements enhance user trust and ease of navigation, two key factors in subscription-based models. They reduce impulsive cancellations, improve customer satisfaction, and increase re-subscription likelihood. Ultimately, this builds stronger user-brand relationships in a highly competitive VPN market where credibility and user loyalty are critical for growth.

business insight.png

Research

What did users say?

Numerous users have reported issues canceling their subscriptions, including being charged even after successfully canceling.

Overall, It's a terrible experience for users 👎🏻

IMG_1166.jpg
IMG_1165.jpg

What did I find on the website?

No Visible Button to Cancel the Plan

Users are unable to find a clear or dedicated button to cancel their subscription, which creates confusion and uncertainty about how to proceed.

ktlvje9hlas61.png.webp

The Instruction Is Too Long to Find the Needed Information Quickly

Users struggle to scan and extract relevant steps due to the excessive length and poor content hierarchy of the instructions. This leads to frustration and may discourage users from completing critical actions.

截圖 2025-04-17 19.37.31.png
截圖 2025-04-17 19.37.18.png

The Text Reveals a Sense of Uncertainty

The instructions use uncertain language like ”“should”, which can be confusing or misleading for users.”

The Guideline Doesn’t Help Users to Solve the Problem

截圖 2025-03-25 10.00.23.png

Users must leave the current page to find further instructions, creating additional barriers and interrupting the flow of task completion.

Problem Statement

How Might I Design a User-friendly Cancellation Experience That Also Encourages Users to Stay?

Journey Map

Journey Map.png

How Are Other Products Designed?

netflix.png
  • One-step access to the cancel button (no redirection)

  • No persuasive delay or hidden steps

  • Provide different alternative options 

截圖 2025-04-23 15.42.04.png
截圖 2025-04-23 15.42.55.png
linkedin.png
  • Uses retention strategies (offers, reminders of feature loss)

  • Users maintain access until the current billing cycle ends

截圖 2025-04-23 16.00.03.png
spotify.png
  • Uses a web-only cancellation flow

  • Highlights what users will lose by downgrading

截圖 2025-04-23 16.06.46.png
截圖 2025-04-23 16.06.14.png

Design Solutions

Pain points 😫

Design solutions 😄

error.png

No clear or visible entry point for cancellation

yes.png

Add a prominently placed “Cancel Subscription” button in the main account

error.png

Instructions are too long and hard to scan

yes.png

Use collapsible step-by-step guidance and short summaries for better readability

error.png

Uses vague language like “should,” creating uncertainty

yes.png

Replace with clear, confident language like “Your plan will end on…”

error.png

Requires users to leave the current page to find more information

yes.png

Consolidate all cancellation steps into a single in-page flow 

Usability Testing

Five users participated in the usability test, completing three tasks and providing feedback through the System Usability Scale (SUS) questionnaire.

clipboard.png

Task1

Find out how to cancel a subscription via the Apple Store.

Task2

Cancel a subscription through the Surfshark website

Task3

Locate Surfshark’s online customer support

check-mark.png

SUS evaluation

68/100

The experience meets the minimum threshold for acceptable usability. However, the wide score range suggests that while some users easily navigated the process, others encountered usability issues.

smile.png

User's satisfaction

7.4/10

Users found the experience generally positive, but noted issues like hidden support options and unclear cancelation steps.

How did users say?

Avatar Image.png

Joe

The gray text of the cancel button made it seem inactive or not clickable.

Avatar Image2.png

Tina

The customer support option appeared quite far down the page , so it didn’t feel very noticeable.

Avatar Image3.png

Aaron

I hope there is a live chat option available.

Avatar Image4.png

Ru

It would be helpful if I could see how many days are remaining in my plan.

Iteration

Before

Screen1.png

After

Screen1 V2.png

👍🏻 Reduce Hesitation

To improve clarity and reduce hesitation, the cancel option was redesigned using a bold red font to make it more noticeable. This change makes it easier for users to locate the option and clearly communicates that it is an important action, without disrupting the overall visual balance of the interface.

customers chat.png

👍🏻 More Accessible

To improve support accessibility, I designed a floating live chat button that stays visible throughout the cancellation process. This allows users to instantly contact support without scrolling, reducing friction and providing timely help during critical decisions.

Before

Screen4.png

After

Screen4 V2.png

👍🏻 More Clear and Transparent

I added the number of days remaining in the user’s subscription after cancellation.

This small change helps users better understand how long they can continue using the service, reducing confusion and improving transparency in the offboarding experience.

Next Step

Expanding the Lens on Offboarding UX

This project deepened my understanding that a great user experience doesn’t end at onboarding or daily interactions—it also includes how we guide users through the decision to leave. Offboarding is often overlooked, yet it plays a crucial role in shaping a user’s final impression and long-term product perception.

Moving forward, I aim to explore how leading digital product designers design their cancellation and exit flows to retain users and leave them  clarity, control, and respect. I plan to conduct comparative research on offboarding strategies across industries, analyzing the balance between business goals and user autonomy. This will inform more empathetic, transparent, and strategic UX practices for end-of-journey touchpoints.

Brazuca - Standing.png
bottom of page