健康的な習慣づけをサポートしてくれる
アプリ

UX UIデザイン (Googleコース)
プロジェクトの概要
「Healthy」アプリを使うと、ユーザーは健康的な習慣を作って、その進捗を追跡することができます。
プロジェクト期間
2022年2月~2022年3月
自分の役割
UX/UIデザイナー、UX研究者
課題
現在、成人の10人に6人以上が、平均余命だけでなくライフスタイルにも影響を与えうる少なくとも1つの慢性疾患をもっています。多くの成人にとって、ライフスタイルのために健康的な習慣が必要であることを知っていても、健康的な習慣を身につけることはまだ難しいです。
ゴール
大人が健康習慣を身につけるために役立つアプリを作成です。
自分の責任
UXデザインプロセス: 共感、定義、アイデアを出し、インタビューを実施、紙とデジタルワイヤーフレーム、モックアップと低忠実度のプロトタイプです。
Healthy habits App
インタビューのテーマは、健康的な習慣を身につける方法、新しい健康な習慣を身につける時にどのような困難があるかユーザーに聞きました。
そして、すでに使われているアプリがどのようなものか、それらがどのような機能があるか、その情報を確認しました。また、さまざまな年齢層にインタビュー。
ユーザーの望みを理解
ユーザーのペイン・ポイント

1. モチベーション
モチベーション不足の問題

2. 使いやすさ
ナビゲーションが複雑すぎる

Habits - Persona 1Habits - Persona 2healthy habits user journey Miky
AppStoreの3つのアプリの競合調査:Habit Tracker、Routinery、Habitify。
競争調査
観察

主な利点:
1. シンプルなデザイン
2. 習慣リスト
3. 1週間の習慣トラッカーの進捗率 (%)
4. 友達とチャレンジ!

主な短所:
1. 複雑なナビゲーション
2. タスクが完了してもタスクのアイコンが変わらないため、完了したかどうかがわかりにくかった
3. 1つだけで十分なのに、2つのタイマー画面が表示される
4. アイコンのスタイルが良くない

健康習慣トラッカーをデザインするために、簡単なアイデションを行いました。
特に、単純なフローに注目しました。
アイデエーション
ideas healthy habits
低忠実度プロトタイプのメインフロー。
低忠実度プロトタイプ
Click to check a low-fi prototype
healthy habits lo-fi prototype
スタディタイプ: モデレートユーザビリティ調査

場所: 日本、リモート

参加者: 5名
ユーザビリティスタディ:
発見事項
見つけたこと

1. タイマーの設定とタスクの完了表示にはわかりやすいフローが必要

2. レベルとタスクの実施を確認できるデザインが必要である

3. 友達を招待して結果を見せるオプション

4. 山を用いたアイコンは分かりにくかったため、「Friends」の意味をもっと明確にするアイコンが必要である

1. 主なペインポイントは、 「勉強」 のような習慣を完了させることでした。ユーザは、なぜそれが複数の部分で作成されているのか、タイマーの設定方法を理解しておらず (タイマーのアイコンを無視していた時に) 、ただクリックするだけでした。このようなペインポイントのため、一つクリックできるカテゴリーに調整しました。
そのカテゴリーは習慣のトラッカーの進歩表示になりました。

2. 日中の時間によって習慣を分別しがたいユーザーのための「いつでも」時間ボタンの追加

3. 毎日の成功とレベルのアイコン: シード->芽->植物->木というレベルの分離は、多くのユーザーをやる気にさせます。

モックアップ
healthy habits usability study 1healthy habits usability study 2
高忠実度プロトタイプのメインフロー。
高忠実度プロトタイプ
Click to check a Hi-fi prototype
healthy habits Hi-Fi prototypehealthy habits
1. 明確な意味しているアイコンのデザイン

2. アラームのオプション

3. 高コントラストのユーザーインターフェイス

アクセシビリティに関する考慮
画面サイズのバリエーション
healthy habits
インパクト:

ユーザーはそのアプリが気に入り、Hi-Fiプロトタイプのすべてのフローを達成出来ました。

学んだこと:

スマートフォンとWebページの操作はまったく異なることがわかり、すべてのバージョンデバイスに合わせて調整する必要がありました。UIについては、グラフィックと写真のスタイルが統一していない、1つのスタイルで作成するべきです。


テイクアウェイ
次のステップ

1. ノートPCとタブレットPCのデザインを見やすいものに変更します。