

LITALICOライフ
勉強会予約サイト
UI/UXリニューアル
「その人」に合ったライフプランを。
LITALICOライフ勉強会予約サイトの
UI/UXを改善。
Clients / Agency
株式会社LITALICOライフ
Released
2020.4
Services
- クリエイティブ制作
- エンジニアリング
- プロジェクトマネージメント
- デザインリサーチ
- デザインスプリント
- コピーライティング
- アートディレクション
- WEBデザイン
- グラフィックデザイン
- スチル制作
- フロントエンド
Project Overview
新サービス立ち上げに合わせた、UI/UXを見直すサイトリニューアルを行いました。
事前にユーザー調査、ペルソナ・カスタマージャーニー策定、ユーザビリティ評価を実践し、ユーザーにどのような体験を提供できるかを共創しながら制作しました。
Challenge
ポータルサイト:
各広告施策のランディング先として、よりわかりやすいUIが求められていました。
既存サービス「発達障害」:
旧サイトに順次コンテツが足されていったことで、サイト全体としてのユーザビリティが損なわれ、機会損失につながっている可能性がありました。
新サービス「個性を伸ばす教育」:
既存サービスのユーザー層とは異なるという仮説に対して、実際のユーザーの思考、サービス自体のあるべき姿を明らかにする必要がありました。

Process
ユーザーインタビュー
デザインスプリントの事前準備として、各サービスのユーザーに3名ずつインタビューを実施しました。
ユーザーインサイトを最大限引き出せるように、弊社サービスデザイナーが設計し、全体進行を行いましたが、より深い気付きが得られるよう、インタビューアーは事業担当者様に自ら担当いただきました。
ワークショップ
既存サービス「発達障害」:
デザインスプリント(シンセシススプリント)を実施しました。
現状およびユーザーニーズを分析し、そのギャップを埋めるための取り組みを言語化しました。
新サービス「個性を伸ばす教育」:
デザインスプリント(マーケティングストラテジースプリント)を実施し、「何のためのサービスか」「私たちならではの提供価値」を言語化しました。
ユーザビリティ評価
競合他社サイトとの比較分析を実施しました。
また、導き出された課題に沿ってユーザーインタビューを設計し、実際に旧サイトに触ってもらいながら回答してもらいました。
実際のユーザー導線や情報認知の傾向をサマリーとしてレポートにまとめました。
情報設計
ペルソナ、カスタマージャーニーを元に、申し込みまでの導線、必要なコンテンツ等を検討しました。
全体の構造としては、既存サービスと新サービスの各サイトを作成した上で、2つを格納するポータルサイトを作成したことで、両サービス以外のコンテンツも許容できる拡張性の高さを実現しました。
スマートフォンファーストのUI設計で、スクロールを極力少なくしつつ、読み進める中で自ずと理解が促進される構造を目指しました。


デザイン
今後の新サービス立ち上げを見据えて、各サービス固有のデザインを作成するとともに、ブランド全体に共通するモチーフも開発しました。
分析結果を元に、カラーパレットの設計や、コンバージョンポイントとの明確化など、ターゲット層に適切に訴求できるデザインを意識して作成しました。

開発
CMS実装を担当する開発会社様と連携しながら、主要ページのコーディング、CMS用画像パーツなどフロントエンドにかかわる成果物を作成しました。
撮影
勉強会の講師紹介用の写真(26名分)の撮影を3日間で行いました。
限られた時間での撮影のため、事前に綿密なスケジューリングを行うことで、クオリティが担保できるよう進めました。
https://life.litalico.jp/staff/
Team
プロデューサー/プランナー
中田裕宣
プロジェクトマネージャー
今川潤子
ディレクター
尾崎菜穂
コンテクストデザイナー
井原久美子
アートディレクター
岩瀬隆文
デザイナー
澤田眞理子
エンジニア
株式会社モノサス
カメラマン
石橋雅人(Studio Function)
URL
- 勉強会ポータルサイト|https://life.litalico.jp/
- 発達障害/勉強会予約サイト|https://life.litalico.jp/hattatsu/
- 個性/勉強会予約サイト|https://life.litalico.jp/kosei/