ヘルスケアアプリUI/UX(非公開案件)

Featured image of the post
💡
※本プロジェクトは非公開案件のため、画面UIの一部に「Material 3 Design Kit」(CC BY 4.0)を一部改変した仮画像を使用しています。

プロジェクト概要

クリニック患者のヘルスケア管理を目的とした新規WebアプリのUI/UXを担当しました。

また、遷移図の作成や Bulma CSS framework を使用した一部のコーディングを行いました。

  • 社内チーム規模:7名程度
    (ディレクター1名、マネージャー1名、デザイナー1名、フロントエンド2名、バックエンド2名)

課題背景と施策

  • ヘルスケアに関するQ&Aや専用タイマーなど複数の機能を実装するため、利用頻度や目的に応じて情報の優先順位を整理。画面構成と導線を設計し、ワイヤーフレームを作成しました。
  • 認知負荷を抑え、目的の情報へ少ない操作で到達できるよう、フィードバックをもとに画面遷移を見直しました。詳細情報は階層を分け、1画面に表示する情報量を整理しました。
  • クライアントからの要望・課題
    • コーポレートカラーやブランディングが確立されていなかったため、同業他社や競合サービスを調査・比較し、ブランドイメージに適した配色を提案しました。
    • ヘルスケアへの取り組みを可視化したいという要望に対し、日々の行動に応じてポイントを獲得できる仕組みと、その達成状況を視覚的に確認できるUIを設計しました。
  • ユーザーが抱える課題
    • 「健康のために何をすればよいか分からない」という課題に対し、取り組むべき行動をToDoとして提示し、具体的な行動につなげられるよう設計しました。
  • 開発チームとの連携
    • 複数国籍のスタッフが開発に参加するため、クライアント向けの日本語資料とは別に、Figmaを活用して仕様や補足情報を共有。各スタッフがブラウザ上で自国の言語に翻訳しながら確認できるよう、コミュニケーション方法を工夫しました。

担当した作業の流れ

  • 社内マネージャーからクライアントの要件を共有
  • ユーザー・利用シーン整理、情報設計
  • ワイヤーフレーム作成
  • UIデザイン作成
  • 遷移図と仕様書の作成
  • 一部コーディングの参加

ラフスケッチ ※イメージ:

Image in a image block

移管図の一部:

Image in a image block