転職サービス有料化アップデート

デザイナー1名 / PM 1名 / エンジニア3名

ある転職サイトのサービスアップデートに伴い、有料化の施策もアップデート致しました。

ログイン後はサービス名含めた全ての要素が閲覧できます。

施策前の有料化の状況

施策前は、基本的に電話で有料化の営業を行っていました(この営業は、現在も併用で行われています)

しかし、よりスマートに有料化に持っていく為、サービスとして有料化プランの画面とシステムを用意することとなりました。

サービスはどの様にマネタイズしているか?

サービスは一般的な転職サイトと違い、求職者と事業者をマッチングして求人を紹介するサービスです。その後採用されたら課金が発生するビジネスモデルです。

スカウトも無ければ、一般的なエージェントサービスと違い年収の30%をいただくような事もありません。

それには、主に以下の理由があります。

スカウトがない理由

  • 主なターゲットの事業者は忙しいので、スカウトを送るのが億劫な人が多いと考えているから
  • IT業界と違い、1日中ずっとパソコンの前にいるわけではないので、スカウトを送るようなサービス設計と相性が悪い

年収の30%をいただかない理由

  • 個人店舗でやっている事業者も多いので、採用にそこまで大きな金額をかけられないから

どの様な料金体系にするか?

サービスの利用金体系は、役職ごとの採用によって異なってきます。

ターゲットとしている求職者の層には、主に4つの役職があり、それぞれに異なる料金体系をとっております。

また、初回申し込み時に預かり金として「10万円」をいただいております。

解決する課題

  • 欲しい人材だけにお金を使う事ができる
  • 能力にかかわらずお金を取られる事が少なくなる
  • 預かり金による運営側のリスク回避

パターン・ユースケース・フローチャートを言語化していく

有料化の要件定義が出来た段階で、パターン・ユースケース・フローチャートを言語化していきました。

このパターンを元に、エンジニアが必要な機能を実装して、私がFigmaで画面を作っていくという同時進行で制作していきました。

主なパターンとユースケース

  • 無料→有料
    • 無料と聞いて始めて、有料プランを営業から聞いてプランを変更した
      • おそらく一番多いパターン
  • 登録なし→有料
    • 新規営業でLPを見て、そのまま有料プランを契約した
  • 登録している→有料
    • 登録しているがログインしていなくて、LPを見て有料プランを契約したい
  • 有料→無料
    • 採用が終了したので、ひとまず預かり金を返して欲しいから、無料に切り替えた
  • (有料→無料)→有料
    • 無料に切り替えたが、また人が採用したくなったので、再度有料に切り替えた
      • 有料⇄無料はこのローテーションの繰り返し
  • 有料プランA→有料プランB
    • プランが増えたら、将来的に起こり得るパターン
    • とりあえずお試しで初めてみて、よかったからプランをアップグレードした

入金方法はどうする?

パターンも出来てきた段階で、ユーザーにどのように入金させるか考えることになりました。

理想的に言えば、全てクレジットカードで入金してもらいたいところでした。なぜなら、手数料がかかりますが、いつ振り込んだか確認する必要がないからです。

ですが、個人店が多い事業者も多く、クレジットカードを持っていない事もある為、「クレジットカード」「銀行振り込み」の2種類の入金方法を設けました。

画面をデザインしていく

定義する要件が全て決まったので、画面を作りこんでいきました。

事業者側はPCで使っている人が多いため、今回はPC版から作っていきました。

メニューを考える

まず、どのようなメニューを配置するか項目を考えることにしました。要素を分解して、以下のようなメニューにしました。

有料化に関連するメニュー

  • プラン情報
    • プラン一覧
      ここから有料プラン申し込みに移る
    • 現在ご利用中のプラン
      プラン申し込み後、現在契約しているプランを見ることができる
  • 請求情報
    • 会社・請求先情報
      会社情報および請求先情報が登録される
    • お支払い情報
      預り金、採用資金の支払先情報。カード払いと銀行振り込みが選べる
    • 請求・入金一覧
      預り金の預かり証や、採用の請求書、今月と過去の請求一覧が見れる
    • 預り金返金口座
      預り金の返金口座を登録できる

プラン申し込み画面をデザインする

この有料化施策の一番のキモである、プラン申し込み画面をデザインしていきました。

デザインするにあたり、まずは要素分解をすることにしました。主に以下の要素で構成されています。

プラン申し込みの要素

  • 請求先情報
    会社情報、および請求先情報
  • 支払い情報
    採用資金の支払い情報
  • 預り金情報
    預り金の返金先の口座
  • ご確認
    最後の確認画面

「請求情報」と同じ情報を、この申し込み画面で入力します。

「請求情報」で埋めていた場合は、デフォルトで埋まっている設定となっております。

請求情報をどうデザインするか?

請求情報は、「会社・請求先情報」「お支払い情報」「請求・入金一覧」「預り金返金口座」の4つの項目としました。

「請求先情報」は、会社情報と同じことが多々あると思われたため、「会社情報と同じにする」というボタンを設けました。

住所登録を簡単にするために、オートコンプリートを導入いたしました。

「請求・入金一覧」は、項目を

  • 内容
    決済の返金や請求書のタイトル。請求書の場合リンクとなっており、クリックすると請求書が開く
  • 発行日
  • 支払い・返金日
    支払期日があるものは、目立つように赤字で表示
  • 料金
  • 支払い・返金情報
  • 預かり証

の6つで要素分解しました。

ただ横長の画面はスマホでは使いづらい為、ここはPCとスマホで大きくデザインを変えています。

スマホの場合は1カラムとし、「内容」がタイトルとなり、その他の項目がカラムの中に配置されます。

支払い情報をどうデザインするか?

支払い情報は、「クレジットカード払い」「銀行振り込み」の2種類があります。

この画面は非同期通信であるSPAの特性を生かし、タブにしてポチポチと押してもらえれば、支払い方法を切り替えられる仕様としました。

銀行振り込みは指定した口座を表示するだけでよいですが、カード払いの場合、

  • 新しくカード登録して手続する
  • 登録済みのカードを変更して手続する
  • 変更をやめて、既に登録してあるカードで手続きをする

の3パターンのユースケースが考えられたため、デザインは3つ作りました。

スマホ版のデザインも作成する

今回はPC版から作ったので、最後にスマホ版のデザインも作りました。

今回は明確にお金が関係する案件だったので、しっかりと全ての画面のスマホ版を作成しました。

テストしてリリースする

最後に皆でテストしてリリースして、完了です!

制作を終えて

今回のリニューアルは、ユーザー側が絡んでくる前回と違いパターンは少なかったですが、お金が関係してるものだったので、「楽な」体験「慎重な」体験の出し分けに注意しながらデザインを行いました。

まだまだ磨きこめる余地がありそうですが、それよりもプランを増やすことの方がマストの為、サービスがワークしてから磨きこみをかけていきたいと思っております。

お問い合わせはこちら