fv_final
あああああ

ユーザーニーズをビジュアルに落とし込み
サービスの価値を引き上げる

Group 15

Overview

起業する友人と考案した、"社会科の暗記に特化したLINE@サービス"です。
子供が楽しく学習できる仕組みにより、勉強の習慣をつけ、能動的に勉強できるサイクルを生み出すことができます。また、子供にパーソナライズされた学習法と、子供の勉強の進捗の可視化により、保護者にも成果と信頼を提供します。
現在、ヒアリングを行って、テストアカウントでサービス改善を行っており、3月にリリース予定です。

起業する友人と考案した、"暗記教科に特化したLINE@サービス"です。
子供が楽しく学習できる仕組みにより、勉強の習慣をつけ、能動的に勉強できるサイクルを生み出すことができます。また、子供にパーソナライズされた学習法と、子供の勉強の進捗の可視化により、保護者にも成果と信頼を提供します。
現在、ヒアリングを行って、テストアカウントでサービス改善を行っており、3月にリリース予定です。

My Role

UX / UIデザイン
インタラクション・モーションデザイン
ビジュアルデザイン

UIデザイン
インタラクション・モーションデザイン
ビジュアルデザイン

Tools

Figma
Adobe XD
Adobe Illustrator

Figma
Adobe XD
Adobe Illustrator

Period

2019.09 - 2019.11

2019.09 - 2019.11

Duration

1ヶ月半

Problem

課題の仮説

oboebaは、家庭教師をしている友人が受け持っている、実在するペルソナの課題感を基に考案されたサービスです。
そのため、彼に簡単なインタビューを行なってもらい、その情報からユーザーの属性と課題感を分析しました。

oboebaは、家庭教師をしている友人が受け持っている、実在するペルソナの課題感を基に考案されたサービスです。
そのため、彼に簡単なインタビューを行なってもらい、その情報からユーザーの属性と課題感を分析しました。

Group 262
Group 263

Valuation

提供する価値

oboebaは、上記のペルソナの課題に対して下記の価値を提供することで、
暗記教科の効率的な学習を実現できるように設計しています。

oboebaは、上記のペルソナの課題に対して下記の価値を提供することで、暗記教科の効率的な学習を実現できるように設計しています。

Group 235

勉強の習慣が身につく

勉強の習慣が身につく

5分を暗記の1セットとすることにより、無理なく勉強の習慣をつけ、能動的に勉強できるサイクルを生み出すことができます。

5分を暗記の1セットとすることにより、無理なく勉強の習慣をつけ、能動的に勉強できるサイクルを生み出すことができます。

Group 240

暗記が定着する

暗記が定着する

ヘルマンの忘却曲線に沿って、LINEのメッセージを勉強に取り組む時間に送信することで、暗記を定着させます。

ヘルマンの忘却曲線に沿って、LINEのメッセージを勉強に取り組む時間に送信することで、暗記を定着させます。

Group 237

子供の勉強状態を“見える化”

子供の勉強状態を“見える化”

子供にパーソナライズされた学習法と、テストの点数や、勉強意欲の度合いの可視化により、保護者は常に子供の進捗を把握できます。

子供にパーソナライズされた学習法と、テストの点数や、勉強意欲の度合いの可視化により、保護者は常に子供の進捗を把握できます。

Onboarding Flow

サービス利用のフロー

サービス利用のフロー

サービス初期の認知の拡大のため、
「暗記教科を提供していない個人塾から、受講生とその親に紹介してもらう」という方法をとりました。
個人塾側は、デメリットなしで毎月一定のマージンをとることができます。
また、これによりサービス改善に協力してもらうことも可能としています。

サービス初期の認知の拡大のため、「暗記教科を提供していない個人塾から、受講生とその親に紹介してもらう」という方法をとりました。
個人塾側は、デメリットなしで毎月一定のマージンをとることができます。
また、これによりサービス改善に協力してもらうことも可能としています。

Group 252

保護者側は、塾の紹介でLINEを登録します。
サービス利用のハードルを下げるため、その後の登録導線を全てLINE上で素早く行えるように設計しました。
子供側のアカウント連携についても、QRコードを読み取ることで、簡単に連携することができます。

保護者側は、塾の紹介でLINEを登録します。
サービス利用のハードルを下げるため、その後の登録導線を全てLINE上で素早く行えるように設計しました。
子供側のアカウント連携についても、QRコードを読み取ることで、簡単に連携することができます。

Group 265

Visual Design

暗記を楽しくさせるデザイン

暗記を楽しくさせる
デザイン

「楽しく暗記ができる」ことに焦点を当て、
背景に画像をつける、文中に絵文字を挿入するなどして
勉強に対して抵抗感を感じさせないようなビジュアルデザインを心がけました。

「楽しく暗記ができる」ことに焦点を当て、背景に画像をつける、文中に絵文字を挿入するなどして、勉強に対して抵抗感を感じさせないようなビジュアルデザインを心がけました。

Group 219
Group 220

Chart Graphics

グラフのビジュアライズ

グラフの
ビジュアライズ

oboebaでの暗記の成績を最も分かりやすく示すため、数種類のグラフを用いた画面の設計、及びデザインを行いました。
また、ユーザー自身が定めた目標に対して、達成までのステップを明示することで、暗記に対してのモチベーションを高めます。

oboebaでの暗記の成績を最も分かりやすく示すため、数種類のグラフを用いた画面の設計、及びデザインを行いました。
また、ユーザー自身が定めた目標に対して、達成までのステップを明示することで、暗記に対してのモチベーションを高めます。

Group 174

Tone & Manner

Tone & Manner

世界観

世界観

ターゲットである中学生に、学習サービスと思わせないような柔らかい印象を与えるよう、トーン&マナーを作成しました。
「寒色は暗記効果を増幅させる」というセオリーから外さずに、淡いブルーをプライマリーカラーとして選択しています。
その上で、画面ごとにベースカラーを変更することで、画面の単調さを排除して、暗記体験を飽きさせないようにしました。

ターゲットである中学生に、学習サービスと思わせないような柔らかい印象を与えるよう、トーン&マナーを作成しました。
「寒色は暗記効果を増幅させる」というセオリーから外さずに、淡いブルーをプライマリーカラーとして選択しています。
その上で、画面ごとにベースカラーを変更することで、画面の単調さを排除して、暗記体験を飽きさせないようにしました。

Group 200

Motion

Motion

モーションデザイン

モーションデザイン

フロントエンドエンジニアが再現しやすいよう、Adobe XDを用いてモーションのイメージを作成しています。
マイクロインタラクションやパララックスを効果的に使用することでフィードバックを与え、
暗記中の体験をより楽しいものにしています。

フロントエンドエンジニアが再現しやすいよう、Adobe XDを用いてモーションのイメージを作成しています。
マイクロインタラクションやパララックスを効果的に使用することでフィードバックを与え、暗記中の体験をより楽しいものにしています。

oboeba_animation_portfolio1
oboeba_animation_portfolio2

今回のプロジェクトでは、初めからフロントエンドエンジニアがメンバーとして参画していました。
そのため、データベースの情報をこのグラフで表示できるかどうかや、アニメーションの実現範囲など、
主に実装可能性について議論しながら開発を進めました。


自由にビジュアルを作るのではなく、フロントが実装しやすいデザインデータを詳細にすり合わせて進めることで、
円滑に開発が進むコミュニケーションを心がけました。

今回のプロジェクトでは、初めからフロントエンドエンジニアがメンバーとして参画していました。
そのため、データベースの情報をこのグラフで表示できるかどうかや、アニメーションの実現範囲など、主に実装可能性について議論しながら開発を進めました。

自由にビジュアルを作るのではなく、フロントが実装しやすいデザインデータを詳細にすり合わせて進めることで、円滑に開発が進むコミュニケーションを心がけました。

Next Action

今後の計画

1. ヒアリングと改善

一旦プロダクトとしての形が完成したため、今後友人と塾を回って、ヒアリングと改善を行う予定です。

しかし、ユーザーヒアリングをする前に細部までデザインを作り込んでしまったため、
改善スピードが落ちることを考慮できていませんでした。
そのため、今後サービスデザインの際は、
まず操作できる程度のモックアップで検証することからはじめようと考えています。

また、当初は「覚え婆」という機能を実装する予定でした。
「暗記を進めるごとに覚え婆が若返る」というゲーム要素を追加することで、課題解決ができると考えましたが、
実装工数の関係で断念しました。
諦めた機能の代わりとなる、新たなソリューションについても今後検討していきます。

一旦プロダクトとしての形が完成したため、今後友人と塾を回って、ヒアリングと改善を行う予定です。

しかし、ユーザーヒアリングをする前に細部までデザインを作り込んでしまったため、改善スピードが落ちることを考慮できていませんでした。
そのため、今後サービスデザインの際は、
まず操作できる程度のモックアップで検証することからはじめようと考えています。

また、当初は「覚え婆」という機能を実装する予定でした。
「暗記を進めるごとに覚え婆が若返る」というゲーム要素を追加することで、課題解決ができると考えましたが、実装工数の関係で断念しました。
諦めた機能の代わりとなる、新たなソリューションについても今後検討していきます。

2. プロモーション

サービスの価値を伝えるためのLPや、塾で配布してもらうためのフライヤーなど、
販促のために、まだまだ多くのものを制作する必要があります。
他のタスクとの優先順位を明確にして取り組んでいきます。

サービスの価値を伝えるためのLPや、塾で配布してもらうためのフライヤーなど、販促のために、まだまだ多くのものを制作する必要があります。
他のタスクとの優先順位を明確にして取り組んでいきます。

3. ロゴデザイン

サービスの形が良いものになった段階で、BIとして本腰を入れていこうと考えています。
LINEで利用する関係上、今後は「シンボルロゴ」+「ロゴタイプ」という形で、
用途に応じた使い分けができれば良いと考えています。

ロゴタイプは、シンプルに可読性を考えて作成しました。
シンボルロゴは一旦取り掛かりましたが、コンセプトをうまく落とし込むのに時間がかかると判断したため、
一旦サービスの形を明確にしてから本腰を入れて取り組むことにしています。

サービスの形が良いものになった段階で、BIとして本腰を入れていこうと考えています。
LINEで利用する関係上、今後は「シンボルロゴ」+「ロゴタイプ」という形で、用途に応じた使い分けができれば良いと考えています。

ロゴタイプは、シンプルに可読性を考えて作成しました。
シンボルロゴは一旦取り掛かりましたが、コンセプトをうまく落とし込むのに時間がかかると判断したため、一旦サービスの形を明確にしてから本腰を入れて取り組むことにしています。

Group 160

Other Works

digmeeReleased • Product Design

fastpassUX / UI Design

Other UILanding Page • App • Game

BrandingConcept • Logo

GraphicsDTP • Namecard

IllustrationOther Projects

©︎2020 Yudai Suzuki
Production Period / 2019.11.10 - 2019.12.15