14

IoTタイムレコーダーと連携した勤怠情報管理サービスのUX/UI設計・フロントエンド開発

某メーカー会社

IoTタイムレコーダーと連携した勤怠情報管理サービスのUX/UI設計・フロントエンド開発

IoTタイムレコーダーで打刻した勤怠データをWebで管理するサービスのUX/UIデザインとフロントエンド実装を行いました。IoTタイムレコーダを購入したユーザが従業員の勤怠情報を管理するサービスとして当たり前品質機能の定義を行い、企業の規模や雇用形態ごとに異なるユースケースに対応できるサービスの設計を行いました。相談段階で企画は固まっていたため、企画をUIに落とし込むことに注力しました。いただいた企画から機能を抽出し、画面区分の定義、ワイヤーフレーム、画面遷移図を作成し、UIデザインを実施しフロントエンド実装までを担当しました。

SOLUTIONS
FLOW

  1. Step
    01

    UXデザイン

    勤怠管理システムとしての当たり前品質機能の定義から着手しました。タイムレコーダーから得られる情報を当たり前品質のベースとして定義し各情報を管理するための機能を抽出しました。企業によっては複数の事業所や支店をユーザが行き来することが想定されたため、親となる企業情報にタイムレコーダーを紐づけ、タイムレコーダーごとに名称や設置先の設定を可能にすることで、事業所、支店ごとの勤怠管理とユーザの勤怠情報の一元管理を可能にしました。

    Output

    • 画面遷移図PL計画
    • 機能リスト
  2. Step
    02

    UIデザイン

    ユーザのユースケースに合わせた画面遷移を定義し、粒度の高いワイヤーフレームを作成することで、各画面のイメージのすり合わせを行うことで、グランドデザイン合意後の各画面については修正なく納品することを可能にしました。グランドデザインは2パターンのデザインを提案し、紙のタイムカードの要素を残しつつも近代的なイメージを持つデザインが採用されました。

    Output

    • ワイヤーフレーム
    • グランドデザイン
    • GUIデザイン
  3. Step
    03

    フロントエンド実装

    納品物は静的なHTML/CSSなため、作成したUIデザインを忠実に再現することに注力しました。スケジュール管理と各デバイス、ブラウザでの確認を徹底することで高品質なアウトプットを実現しました。

    Output

    • HTML/CSS