もし一瞬でも
「勉強って楽しいかも」
と思えたなら、それが一番の成果です。
概要
このプロジェクトは、ロシア最大級の小売グループ 「X5 Group」のために実施されました。
何千万人もの家族が利用する企業の一環として、学習体験をより直感的で楽しいものにすることを目指しました。
このプロジェクトは、ロシア最大級の小売グループ 「X5 Group」のために実施されました。
何千万人もの家族が利用する企業の一環として、学習体験をより直感的で楽しいものにすることを目指しました。
このプロジェクトは、ロシア最大級の小売グループ 「X5 Group」のために実施されました。
何千万人もの家族が利用する企業の一環として、学習体験をより直感的で楽しいものにすることを目指しました。
👔クライアント
X5 Group（ロシア最大級の小売グループ）
👔クライアント
X5 Group（ロシア最大級の小売グループ）
👔クライアント
X5 Group（ロシア最大級の小売グループ）
👨👩👧👦対象ユーザー
7〜18歳の子供とその保護者
👨👩👧👦対象ユーザー
7〜18歳の子供とその保護者
👨👩👧👦対象ユーザー
7〜18歳の子供とその保護者
🎯目的
楽しく直感的で、誰でも使いやすい学習体験を提供
🎯目的
楽しく直感的で、誰でも使いやすい学習体験を提供
🎯目的
楽しく直感的で、誰でも使いやすい学習体験を提供
体制
体制
体制
僕はプロダクトデザイナーとして以下を担当しました：
既存UIの分析と改善 デザインシステムの整理とアップデート 登録・オンボーディングフローの再設計 生徒・保護者向けダッシュボードのUI設計 開発チーム・イラストレーターとの協働
僕はプロダクトデザイナーとして以下を担当しました：
既存UIの分析と改善 デザインシステムの整理とアップデート 登録・オンボーディングフローの再設計 生徒・保護者向けダッシュボードのUI設計 開発チーム・イラストレーターとの協働
僕はプロダクトデザイナーとして以下を担当しました：
既存UIの分析と改善 デザインシステムの整理とアップデート 登録・オンボーディングフローの再設計 生徒・保護者向けダッシュボードのUI設計 開発チーム・イラストレーターとの協働
期間
2ヶ月
期間
2ヶ月
期間
2ヶ月
課題 (Challenges)
デザインシステムの一貫性不足
ボタンやフォームなどの
コンポーネントがバラバラで、
開発にも混乱が生じていた。
デザインシステムの一貫性不足
ボタンやフォームなどの
コンポーネントがバラバラで、
開発にも混乱が生じていた。
複雑な登録フロー
生徒用か保護者用かが不明確で、
途中で迷うユーザーが多かった。
複雑な登録フロー
生徒用か保護者用かが不明確で、
途中で迷うユーザーが多かった。
ターゲットに合わないUI
子供にとっては楽しくなく、
保護者にとっては複雑でわかりにくいデザインだった。
ターゲットに合わないUI
子供にとっては楽しくなく、
保護者にとっては複雑でわかりにくいデザインだった。
アクセシビリティ未対応
WCAGに沿っていないため、
弱視のユーザーには利用しづらかった。
アクセシビリティ未対応
WCAGに沿っていないため、
弱視のユーザーには利用しづらかった。
複雑な登録フロー
生徒用か保護者用かが不明確で、
途中で迷うユーザーが多かった。
複雑な登録フロー
生徒用か保護者用かが不明確で、
途中で迷うユーザーが多かった。
デザインシステムの一貫性不足
ボタンやフォームなどの
コンポーネントがバラバラで、
開発にも混乱が生じていた。
デザインシステムの一貫性不足
ボタンやフォームなどの
コンポーネントがバラバラで、
開発にも混乱が生じていた。
アクセシビリティ未対応
WCAGに沿っていないため、
弱視のユーザーには利用しづらかった。
アクセシビリティ未対応
WCAGに沿っていないため、
弱視のユーザーには利用しづらかった。
ターゲットに合わないUI
子供にとっては楽しくなく、
保護者にとっては複雑でわかりにくいデザインだった。
ターゲットに合わないUI
子供にとっては楽しくなく、
保護者にとっては複雑でわかりにくいデザインだった。
リサーチ (Research)
改善の方向性を明確にするため、以下のリサーチを実施しました
改善の方向性を明確にするため、以下のリサーチを実施しました
改善の方向性を明確にするため、以下のリサーチを実施しました
🖥️ 既存UIの分析
ボタンの色や階層構造に問題があり、ユーザーがどこを押せばいいのか迷いやすい状況を確認しました。特に赤色をCTAに使っていたことが混乱の原因となっていました。
🖥️ 既存UIの分析
ボタンの色や階層構造に問題があり、ユーザーがどこを押せばいいのか迷いやすい状況を確認しました。特に赤色をCTAに使っていたことが混乱の原因となっていました。
🖥️ 既存UIの分析
ボタンの色や階層構造に問題があり、ユーザーがどこを押せばいいのか迷いやすい状況を確認しました。特に赤色をCTAに使っていたことが混乱の原因となっていました。
🎤 ユーザーインタビュー
生徒・保護者双方から「誰のプロフィールを作っているのかわかりづらい」という声が多く寄せられ、登録フローの見直しが必要と判明しました。
🎤 ユーザーインタビュー
生徒・保護者双方から「誰のプロフィールを作っているのかわかりづらい」という声が多く寄せられ、登録フローの見直しが必要と判明しました。
🎤 ユーザーインタビュー
生徒・保護者双方から「誰のプロフィールを作っているのかわかりづらい」という声が多く寄せられ、登録フローの見直しが必要と判明しました。
📊 競合比較
ボタンの色や階層構造に問題があり、ユーザーがどこを押せばいいのか迷いやすい状況を確認しました。特に赤色をCTAに使っていたことが混乱の原因となっていました。
📊 競合比較
ボタンの色や階層構造に問題があり、ユーザーがどこを押せばいいのか迷いやすい状況を確認しました。特に赤色をCTAに使っていたことが混乱の原因となっていました。
📊 競合比較
ボタンの色や階層構造に問題があり、ユーザーがどこを押せばいいのか迷いやすい状況を確認しました。特に赤色をCTAに使っていたことが混乱の原因となっていました。
プロセス (Process & Approach)
🎨 デザインシステムの整理
Figma内のコンポーネントを再構築し、色・ボタン・フォームなどを整理。開発チームがそのまま使える状態に統一しました。
🎨 デザインシステムの整理
Figma内のコンポーネントを再構築し、色・ボタン・フォームなどを整理。開発チームがそのまま使える状態に統一しました。
🎨 デザインシステムの整理
Figma内のコンポーネントを再構築し、色・ボタン・フォームなどを整理。開発チームがそのまま使える状態に統一しました。
📝 登録フローの再設計
メール・SNS両方の登録に対応。保護者用・生徒用の区別を明確にし、オンボーディングを短縮しました。
📝 登録フローの再設計
メール・SNS両方の登録に対応。保護者用・生徒用の区別を明確にし、オンボーディングを短縮しました。
📝 登録フローの再設計
メール・SNS両方の登録に対応。保護者用・生徒用の区別を明確にし、オンボーディングを短縮しました。
👤 ダッシュボード設計
生徒用と保護者用に分けて情報を整理。進捗や課題が一目で分かるインターフェースにしました。
👤 ダッシュボード設計
生徒用と保護者用に分けて情報を整理。進捗や課題が一目で分かるインターフェースにしました。
👤 ダッシュボード設計
生徒用と保護者用に分けて情報を整理。進捗や課題が一目で分かるインターフェースにしました。
デザイン (Design)
成果 (Results)
登録完了率の改善
保護者のサポートなしで子供自身が登録できるケースが増加。
登録完了率の改善
保護者のサポートなしで子供自身が登録できるケースが増加。
登録完了率の改善
保護者のサポートなしで子供自身が登録できるケースが増加。
アクセシビリティ向上
WCAG基準に対応し、高コントラストモードを導入。弱視ユーザーにも利用しやすいUIを実現。
アクセシビリティ向上
WCAG基準に対応し、高コントラストモードを導入。弱視ユーザーにも利用しやすいUIを実現。
アクセシビリティ向上
WCAG基準に対応し、高コントラストモードを導入。弱視ユーザーにも利用しやすいUIを実現。
チーム効率の改善
コンポーネントの統一により、デザインと開発間のコミュニケーションがスムーズに。
チーム効率の改善
コンポーネントの統一により、デザインと開発間のコミュニケーションがスムーズに。
チーム効率の改善
コンポーネントの統一により、デザインと開発間のコミュニケーションがスムーズに。
Figmaファイルの最適化
デザインシステムを整理し、開発者がそのまま効率的に実装可能に。
Figmaファイルの最適化
デザインシステムを整理し、開発者がそのまま効率的に実装可能に。
Figmaファイルの最適化
デザインシステムを整理し、開発者がそのまま効率的に実装可能に。
継続率の向上
+27.64% マラソン課題の完走率が上がり、リピート利用も増加。
継続率の向上
+27.64% マラソン課題の完走率が上がり、リピート利用も増加。
継続率の向上
+27.64% マラソン課題の完走率が上がり、リピート利用も増加。
E+ Awards 2025 winner (Bronze)
