Interview 1
「合計勤務時間は見られますが、内訳が分かりません」
売り場スタッフ
- Tool
- Google FormFigmaReactTailwind
- 役割
- UXリサーチャー / UIデザイナー / フロントエンド開発者
- 期間
- 1か月、2026年4月〜5月
About this project
従業員が給与情報を理解し、自分で確認できるように、UKG Proの給与確認体験を再設計しました。
About UKG Pro
勤務時間の管理、給与情報へのアクセス、給与明細の確認に使われる従業員向けプラットフォームです。
Goal
給与の計算過程が分かる体験へ
このプロジェクトは、アルバイト先で給与明細の確認に使用しているUKG ProへのUXリサーチから始まりました。
給与情報の根拠を理解し、自分で確かめられる体験に改善することを目標としました。
My Approach
ユーザーを中心にしたデザインプロセス
同僚を含む実際のユーザーへのインタビューとアンケートから課題を整理しました。その結果をもとにFigmaでUIを設計し、AIを活用してプロトタイプを開発した後、ユーザーテストでフィードバックを集めました。
1
UXリサーチ
(Interview & Form)
2
UIデザイン
3
プロトタイプ開発
4
ユーザーフィードバック
同僚との日常会話から見つかった課題
勤務中にUKGで給与を確認する話をしたことから、私と同僚が同じ不満を抱えていると分かりました。課題を詳しく理解するため、ほかの同僚にもインタビューを行いました。
Interview 2
「打刻記録はあるはずですが、UKG Proでは確認できません。スケジュールに表示されるのは予定されたシフトだけです」
レジスタッフ
既存の給与確認体験における課題
給与に使われた勤務時間の計算方法を確認できず、ユーザーは自分でおおよその時間を計算する必要がありました。
User Intent
給与の勤務時間が正しく計算されているか確認する
Outcome
正確な計算方法が分からないまま確認を終える
リサーチ結果
既存の課題を検証し、給与記録をより詳しく確認したいというニーズを把握するため、アンケートを実施しました。
主な調査結果
- 参加者の80％が、計算ミスがあった場合に給与を正しく確認できる自信がないと回答しました。
- 参加者の90％が、実際の出退勤記録を確認したいと回答しました。
給与記録と実際の勤務時間が十分に表示されないため、ユーザーは給与計算に確信を持てていませんでした。
DESIGN CHALLENGE
出退勤記録を確認できるようにし、給与計算の根拠を分かりやすくする。
従業員として、給与の勤務時間がどのように計算されたか確認するため、出退勤履歴を見たい。
UKGの新しいブランド表現に沿ったUI設計
2025年、UKGは新しいビジュアルアイデンティティを発表しました。
このリデザインでは、新しいブランド表現を給与確認体験へ一貫して適用する方法を検討しました。
公式デザインシステムは公開されていなかったため、UKGの公開Webサイトから視覚表現とUIパターンを分析しました。
分析をもとに作成したプリミティブカラートークン
色の値をUIへ直接指定せず、プリミティブ、セマンティック、コンポーネントの階層でトークンを設計しました。特に、色そのものではなく用途と意味を定義できるセマンティックトークンを重視しています。繰り返し使うUIパターンが少ないため、コンポーネントトークンは必要な箇所だけに導入しました。
Final design
UI Detail
Calendar
- 縦線より横線を濃くすることで、時間の流れを追いやすくしました。
- 日付の数字を強調し、ひと目で確認しやすくしました。
Work time cell
- 出退勤記録を上から下へ進むタイムラインとして表示し、時系列を分かりやすくしました。
- 色とセルの表現を使い分け、遅刻や残業などの勤務状況を見つけやすくしました。
ReactとCodexによる迅速なプロトタイプ開発
Figmaの静的な画面だけで終わらせず、より現実に近い操作を検証するため、Reactで動作するプロトタイプを開発しました。Codexを使ってモックデータと操作を実装し、短期間でテスト可能な体験を構築しました。
Figmaで定義したデザイントークンもCSSへ反映し、デザインから実装まで一貫したワークフローを構築しました。
:root {
/* Primitive */
--color-teal-500: #00bba8;
/* Semantic */
--color-surface-brand: var(--color-teal-900);
/* Component */
--work-cell-bg: var(--color-surface-brand);
}
@layer components {
.work-cell {
background: var(--work-cell-bg);
color: var(--work-cell-text);
}
}
Verification
リデザインによって給与情報は分かりやすくなったか？
給与確認時の分かりやすさが改善したかを評価するため、既存のUKG画面とリデザイン案を比較するユーザビリティテストを実施しました。
参加者には同じ勤務シナリオをもとにタスクを行ってもらい、給与情報への理解度、信頼度、正確性を確認する自信を測定しました。
- Test type
- 比較ユーザビリティテスト（モデレーターあり）
- Participants
- スーパーマーケットで働くUKG Proユーザー
- Sample size
- 5名
Findings
給与情報をより自信を持って確認できるようになった
リデザイン版を使用した参加者は、既存画面よりも自信を持って給与情報を確認できました。
計算根拠の表示によって信頼度が向上した
勤務時間の内訳や出退勤記録を表示した結果、信頼度は3.8から6.8へ向上しました。給与計算の根拠を見せることが、給与情報への信頼につながると分かりました。
ユーザー中心設計の難しさから学んだこと
このプロジェクトを通して、ユーザー中心設計の難しさを学びました。職場では年齢や背景の異なる人が同じシステムを使うため、自分の想定がすべての人に当てはまるとは限りません。実際に、勤務時間セルのUIは期待したほど全員に分かりやすいものではありませんでした。一方で、この課題を発見できたことで、実際のユーザーと話し、繰り返し検証することの価値を実感しました。UXデザインは画面を作るだけでなく、ユーザーの声を聞きながら改善を続けることだと学びました。
