「キャリトレ」は2022年12月をもってサービス終了しました。

こんにちは、プロダクトデザイナーの鹿島です。
キャリトレ事業部のアプリチームで、「キャリトレ」のプロダクトデザインを担当しています。

2020年12月、挑戦する20代の転職サイト「キャリトレ」はスマートフォンアプリをリニューアルしました。UIデザインだけでなく、新たな機能を追加し、体験を一新する大規模なリニューアルでした。

この記事では、特に力を入れた、ユーザーの「心をつかむ」ビジュアルデザインと、「ポジティブな未来への冒険」をキーワードにした世界観を表現するプロセス。そこから得た気付きを紹介します。

%3Cp%20style%3D%22font-size%3A%2012px%3B%20text-align%3Acenter%3B%20margin-top%3A%20-4px%3B%20line-height%3A1.4%3B%22%3E%E3%83%AA%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%A2%E3%83%AB%E3%81%97%E3%81%9F%E3%82%AD%E3%83%A3%E3%83%AA%E3%83%88%E3%83%AC%E3%82%A2%E3%83%97%E3%83%AA%3C%2Fp%3E

はじめての転職を迷うことなく進められるアプリへリニューアル

リニューアルでは、大きく2つの指標改善に注力しました。

1つはアプリをインストールして、必要な情報を登録するまでの「登録突破率」。もう1つはアプリを長く使用いただいているかの指標となる「継続利用率」です。

キャリトレユーザーの多くは、はじめて転職に挑戦する20代の方々。転職で何をやるべきかがわからず、自分がどんなキャリアを歩みたいかもわからない。そんな不安を抱えている方も少なくありません。

アプリに情報を登録してもらい、使い続けてもらうことで、キャリアについて考え行動する習慣をつくり、はじめての転職活動を迷うことなく進められる。そんなアプリを目指して、リニューアルが始まりました。

「心をつかむ」ビジュアルデザイン。3つの制作プロセス

リニューアルでは、はじめての転職活動を迷わず進められる機能や体験設計はもちろん、ユーザーの「心をつかむ」表層部分のビジュアルデザインにも力を入れました。

Visionalに所属するデザイナーの行動指針とも言える「5つの約束」にも「心をつかむ」という項目があり、「課題解決」や「ユーザー中心」と同じくらい心をつかむ魅力的なデザインを大事にしています。

%3Cp%20style%3D%22font-size%3A%2012px%3B%20text-align%3Acenter%3B%20margin-top%3A%20-4px%3B%20line-height%3A1.4%3B%22%3EVISIONAL%20DESIGN%E3%80%8C5%E3%81%A4%E3%81%AE%E7%B4%84%E6%9D%9F%E3%80%8D%3C%2Fp%3E

ここからは、アプリのビジュアルデザインの制作や世界観の表現をどのように進めたか。3つのプロセスから紹介します。

1つ目はメンバーを巻き込んで、コンセプトの共通認識をつくったこと。2つ目はリニューアルのコア機能に合った世界観のデザイン。3つ目は世界観を各画面に反映して実施したアプリ全体のブラッシュアップです。

1.メンバーとムードボードを共創して、コンセプトの共通認識をつくる

最初に行ったのは、リニューアルしたキャリトレのコンセプトを決めるためのムードボードの作成。加えて、ムードボードからトンマナの方向性を決めて、メンバー間の共通認識をつくることでした。

プロジェクトが始まって約2週間のころ。コンセプトが全く決まっていない段階で、デザイナーやエンジニアをはじめ、ビジネスサイドも含むメンバーを全方位的に巻き込み、アイデア出しをはじめました。

Miroを使って、ペルソナの人物像にふさわしいイメージや、キャリトレの提供価値、情緒価値から思い浮かべるイメージと、それを表すキーワードをメンバーにできる限り挙げてもらいます。

メンバーから出たイメージと言葉から、共通するイメージを抽出、統合して1つのムードボードを作成しました。

明るくポップで大胆な若々しいイメージと、デジタルネイティブ世代の使うアプリを象徴するシンプルで余裕のあるイメージ。大きく2つのイメージが印象的なムードボードが出来上がりました。

ここからUIデザインの方向性を決めるため、アプリの画面をいくつか作成し、メンバーに提案。結果として、UIデザインの方向性は最初の提案で進めることになりました。

%3Cp%20style%3D%22font-size%3A%2012px%3B%20text-align%3Acenter%3B%20margin-top%3A%20-4px%3B%20line-height%3A1.4%3B%22%3E%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E6%96%B9%E5%90%91%E6%80%A7%E3%82%92%E6%B1%BA%E3%82%81%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F%E3%82%A2%E3%83%97%E3%83%AA%E7%94%BB%E9%9D%A2%3C%2Fp%3E

提案がすんなりと受け入れられたのは、コンセプトやビジュアルが決まっていないプロジェクトの早い段階で、コアなメンバーを巻き込んで、一緒にイメージやキーワードをすり合わせられたおかげだと思います。

このムードボードが、デザインガイドラインの元になり、プロジェクトの終盤にはデザイン原則にもなりました。リリース後のグロースフェーズでは、デザインに迷ったときはこのデザイン原則に立ち戻るようにしています。

2.コア機能に合致した世界観をデザインする

ムードボードやUIデザインの方向性を決めただけでは、世界観の表現は生まれません。リニューアルのコア機能である転職マップの機能と並行して、世界観を表現するデザインが生まれました。

ここでは、転職マップにフォーカスをあてて、どのように機能と世界観を決めて、作り込んでいったかご紹介します。

開発工数とワクワク感、どちらを優先するか

機能は、カスタマージャーニーマップをもとに画面のワイヤーフレームをつくりながら考えていました。

当初は「転職の進め方がわからない」ペインに対して、転職スケジューラーやToDoリストがアイデアにありましたが、あるときにゲームなどで用いられるマップをモチーフにしたUIのアイデアが提案されました。

ユーザーにとって未知なる「転職」に向かう道で、現在地からゴールに向けて1つずつステップを進めていく。ゲーミフィケーションを用いて、転職の進め方も理解でき、同時に転職にワクワクできるUIが生まれました。

ここで議論になったのは、マップのUIを採用するとデザインにも実装にも工数がかかるため、どのアイデアを採用するかです。

プロダクト開発のセオリーでは工数が少ないに越したことはありません。しかし、ムードボードの作成などを通じて、ユーザーがワクワクできるかなど定性面での判断軸がチームに生まれていました。

結果的に、工数はマップの方が高かったにも関わらず、マップのUIを採用することになりました。

アプリの世界観「ポジティブな未来への冒険」の誕生

マップのUIからアイデアが広がり、ユーザーに提供したいのはRPGで勇者が冒険に出かけるときの不安と期待が入り混じった気持ちという考えから、「冒険」のキーワードが浮かび上がりました。

そして誕生したのが、リニューアル後の世界観を表す「ポジティブな未来への冒険」です。

当初、転職マップも工数がかかり過ぎないようシンプルな1画面のみのデザインでしたが、リニューアルのコア機能に決まり、世界観が出来上がっていくと、長い一枚絵として時間をかけて作り込む意思決定がされました。

%3Cp%20style%3D%22font-size%3A%2012px%3B%20text-align%3Acenter%3B%20margin-top%3A%20-4px%3B%20line-height%3A1.4%3B%22%3E%E8%BB%A2%E8%81%B7%E3%83%9E%E3%83%83%E3%83%97%20%E3%83%96%E3%83%A9%E3%83%83%E3%82%B7%E3%83%A5%E3%82%A2%E3%83%83%E3%83%97%E3%81%AE%E3%83%97%E3%83%AD%E3%82%BB%E3%82%B9%3C%2Fp%3E

機能の開発と並行して、世界観をブラッシュアップしていき、「冒険」のキーワードから砂漠や雪原など、非日常的な冒険の世界観が広がっていきました。

%3Cp%20style%3D%22font-size%3A%2012px%3B%20text-align%3Acenter%3B%20margin-top%3A%20-4px%3B%20line-height%3A1.4%3B%22%3E%E5%AE%8C%E6%88%90%E3%81%97%E3%81%9F%E8%BB%A2%E8%81%B7%E3%83%9E%E3%83%83%E3%83%97%3C%2Fp%3E

同じくコア機能の「ドリブン診断」も、診断結果で表示されるキャラクターのデザインは、ゲームキャラクターのような個性的で親しみを持てるデザインになっています。

転職マップをドリブン診断のキャラクターが進む演出にすることで、2つの機能を1つの画面に統合することができました。

3.転職マップをベースに、アプリをブラッシュアップする

UIデザインの方向性と、「ポジティブな未来への冒険」という世界観ができたところで、アプリのいたるところにこの世界観を反映しました。

必要情報の登録完了画面や、エンプティ画面、ネットワーク不通時のエラー画面など。転職マップの世界観をアプリ全体に展開して、アプリの世界観を統一していきました。

%3Cp%20style%3D%22font-size%3A%2012px%3B%20text-align%3Acenter%3B%20margin-top%3A%20-4px%3B%20line-height%3A1.4%3B%22%3E%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E3%81%95%E3%81%BE%E3%81%96%E3%81%BE%E3%81%AA%E7%94%BB%E9%9D%A2%E3%81%AB%E4%B8%96%E7%95%8C%E8%A6%B3%E3%82%92%E5%8F%8D%E6%98%A0%3C%2Fp%3E

特に力を入れたのは、登録導線の部分です。

課題でもあった「登録突破率」を向上するため、登録導線の改善も行なったうえで、アプリ起動時のスプラッシュ画面にも世界観を反映したアニメーションを取り入れました。

%3Cp%20style%3D%22font-size%3A%2012px%3B%20text-align%3Acenter%3B%20margin-top%3A%20-4px%3B%20line-height%3A1.4%3B%22%3E%E5%88%9D%E5%9B%9E%E8%B5%B7%E5%8B%95%E6%99%82%E3%81%AE%E3%82%B9%E3%83%97%E3%83%A9%E3%83%83%E3%82%B7%E3%83%A5%E7%94%BB%E9%9D%A2%3C%2Fp%3E

アプリを開いた一瞬でユーザーの興味を引き出せるよう、アプリを立ち上げた瞬間に心をつかみ、少ない操作で登録を完了できるようデザインしました。

意思決定者との合意形成にはプロトタイプを

ここまで説明してきた世界観を表す表層部分のデザインや、ネイティブアプリに慣れ親しんだ20代に向けて刷新したインタラクションデザインなどのプレゼンは、事前に意思決定者にプロトタイプを触ってもらったり、一連の機能をまとめた動画を作成したりしました。

抽象的なコンセプトやビジュアルデザインの意図を論理的に説明することも大事ですが、言葉で説明できない部分もあります。そういった言葉で伝えづらいものは、最終的にビジュアルで伝えた方が早いと気付きました。

リニューアル後「登録突破率」「継続利用率」は改善

プロジェクトが始まって約8ヶ月で、リニューアルしたアプリが公開されました。リニューアルの注力ポイントだった「登録突破率」と、「継続利用率」の指標であるリテンション率は共に改善しました。

また、転職が決まったユーザーからも「ドリブン診断の結果が自己分析に役立った」などポジティブな意見をいただいています。メンバー全員が妥協せず、本当に自分たちが使いたいと思えるアプリにこだわっていたので、とても嬉しかったです。

おわりに

今回のリニューアルで、転職マップのデザインを担当した殷にも、リニューアルプロジェクトの気付きを聞いてみました。

ユーザー体験に責任を持つように、ユーザーの「心をつかむ」ことにも責任を持つ

コンセプトを表現する世界観から作り込んだのは初めての取り組みでしたが、結果的に最初に転職マップを作り込めたことが良かったです。転職マップには、各画面に展開した素材や世界観の基準になる要素が含まれていて、コンポーネント集のような役割を果たしてくれました。
また、リニューアルを通してチーム全体で世界観やビジュアルデザインの必要性を共有でき、グロース段階に入っても、画面にイラストを入れられないか議論できるようになったのも良い変化だと感じています。
世界観や表層のデザインを作り込む影響は、短期的な数字には表れづらく、デザイナーでない方には、優先度が低いと思う人もいるかもしれません。
しかし、リテンション率が改善したように、長期的に見ればポジティブな結果をもたらすと思っています。
ユーザーがなぜアプリを使うのか、アプリを好きになれるかは、コンセプトを表す世界観のような魅力的価値による部分も大きいです。デザイナーがユーザー体験を担保するように、ユーザーの心をつかむことに責任を持つのも1つの役割だと思いました。

アプリはリニューアルしたばかり、本番はこれからです。

リリース後は、ユーザーと年齢が近い20代を中心としたメンバーで、サービス全体を俯瞰しつつ、わたしたちが本当に使いたいアプリかを意識して高速で改善サイクルを回しています。同時にエージェント企業様を含むすべての企業様に向けても、求職者と出会いやすいサービスへの改善を進めています。

20代の若者が転職にワクワクできるだけでなく、企業様と出会って、ポジティブな転職やキャリアアップ、新たな挑戦を提供できるサービスを目指し、これからもサービスの価値を磨きこんでいきたいです。