Facebook Beomil(ビオミル)_デザインデータ
Logo

Beomil(ビオミル)_デザインデータ

クレジット
Avatar
デザイナー
企画
制作ノート
Beomil(ビオミル)_東京デザインプレックス研究所_UI / UX専攻チーム制作課題
image

はじめに

こんにちは!Toshifumiです。私のページに来ていただきありがとうございます!

今回は、私が東京デザインプレックス研究所のUI / UX専攻受講時に制作した、チーム課題についてお話します。

Beomil(ビオミル)とは

Beomil(ビオミル)とは、「短期間で理想の"見た目"を取り戻すヘルスケアサービス」というコンセプトのスマートフォンアプリです。

ターゲットユーザーの「理想の(綺麗な)見た目になりたい!!」を解決するために、「見た目記録」「体重記録」「食事記録」の3機能があります。

制作プロセス(中間レビューまで)

チーム

チームは私を含めた4名で行いました。メンバー各々バックグラウンドが様々で、個性や特徴が絶妙に被らずバランスが取れていました。

私がチーム内で1番長くIT領域に関わっていることもあり、流れでリーダーポジションになっていました。クラス全体の自己紹介で、プロダクトデザイナーからPdMのキャリアを考えていると話していたので、講師陣からも「もうPdMだ!」と言われていました笑

簡単にメンバーの紹介です。

  • 30代女性:人材コンサルティング会社勤務。ビジネス職。マネジメント力に長けたしっかりお姉さん。私のブレーキ役。主にチーム全体のオペレーション、中間レビュー後のユーザーインタビューを担当。
  • 20代女性:事務職からUIデザイナーへの転職を目指し中。チームのアイデアや構想をUIに落とし込む表現力が光る。主にUIビジュアルの作成と中間レビュー後のユーザーインタビューを担当。
  • 20代男性:データサイエンティスト。定性調査やデザインの知見を得たく受講。あまり主張をしない引っ込み思案だが、常に問いを持ち思考し続けるブレーン。主にデスクリサーチ、資料作成、プロトタイピングを担当。
  • 私:ワークショップのファシリテーション、コンセプトメイキング、情報設計、コンポーネント作成、全体ディレクションを担当。

アイデア出し

アイデア出しは制限を設けず、ブレインストーミングの形式で行いました。始めは個人に分かれ、後にチームでまとめるという流れで進めました。

チームでまとめる際は、KJ法の一部を活用しました。今回のBeomilに関わるもの以外では、マインドフルネスや思考整理など、様々な領域のアイデアが出ました。

課題抽出 / 仮説立て / 企画

アイデア出しでまとめたものを元に、どういった人がターゲットになるのか、どういった課題を持っているのかを深掘っていきました。大きな課題を設定し、そこからロジックツリーをホワイトボードに書いて分析をしていきました。

中間レビュー時のペルソナ(簡易版)

中間レビュー時のペルソナ(簡易版)

中間レビュー時までの仮説まとめ

中間レビュー時までの仮説まとめ

チームで出た結論としては、「カラダづくりで重要な要素の1つとして体重管理と食事管理が挙げられるが、十分に行うにはハードルが高い」というものでした。特に「続けられない」原因は、「考えることが多すぎてめんどくさい」「変化がわからない / 成果がわからない」ということでした

中間レビュー時のサービスコンセプト

中間レビュー時のサービスコンセプト

そこで、栄養バランスが取れた宅食をベースに食事管理を行い、合わせて体重管理を行ってカラダづくりを目指すという方向でプロダクト開発を行うことに決定しました。この時点のコンセプトコピーは「あなただけの宅食で「理想のカラダ」に」に決定しました。

デザイン作成

中間レビュー / ユーザーテスト時のモックアップ

中間レビュー / ユーザーテスト時のモックアップ

初期ガイドライン

初期ガイドライン

初期コンポーネント

初期コンポーネント

成果物作成は私も含めてチームの知見やスキルが乏しく、非常に苦戦しました。特に機能要件の定義、情報設計、コンポーネント設計、どのコンポーネントをどの画面でどういった配置で活用していくのかという壁にぶつかりました。

また、制作課題の条件としてiOSを前提に作成するというものがありましたが、HIGの理解が追いつかず、ガイドラインに準拠したものを十分に作成することができませんでした。

更に、全体を通して作業可能な見込み時間が20時間に満たず、細部のインタラクションやサイズ感など、様々な側面で作り込みに不満が残りました。

その中でも各メンバーの特徴を活かし、その時点で最大限できることを実践していきました。具体的には、最低限の色やフォント、コンポーネントのサイズ定義です。また、他の既存アプリを触ることでデザイン作成の参考にしていきました。

制作プロセスまとめ

以上が中間レビューまでの制作プロセスです。これまでの私の経験から、プロダクト開発を始め様々な事柄において、「初期段階の仕込み」がいかに重要であるかを痛感してきました。今回のワークでもできる限り実践しようと思いましたが、自身の至らなさや時間的制約など、様々な要因で満足に実施することができませんでした。

しかし、各メンバー間で素晴らしい連携をする(Slackで密にコミュニケーションを取る、必要あればZoomでMTGを実施する)ことができたので、中間レビューまでに主機能を含めた課題要件(登録からオンボーディング、主機能最低1つ)を完成させることができました。

中間レビュー / ユーザーテスト

授業の一貫で、初期段階のプロダクトをお披露目するレビュー会を行いました。また、中間レビューまでの成果物を用いて、ユーザーテストも実施しました。ここではそのまとめをしていきます。

講師陣からのフィードバック

講師陣からのフィードバックは、非常に有意義なものばかりでした。それと共に、まだまだチーム全体が力不足であること、そして伸び代ばかりであることを痛感しました。具体的には、コンセプトからUIに至る提供価値の一貫性担保、ペインに対する解決策の妥当性が不十分であったことです。

簡単にまとめると以下の通りです。

  • コンセプトから差別化ポイントが分かりづらい
  • 「宅食」は現時点で一般的な用語と言いづらい
  • 今回のペルソナであれば栄養素まで管理する機能は必要ない(栄養素まで細かく管理する人はガチ勢)
  • ゴールに向かって確実に進んでいる実感が可視化されるとよい(その実感がないとプロダクトを使う意味を見いだせない)
  • ユーザーのペインに対する解決策、それに対応する機能の流れをシャープにしたい

上記を踏まえ、ユーザーテスト後にコンセプトから見直すことに、チームで決定しました。

ユーザーテスト実施

ユーザーテストの結果、様々なことが明らかになりました。以下はその簡単なまとめです。

  • 会員登録時に頼めるメニューが分からない → 「登録したい!」という意思決定が難しい
  • 新規登録時の要求する情報の多さ(面倒くさい)、押せそうなアイコンが押せるものではない、無意識に確認したいこと(例:メニュー詳細)が導線の中に存在しないなど、大小問わずアクセシビリティに多くの問題がある
  • 自炊もするのでそれも管理したい(サービス内の宅食しか登録できないのであれば使わない)

中間レビューとユーザーテストを経て

緊急で改めて集まり、チームMTGを実施しました。当初コンセプトメイキングの過程で形にしていたユーザーストーリーを振り返りました。しかし、「続けられない」ということにフォーカスをしていることに関しては間違っていなさそうなものの、「続けられる人」と「続けられない人」の差分をより明確にする必要があるという意見が挙がってきていました。そこで、チーム内で独自でカリキュラムとは別に、ユーザーインタビューを実施することにしました。

ユーザーインタビュー

インタビューシート

インタビューシート

私は正直言うと、当初ユーザーインタビューの実施に対して否定的でした。なぜなら、中間レビューのフィードバックを元にした改善点が多くあったこと、最終発表までにあまり時間が残されていないこと、UIとプロトタイピングの完成度を上げていきたかったからです。

しかし、結果的にユーザーインタビューを実施して非常によかったと思います。その理由は、「見た目の変化が最重要である」ことがはっきりし、それに対してコミットするために「体重管理」と「食事管理」「運動」をそれぞれ行っているということが分かったからです。

ユーザーインタビューの結果を元に改めてコンセプトを見直し、現在の「短期間で理想の"見た目"を取り戻すヘルスケアサービス」というコンセプトになりました。そして、「見た目記録」を主軸とするプロダクトにピボットしました。

修正 / 最終発表

最終発表時点のデザイン

最終発表時点のデザイン

ピボットを決定し、最終発表に向けて改めて成果物を作成していきました。最終発表まで時間が残されていなかったので、今回は細かい部分の完成度には目をつむり、とにかく形にすることにコミットしていきました。最終発表までに行ったことは、機能要件を簡単にまとめ、それを元にラフ作成とワイヤーフレーム作成、そしてUI作成を進めていき、平行して最終発表の資料作成を進めました。細かい発表資料はこちらをご覧ください。

最終発表までに残った課題

個人的には、最終発表までに非常に多くの課題が残されました。ここでは各カテゴリごとにまとめていきます。

ビジネス視点

  • 収益構造

Beomilを実際に展開する場合、ビジネスとして成り立つのか注意深く試算する必要があります。具体的には、

  • 外部の宅食サービス(今回はnoshさん)との連携を想定する場合、どういったコストがどれくらいの額で必要となるのか
  • 収益ポイントはどこに置くのか(例:プレミアム機能のサブスク、noshさんへの送客手数料)
  • 損益分岐点はどこで、投資はどれくらいの期間どれくらいの額が必要になるのか

の大きく3点が浮かび上がります。

デザイン(プロダクト)視点

  • コンセプトの作り込み
  • OSガイドラインの準拠
  • 要件定義の精度
  • 情報設計の精度
  • コンポーネント設計
  • スタイルガイド / ガイドラインの詳細化
  • ペルソナ設計
  • ユーザー体験の精緻化

デザイン視点では挙げたらキリがありません。今回は非常に限られた時間の中で取捨選択をしなければいけませんでしたが、本来ユーザーに対して提供価値を大きくしていくためには、上記に挙げた課題をクリアしていきたいと思います。

テクノロジー視点

  • 「見た目記録」で貯める画像から、ユーザーの変化をどのように判定し可視化していくか
  • 「見た目記録」「体重記録」「食事記録」のデータから、どのようにそれぞれのユーザーに合わせたコンテンツを提供していくか
  • ホーム画面のメッセージ出し分け(アルゴリズム)
  • 外部サービスとの連携(例:APIの有無)

テクノロジー視点では、まとめるとそもそも既存技術で実現可能なサービスなのか、実現可能だとしてどういった技術を用いてどのように形にしていくのかを考えていく必要があります。しかし、今回はそこまで精緻に考えきることができていませんでした。もしかしたらMVP開発やPoCの初期段階では、細かく正確に詰める必要はないのかもしれません。しかし、いずれにせよ最低でも開発段階で必ず考慮しなければいけなくなります。なので、立ち上げ初期段階から、テクノロジー視点からもデザインやプロダクト開発を考えていきたいものです。

おわりに

ここまでご覧いただきありがとうございます!私自身、非常に多くの学びを得ることができました。特に1番大きかったものが、「可能であれば絶対にユーザーの声を聞いたほうがいい」ということです。リサーチの段階で思考できる部分は思考しきった上でインタビューをするなど、闇雲に聞けばいいとは一切思いません。しかし現実に何が問題で、何を解決しなければいけないのかを、ユーザーから直接できる限り明確に把握していくことは、ユーザーに対して価値提供をしていく上で非常に価値が大きいと痛感しました。インタビュー実施を押し切ってくれたメンバーには本当に感謝しかありません。

改めて今回のワークを通じて、私自身が身についたを思うことを簡単にまとめていきます。

  • UI作成
  • コンセプトデザイン
  • 思考力(ロジカル、ラテラル問わず幅広く強化)
  • チームマネジメント
  • リサーチ

細かく挙げればまだまだありますが、一旦大きなものは以上です。

また、ここまで東京デザインプレックス研究所全体で学んだことは、上記に加え更に多くありました。いずれそちらもまとめていきたいと思います。

そして、最終発表の成果物から私自身で更にデザインを改善を加えました。こちらもまとめております。どういった視点で何を考えながら改善を加えていったのか、そちらもご理解いただければ幸いです。

まだまだ伸び代がたくさんあり、非常にわくわくしております!やっぱりデザインするの楽しい!!

これからももっと楽しみながら他者に、そして社会に価値提供できるように前に進みます。

改めてここまで読んでいただきありがとうございました!ではまた!

シェア
この作品のその他の制作ノート
2212 - 2302_デザインデータ改善個人ワーク
2212 - 2302_デザインデータ改善個人ワーク

もっとみる