Integrating ViX+, the new paid subscription, into ViX's sign-up: the payments section by country and how to present ViX+ as an upgrade without slowing down sign-up.Integración de ViX+, la nueva suscripción paga, dentro del registro de ViX: la sección de pagos por país y cómo mostrar ViX+ como un upgrade sin frenar el registro.新しい有料プラン「ViX+」をViXの登録フローに統合。国別の決済セクションと、登録の流れを止めずにViX+をアップグレードとして見せる方法。
DurationDuración期間8+ monthsMás de 8 meses8か月以上IndustryIndustria業界StreamingStreamingストリーミングRoleRol役割 Product DesignerTeamEquipoチームPM, developers, designers and QAPM, desarrolladores, diseñadores y QAPM、開発者、デザイナー、QA
ContextContexto背景
What was the project about?¿De qué se trataba el proyecto?どんなプロジェクトだったのか
ViX was a free streaming platform that launched ViX+, a paid tier that didn't exist until then. Within a large team, I owned sign-up in the payments section: integrating ViX+ into the sign-up flow, designing payments by country and defining how to present ViX+ as an upgrade, so users understood the new option without it stopping them from creating their free account. Everything had to work on TV, desktop and mobile.ViX era una plataforma de streaming gratuita y lanzó ViX+, una versión paga que hasta ese momento no existía. Dentro de un equipo grande, yo era la encargada del registro en la sección de pagos: integrar ViX+ al flujo de registro, diseñar los pagos según el país y definir cómo mostrar ViX+ como un upgrade, para que el usuario entendiera la nueva opción sin que eso le impidiera crear su cuenta gratis. Todo tenía que funcionar en TV, PC y mobile.ViXは無料のストリーミングサービスで、それまで存在しなかった有料プラン「ViX+」をリリースしました。大きなチームの中で、私は決済セクションの登録フローを担当しました。ViX+を登録フローに組み込み、国ごとの決済を設計し、無料アカウントの作成を妨げずに新しい選択肢が伝わるよう、ViX+をアップグレードとしてどう見せるかを決めました。すべてテレビ、PC、モバイルで機能する必要がありました。
Pain points I tackledDolores que abordé取り組んだ課題
What wasn't workingLo que no estaba funcionandoうまくいっていなかったこと
01
Sign-up had no paymentsEl registro no contemplaba pagos登録に決済がなかった
ViX+ didn't exist, so sign-up only created free accounts. There was no place to pick a plan or pay.ViX+ no existía, así que el registro solo creaba cuentas gratis. No había un lugar para elegir un plan ni pagar.ViX+が存在しなかったため、登録では無料アカウントしか作れず、プランを選んだり支払ったりする場所がありませんでした。
02
Every country pays differentlyCada país paga distinto国ごとに異なる支払い方法
Payment methods changed by country, and a single payment flow didn't work for everyone.Los métodos de pago cambiaban según el país, y un solo flujo de pago no alcanzaba para todos.支払い方法は国によって異なり、ひとつの決済フローでは全員に対応できませんでした。
03
Selling the upgrade without slowing sign-upVender el upgrade sin frenar el registro登録を妨げずにアップグレードを訴求する
ViX+ was new to users: we had to explain plans, prices and benefits without free users dropping off.ViX+ era nuevo para los usuarios: había que explicar planes, precios y beneficios sin que el usuario gratis abandonara.ViX+はユーザーにとって新しいものでした。無料ユーザーの離脱を招かずに、プラン、価格、メリットを伝える必要がありました。
Benchmark & moodboardBenchmark y moodboardベンチマーク & ムードボード
How other brands sell subscriptionsCómo venden la suscripción otras marcas他ブランドのサブスクリプションの見せ方
Before designing, I reviewed how other streaming and subscription services handle sign-up, plan selection and upgrades.Antes de diseñar, revisé cómo resuelven el registro, la elección de plan y el upgrade otros servicios de streaming y de suscripción.デザインの前に、他のストリーミング・サブスクリプションサービスが登録、プラン選択、アップグレードをどう扱っているかを調べました。
NetflixStep 2 of 3Paso 2 de 3ステップ 2/3Choose your planElige tu planプランを選択
BasicBásicoベーシックStandardEstándarスタンダードPremium
NextSiguiente次へ
Step-by-step sign-upRegistro por pasosステップ形式の登録
What I took: show users which step they're on and ask for the plan before payment details.Lo que tomé: mostrar en qué paso va el usuario y pedir el plan antes que los datos de pago.取り入れたこと: 現在のステップを示し、支払い情報の前にプランを選んでもらう。
Disney+
MonthlyMensual月額YearlyAnual年額
MonthlyMensual月額YearlyAnual年額SaveAhorraお得
SubscribeSuscribirme登録する
Monthly vs. yearlyMensual vs. anual月額 vs. 年額
What I took: the yearly plan sells by showing the savings, not just the price.Lo que tomé: el plan anual se vende mostrando el ahorro, no solo el precio.取り入れたこと: 年額プランは価格だけでなく、お得さを見せて訴求する。
MaxChoose a planElige un planプランを選ぶ
Basic with adsBásico con anunciosベーシック 広告つきMost popularMás popular人気No.1StandardEstándarスタンダードUltimatePlatinoプレミアム
One recommended planUn plan recomendadoおすすめプランをひとつ
What I took: highlighting a single plan speeds up the decision when there are several options.Lo que tomé: destacar un solo plan acelera la decisión cuando hay varias opciones.取り入れたこと: 選択肢が多いときは、ひとつのプランを強調すると決断が早くなる。
Prime Video30-day free trialPrueba gratis 30 días30日間無料体験ChannelsCanalesチャンネル
Channel ACanal AチャンネルA+ Add+ Agregar+ 追加
Channel BCanal BチャンネルB+ Add+ Agregar+ 追加
Upgrade inside the accountUpgrade dentro de la cuentaアカウント内でのアップグレード
What I took: people who already have an account add paid content without signing up again, just like a free ViX user moving to ViX+.Lo que tomé: quien ya tiene cuenta suma lo pago sin registrarse de nuevo, igual que el usuario gratis de ViX pasando a ViX+.取り入れたこと: 既存のアカウントのまま有料コンテンツを追加できる。ViXの無料ユーザーがViX+に移るときと同じ考え方。
SpotifyTry PremiumPrueba PremiumPremiumを試すNo adsSin anuncios広告なしDownloadsDescargasダウンロードCancel anytimeCancela cuando quierasいつでも解約可能Try it freeProbar gratis無料で試す
Freemium with upgradeFreemium con upgradeフリーミアムからのアップグレード
What I took: the upgrade is offered with concrete benefits, without blocking free use.Lo que tomé: el upgrade se ofrece con beneficios concretos, sin bloquear el uso gratis.取り入れたこと: 無料利用を妨げずに、具体的なメリットとともにアップグレードを提案する。
Pluto TVWatch free, no sign-upMira gratis, sin registro登録不要で無料視聴
Channel 101Canal 101チャンネル101LiveEn vivoライブ
Channel 102Canal 102チャンネル102LiveEn vivoライブ
Channel 103Canal 103チャンネル103LiveEn vivoライブ
Free as the way inGratis como puerta de entrada入り口としての無料
What I took: free content stays the entry point; ViX+ is offered as an extra, never as a barrier.Lo que tomé: el contenido gratis sigue siendo la entrada; ViX+ se ofrece como extra, nunca como barrera.取り入れたこと: 無料コンテンツは入り口のまま。ViX+は障壁ではなく、追加の選択肢として提案する。
Illustrative recreations of each pattern, not official screenshots.Recreaciones ilustrativas de cada patrón, no capturas oficiales.各パターンのイメージ再現であり、公式のスクリーンショットではありません。
UX processProceso UXUXプロセス
How I got to the solutionCómo llegué a la solución解決策にたどり着くまで
01
ResearchResearchリサーチ
I benchmarked how other brands sell their subscriptions and used heatmaps to see where attention concentrated in sign-up and in the ViX+ offer.Hice un benchmark de cómo otras marcas venden su suscripción y usé heatmaps para ver dónde se concentraba la atención en el registro y en la oferta de ViX+.他ブランドのサブスクリプションの見せ方をベンチマークし、ヒートマップで登録画面とViX+のオファーのどこに注目が集まるかを確認しました。
02
DefinitionDefinición定義
I mapped the user flows and wireflows of sign-up with ViX+: when the upgrade appears and what happens if the user accepts it or stays free.Armé los user flows y wireflows del registro con ViX+: en qué momento aparece el upgrade y qué pasa si el usuario lo acepta o sigue gratis.ViX+を含む登録のユーザーフローとワイヤーフローを作成。アップグレードがいつ表示され、ユーザーが受け入れた場合と無料のままの場合にどうなるかを整理しました。
03
DesignDiseñoデザイン
I designed the ViX+ offer, plan selection and payments by country, with new design system components and every breakpoint: TV, desktop and mobile.Diseñé la oferta de ViX+, la elección de plan y los pagos por país, con componentes nuevos en el design system y en todos los breakpoints: TV, PC y mobile.ViX+のオファー、プラン選択、国別の決済を、デザインシステムの新しいコンポーネントで、テレビ・PC・モバイルのすべてのブレークポイントに向けてデザインしました。
04
ValidationValidación検証
I reviewed every flow with PM, development and QA before it went to production.Revisé cada flujo con PM, desarrollo y QA antes de pasarlo a producción.本番リリース前に、すべてのフローをPM、開発、QAとレビューしました。
Final proposalPropuesta final最終提案
The solutionLa soluciónソリューション
ViX+ was built into sign-up as an optional upgrade: users see the offer, compare plans and, if they want, pay with their country's method. If not, they keep their free account with no friction. The same screens adapt to TV, desktop and mobile.ViX+ quedó integrado dentro del registro como un upgrade opcional: el usuario ve la oferta, compara los planes y, si quiere, paga con el método de su país. Si no, sigue con su cuenta gratis sin fricción. Las mismas pantallas se adaptan a TV, PC y mobile.ViX+は任意のアップグレードとして登録フローに組み込まれました。ユーザーはオファーを見てプランを比較し、希望すれば自国の方法で支払えます。そうでなければ、そのまま無料アカウントをスムーズに使い続けられます。同じ画面がテレビ、PC、モバイルに対応します。
Sign-up wireflow with ViX+Wireflow del registro con ViX+ViX+を含む登録のワイヤーフローPayment methods by countryMétodos de pago según el país国別の支払い方法Design system componentsComponentes del design systemデザインシステムのコンポーネントHeatmap of the ViX+ screenHeatmap de la pantalla de ViX+ViX+画面のヒートマップ
Metrics & resultsMétricas y resultado指標と成果
What happened next?¿Qué pasó después?その後どうなったか
ViX+The new paid subscription built into sign-up, as an upgrade that didn't exist before.La nueva suscripción paga integrada al registro, como un upgrade que antes no existía.新しい有料プランを、それまでなかったアップグレードとして登録フローに統合。
Local paymentsPagos por país国別決済A payment flow adapted to each country's methods.Un flujo de pago adaptado a los métodos de cada país.各国の支払い方法に合わせた決済フロー。
3 platforms3 plataformas3つのプラットフォームThe same sign-up with ViX+ designed for TV, desktop and mobile.El mismo registro con ViX+ diseñado para TV, PC y mobile.ViX+を含む同じ登録フローを、テレビ、PC、モバイル向けにデザイン。
