WorksDetail

リマインドツールのデザイン


Project Overview | 案件概要

通知一覧と規則設定を含む業務ツールのデザイン

複数サービスの通知を一元化する新規サービスの立ち上げにデザイナーとして参画しました。

管理者は、各サービスの項目や値を組み合わせて通知規則を作成し、条件に合致した従業員の把握とメール通知を行えます。

本件では、複雑な通知設定を単なる入力画面としてではなく、条件・対象・動作を持つ規則の構造として整理し、管理者が理解しやすく運用しやすいUIへ落とし込むことを重視しました。


Data
私の役割UI/UX設計 , 情報設計 , ワークショップ企画進行
成果物新規サービスUIデザイン
作業時期2019
ツールXD , Illustrator
備考社内方針により現在はクローズ

Issue | 課題

通知規則設定の課題整理

このサービスでは、管理者が複数サービスを横断しながら条件を設定し、通知規則を作成する必要がありました(1st STEPでは勤怠に関する項目がターゲット)。

ただし、扱う情報は 条件 / 対象 / 通知動作 / 検証結果 などにまたがり、設定の全体像が見えにくくなりやすい構造でした。特に、複数画面にまたがるフローでは、現在地や完了までの見通しを失いやすい状態でした。

また、通知規則の一覧設計においても、何を1件の規則として扱い、どの単位で管理させるかを明確にしなければ、運用時の理解と再利用が難しくなります。

そのため本件では、以下を主要課題として整理しました。

◇ 規則の構造化 :条件・対象・動作の関係を一貫して理解できること

◇ フローの可視化:複数画面でも現在地と全体像を見失わないこと

◇ 一覧単位の整理:運用しやすい粒度で規則を管理できること


Design | 設計

通知規則をオブジェクトとして整理する

通知規則をひとつのオブジェクトとして捉え、そこに属するプロパティやアクションを整理しました。そのうえで、どの情報をどの画面・コンポーネントで扱うべきかを切り分け、構造の一貫性を保ちながらUIへ展開しました。

must / better の整理で初期構成を絞る

社内ワークショップを実施し、代表画面の情報量やレイアウトの方向性を確認しました。あわせて、実装優先度と機能の must / better を仕分けし、初期リリースに必要な構成へ情報を絞り込みました。

STEP表示でフローの見通しをつくる

複数画面にまたがる規則設定では、モーダルとSTEP表示を採用しました。利用者が現在地と全体フローの中での位置を把握できるようにし、複雑な設定に伴う心理的負荷を抑えることを狙いました。

一覧は運用単位で設計する

規則一覧では、要件上の一括処理対象かどうか、どの利用シナリオで使われるかを踏まえて、一覧化の単位を決定しました。データを並べるのではなく、管理者が日常運用で扱いやすいまとまりを優先しています。

将来の運用像から逆算する

通知を処理する流れの中で月次勤怠の確定につなげる構想や、各業務カテゴリへの展開可能性も検討しました。画面単体の整合だけでなく、将来の業務フローに接続できる構造を意識して設計しています。


Validation & Iteration | 検証と改善

ワークショップを通じた設計検証

設計初期には社内ワークショップを行い、2-3名ずつのグループに分かれて代表画面の情報量やレイアウトの方向性を確認しました。

その結果をもとに、実装優先度と機能の重要度を整理し、初期段階で必要な情報に絞って構成を調整しました。また、設定フローが長くなりやすい箇所では、STEP表示によって理解負荷を下げる方向へ設計を改善しています。


Outcome & Reflection | 成果と学び

設計判断の重要性と学び

将来的に複数サービスを横断しうる通知設定に対して、管理者が理解しやすい構造の整理を行いました。

特に、通知規則を条件・対象・動作の関係で捉え直し、画面単位ではなく運用単位で情報を組み立てたことは、本件の中核となる設計判断でした。

クローズとなったサービスではありますが、複雑な業務要件に対して、何をひとまとまりとして扱うか、どの順で探してもらい、理解してもらうかを定義する重要性を学んだ案件でした。

この経験は、業務システムにおいて複雑さをそのまま見せるのではなく、利用者が扱える構造へ整理する現在の設計姿勢にもつながっています。


Credits
  • 株式会社ヒューマンテクノロジーズ 在籍時の実務制作案件です
  • 掲載画像 / サービス名称等の権利は各権利者に帰属します
  • 内容は公開可能な範囲で再構成しています