[App/Web] 学生認証フローのデザイン

Summary

課題と背景

• 学生認証サービスの切り替えを実施するタイミングで、基盤の移行をする
• Webの新基盤移行プロジェクトが別チームで進んでいたため、デザインシステムを合わせながら進めていく必要がある
• 新しい学生認証サービスはアプリのインストールが必要で、複雑な導線設計になるので、ユーザーの離脱を防ぎたい
• まだ始まったがかりの認証サービスのため、サービス提供側と認識合わせをしながら進めていく
• Web、アプリの両方から学生認証の動線があるため、どちらも設計する必要がある

やったこと

• 学生認証サービスをまたいだ学割プランの課金動線のデザイン

工夫点

• Webリニューアルチームで定義されているデザインシステムに合わせていくため、コンポーネントについて整理と議論をしながら進めていきました
• 学生にとって、認知負荷が高い設計となるので、学生の声を聞きながらデザインをしました

考察と学び

• デザインシステムについて、共通ルールを設ける部分は丁寧に抑える（フッターとコンテンツの距離、ブレイクポイントなど...）
• 課金フローは一貫性を持ってデザインをする必要があるため、全体を通してデザインを設計する（ボタンのやフォームのサイズ、言葉など）
• 実際に導入サービスを使ってみることで、離脱ポイントが把握できる
• サービス導入前後の数値感を事前に把握しておくことで、導入前後の変化が明確になる

Process & Output

既存フローの洗い出しと変更点の整理

仕様の疑問を解決していく

実際に課金画面から、アプリインストール、学生認証までのフローのワイヤーを作成し、仕様の不明点を整理する。自分でもアプリを入れてみて、スクショを撮りながら整理していきました。

最も重要な導入画面について、パターンを出して最適なデザインを模索する

事例リサーチをしながら、簡単に見える方向性を練っていきました。ビズメンバーと認識合わせをしています。

課金〜学生認証〜学割申込のフローについて、アプリ、Webの両方の画面を設計する

別で走っている新基盤移行のプロジェクトのチームと、デザインシステムの整合性について議論しながら進めていきました。エラーパターンやインタラクションも網羅していきます。

実装してもらいながら、挙動のすり合わせ、挙動変更による文言の修正をする

適宜ビズメンバーとも すり合わせをして、最終的な文言を調整しています。