MeinKompass

MeinKompass（マインコンパス）は企業が従業員の健康状態を管理するための工数を削減するとともに、産業医と従業員の距離を近くし、産業医がより従業員の健康状態に関してサポートしやすい環境を構築するためのサービスです。
今回新規でサービスを立ち上げるにあたり、UIデザインを担当しました。

東京インターナショナルとの共同で運営するサービスであり、サービスの企画は東京インターナショナルクリニック側が発案のサービスです。

メインのターゲットは企業の人事やその従業員なので、産業医視点に偏らないように意識しながらデザインするとともに、産業医と人事との業務での関わりや、フローをしっかりと理解しながらプロジェクトを進めていきました。

ヒアリング・フローの作成

産業医がどのような業務を行なっていて、企業の人事や従業員とどのような流れで関わっているかをヒアリングしました。そしてその内容を元にワークフローを設計しました。
ワークフローに起こしたタイミングで疑問や不明点をまとめ再度ヒアリングし、具体的な機能や画面設計の準備を進めていきました。

実施内容

• 東京インターナショナルクリニックへ業務内容に関してのヒアリング
• ヒアリング内容を元にワークフローへの落とし込み
• 疑問点や不明点をまとめ、再度ヒアリング

画面設計

東京インターナショナルクリニックから、画面を元に内容をつめていきたいとの要望があったため、早い段階で画面を作成しました。
ワイヤーを作成し、社内でのサービスへのイメージの胸中認識をある程度構築し、画面へ落とし込みました。
プロトタイプのようなイメージで、ここで画面デザインを決定していくのでは無く、あくまでも足りない機能や画面、要件の漏れが無いかなどの確認のためというスタンスで画面を作成していきました。

• ワイヤー作成

  ワークフローを元にワイヤーを作成しました。業務ごとにフローを確認し、画面やフローに関して大まかにズレがないかを詰めていきました。

  • 
  • 

• プロトタイプの作成

  ワイヤーがある程度固まった段階でプロトタイプを作成しました。全ての画面を作成し、具体的なUIデザインも作成し情報の粒度もさらに細かくしていきまいした。
  プロトタイプでは画面デザインを紙で出力し、画面遷移や、入力、機能などを口頭で説明するという手法をとりました。
  業務フローに沿って機能事に確認していき、それによるフィードバックを元に再度修正を繰り返しました。
  

  

デザイン作成

プロトタイプでの確認を進めながら要件が固まってきた画面に関してはUIデザインを進めていき、実際の文言やデータによる表示パターン作成も作成しました。
また、サービスロゴの作成や、アイコンの作成もこのタイミングで進めていきました。

• アイコン作成

  健康状態を瞬時に把握するために、4つの健康ステータス（検診結果・BMI・ストレス・残業時間）を1つにまとめたアイコンが画面に欲しいとの要望のもと、アイコンを作成しました。
  東京インターナショナル側の要望を取り入れつつ様々なアイコン案を検証した上で作成しました。
  東京インターナショナル側からは好感触の反応をいただきましたが、BMIの表現は体系について触れてしまっているので、従業員側にはアイコンは表示せずに産業医側でのみアイコンを使用するように制限を設定しました。

  • アイコン表現の検証

    

  • 確定案 健康状態を表現する色に関してはここから再度調整

    

• サービスロゴ作成

  さまざまなロゴのパターンを提案し、最終的に東京インターナショナルクリニック側で判断してもらいました。
  MeinKompass（マインコンパス）にはドイツ語で私の羅針盤という意味が込められており、健康に対する指針や道標となるアプリでありたいという想いが込めれられていました。
  それらの想いをしっかりと表現できるようなサービスロゴのデザインを心がけながら作成しました。
  確定したロゴマークには企業と産業医二つのコンパスが従業員の健康を指し示しており、それらが人の形を京成しているというアイデアでシンボルマークをデザインしました。

  • 
  • 

• UIデザイン

  プロトタイプの修正に加え、ロゴのトーンや色味に合わせ各カラーなども修正を加えてUIを設計していきました。