Rutube Premium subscription checkout flow

Overview

A redesign of the plan selection, payment, and subscription management pages for a service with a million-strong audience.

91.7SUS out of 100

6.3SEQ out of 7

Problem

Users were abandoning subscription checkout before reaching payment: plans were described vaguely, auto-renewal terms were hidden in fine print, and there was no sense of completion after payment.

Rutube: Subscription

Process

This isn't a one-off diagram made for this case — it's the process I've built for myself and repeat on most projects. Discover and Define come before the first sketch, so the solution answers a confirmed problem rather than an assumption. Test sits before Handoff: if the hypothesis doesn't hold up on the prototype, it's cheaper to go back to Design than to redo finished documentation. Design Review at the end serves as a checkpoint: the solution is checked against the team before being considered done.

Discover

Competitor analysis
Review analysis
MoSCoW
In-depth interviews

Define

Archetypes
4 Forces
CJM
IA
JTBD

Design

UserFlow
Low/High Fidelity
Prototype

Test

Usability test

Handoff

UI Kit

Rutube: Subscription

Competitors

Direct

video hosting
User Generated Content
viewing without a subscription
subscription = ad-free + perks

Indirect

OTT (Over-The-Top) / SVOD (Subscription Video On Demand)
non-UGC
subscription = mandatory login

Entry context	Intrusiveness	Value clarity	Price transparency	Trial period	Steps to checkout	Payment ease	Cancellation clarity

—	—	—	—	—	—	—	—

implemented well acceptable, but with caveats poor or missing — not applicable (no subscription as such)

Rutube: Subscription

Reviews

Like	Dislike	Ignored	About the subscription
huge content selection convenient player best recommendations	ads, "push toward premium" moderation policy sometimes glitches in Russia	smart settings	valued for no ads + offline features
accessibility exclusive RU content VK ecosystem	irrelevant recommendations ads glitches, bugs, lag	offline features	—
movies + everything else content quality convenient for Yandex users	weak catalog expensive add-on packs auto-renewals/charges	fine-grained player settings subscription ≠ all-inclusive	good value if you already need Plus
large catalog convenient filtering promos/deals	"unexpected charges" second checkout (some content paid even with a subscription)	turning off auto-renewal	discounts "auto-payment trap"
content quality broad sections ecosystem bundles	second checkout trailers auto-play "was cheap, became expensive" (promo effect)	free content "subscription + separate purchases" is fine	expectation of "all-inclusive"
cheap TNT exclusives	narrow content, subscribing for just one show weak search	niche service, not a universal streaming hub	app quality ≠ price auto-renewal is annoying
all TV archives in one place free	poor UX/UI tons of ads breakages	archive size extra sections	—

Prioritizing criteria
with MoSCoW

Must Have

Value clarity
Free vs Paid
Price transparency
Cancellation clarity

Should Have

Entry context
Intrusiveness
Steps to checkout

Could Have

Trial period
Payment ease

Rutube: Subscription

Archetypes

Target audience

Core audience — 25–34: has disposable income, mature with digital products, already used to living on subscriptions. But within it — not one single behavior pattern.

Method

In-depth interviews with audience representatives showed: the same action — subscribing — hides different motives, fears, and expectations.

The Rational Controller

Context

Uses video services regularly
Digitally literate
Notices interface logic
Tracks spending

Motivation

Wants to use the subscription deliberately, with full control

Key need

Transparency and manageability

Fear

Auto-charge without notice
Price increase without notice
Hidden terms

Behavior pattern

Partially reads the interface
Notices inconsistencies
Gets annoyed when logic is missing
Compares free and paid
Looks for confirmation of value

Success criteria

Understands what they're paying for
Sees the charge date
Can cancel in 1–2 clicks
Sees a clear plan comparison

The "No-Frills" Pragmatist

Context

Video = evening downtime
Doesn't want to figure things out

Motivation

Remove ads and watch in peace

Key need

Simplicity

Fear

Pushiness, upsells, extra steps

Behavior pattern

Doesn't read the text
Makes quick decisions
Will abandon the process if frustrated

Success criteria

Minimum steps
One plan
No pressure

Rutube: Subscription

4 Forces

The Rational Controller

Push (what pushes away from the free version)

Annoying ads
Limitations
Lack of control
Not being able to tell exactly what you're getting

Pull (what attracts to the subscription)

No ads
Exclusives
Clear description of benefits
Transparent terms
Ability to manage the subscription
Visible next charge date

Anxiety (what's scary)

Auto-charge without notice
Price increase after the trial period
Fine print
Hidden terms
Unclear subscription management

Habit (what keeps them on the free model)

Can watch fine as is
Too lazy to figure it out
Habit of going without a subscription
Alternative services

The "No-Frills" Pragmatist

Push

Too many ads
Inconvenience

Pull

Quickly remove ads

Anxiety

Upsell
Complicated flow
Phone number / spam

Habit

Free also works
Doesn't want to spend time on it

Conclusion

Main Push — annoying ads

Main Pull — no ads + a sense of control

Main Anxiety — auto-charges and opacity

Main Habit — "it's fine for free anyway"

Rutube: Subscription

CJM (controller)

Stage	Trigger	Subscription page	Plan selection	Card entry	Payment completion	After payment
User actions	Sees an ad / a limit	Studies the subscription terms	Analyzes the available plans	Enters payment details	Completes the payment	Returns to viewing. Gets a charge reminder. Decides whether to renew
Thoughts	Fed up with it. Maybe worth subscribing	What's included? Is there a catch?	Why am I being offered this specifically? What's the difference?	When will I be charged? Can I cancel? Won't the price go up?	Is that it? Where's the confirmation?	The ads are gone. When's the next charge? Should I renew?
Emotions	Annoyance	Wariness	Doubt	Anxiety, wariness	Neutral, mild confusion	Relief at first. Anxiety closer to the charge date if there's no reminder
Pain points	Ads are in the way	Text overload No clear free-vs-paid comparison Terms are described vaguely	No explanation of differences No clear selection logic Several options with no priority	Auto-renewal on by default No charge reminder No visible info about managing the subscription	No sense of completion Unclear when the next charge is Unclear where to manage the subscription	No charge reminder. Hard to find where to cancel. Unclear what perks the subscription gives
Opportunities for improvement	Clearly show the subscription's value	Clear visual hierarchy A free-vs-premium table Transparent pricing with no fine print	Justification for the recommended plan One primary option + alternatives A short "who this is for" explanation	Explicit next charge date Info about a reminder before the charge Visible "manage subscription" link	A vivid confirmation screen Next charge date A subscription management button	Push/email reminder 3 days ahead. A visible "manage subscription" link. Next-charge info right on the success screen

Rutube: Subscription

CJM (pragmatist)

Stage	Trigger	Subscription page	Plan selection	Card entry	Payment completion	After payment
User actions	Watching a video, hits an ad	Goes to the checkout page	Quickly scans the options	Enters the card	Completes the payment	Returns to viewing, stops thinking about the subscription
Thoughts	Oh come on, how much longer	Where's the button?	I just want no ads, nothing else matters	Let's get this over with	No more ads now?	Finally, no ads, great
Emotions	Annoyance	Impatience	Doubt, if there are too many options	Annoyance, if there's more than one or two steps	Relief, if the effect is instant	Relief, then — zero further attention to the topic
Pain points	Ads are in the way	Text overload Several plans Unclear what to pick	Too much choice Upsell Complex structure	Extra fields Phone number Add-on subscriptions "Upgrade your plan" offers	Unclear whether the subscription activated No clear confirmation	Doesn't track charges, finds out about renewal only after the fact in the bank app, doesn't remember how to cancel if needed
Opportunities for improvement	Give a quick, obvious path to the subscription with no extra text or explanations	One primary plan, a large button, minimal secondary info on the first screen	Clearly state the base scenario: "No ads — X ₽ per month." Everything else is secondary	Minimal fields, a linear process, no upsells at this stage	Ads disappear instantly + a short, clear success screen	One unobtrusive notification right after payment (no ads + where to cancel), then leave it alone

Rutube: Subscription

Home

Personalized content

Catalog

Shorts

Collections

Browse

Videos

Channels

Shorts

Playlists

Catalog

Movies

TV series

TV shows

Sports

Music

Podcasts

Kids

Studio

Upload video

Upload Shorts

Start a live stream

You

Subscriptions

Watch history

Playlists

Watch later

Comments

Liked videos

Settings

My data

Notifications

Devices

Subscriptions

Purchases

Payment methods

Rutube: Subscription

JTBD

Controller

When I open the subscription page and don't understand the terms, I want to find clear information about the price, charge date, and cancellation, so I don't feel like I've been deceived.

When I've just paid for the subscription, I want to immediately see the next charge date and quickly find subscription management, so I stay in control of the situation.

When I'm choosing a plan and don't understand how paid differs from free, I want to see a clear comparison, so I pay deliberately, not blindly.

Pragmatist

When an ad interrupts my viewing, I want to remove it in as few steps as possible, so I can get straight back to the video without frustration.

When I see the checkout page, I want to see one clear plan and pay right away, so I don't have to sort through options or waste time.

When I've just paid for the subscription, I want to immediately see that the ads are gone, so I can confirm it all worked and stop thinking about it.

Rutube: Subscription

User-flow

The diagram is wider than the screen — pinch to zoom in

Rutube: Subscription

[1]

Viewing without a subscription

[2]

Plan selection

[3]

Payment

[4]

Successful payment

[5]

Payment error

[6]

Viewing with a subscription

[7]

Subscription management

Rutube: Subscription

Testing

Hypothesis

If the subscription terms are made clear upfront — an explicit plan comparison, a visible charge date, a sense of completion after payment — users will stop abandoning checkout, and the process itself will become noticeably simpler. Validated through moderated testing of a clickable prototype: the same respondents as in the research phase — which let them compare the old Rutube flow and the new prototype from their own experience.

No.	Flow step	Passed?	Time	Errors and snags	Quotes and observations
1	Video and ad banner	Yes	28 sec	Tapped the like button, tried to close the banner at the bottom	"Oh no, damn, an ad. I want to skip it, but I just can't skip it outright"
2	Plan selection	Yes	10 sec	—	"This is convenient, because there's a clear benefit for me." Immediately picked the annual plan, appreciated the price comparison
3	Payment form	Yes	20 sec	—	First chose a bank card, entered the details
4	Error screen	Yes	5 sec	Wasn't thrown off	"Couldn't process the card details — let's try again, but probably better with the Fast Payment System this time." Immediately decided to switch payment method
5	Retrying payment	Yes	5 sec	—	Via the Fast Payment System — successful
6	Success screen	Yes	15 sec	—	"Subscription active, ads off, I can see the next charge. There's even a reminder — awesome." Tapped "Continue watching"
7	Subscription management	Didn't go in	—	—	Noticed the "Manage subscription" button but didn't click it: "I understand what subscription management is about — just not relevant for me right now"

Rutube: Subscription

Insights

The flow confirmed the hypothesis: both archetypes' pain points are closed, success criteria met at 100%.

Archetypes work as a frame, but not a rigid one: behavior can diverge from the original classification depending on context.

SEQ 6.3 out of 7, SUS 91.7 out of 100 — high simplicity and ease of use.

Two growth points found: the error screen reads as a dead end, and the cancel button on the success screen is visually weak.

Transparent terms and explicit control over the subscription removed the main fear — hidden charges.

Rutube: Subscription

Dev prep

To make the solution implementation-ready, a two-tier token system and UI kit were built.

Rutube: Subscription

Results

The case went through the full cycle: from research to a system ready for development.

What was done

Built a research base: interviews, competitive analysis, MoSCoW prioritization
Formed two behavioral archetypes based on observed patterns
Designed the information architecture and CJM

Drew key screens: plan selection, payment, success, error, subscription management
Built a two-tier token system and a UI kit of 7 sections
Ran usability testing: hypothesis confirmed, key archetype pain points closed (SUS 91.7, SEQ 6.3)

Rutube: Subscription

Rutube Premium subscription checkout flow

Prioritizing criteriawith MoSCoW

Conclusion

Prioritizing criteria
with MoSCoW