モバイルアプリ · 社内ツール

社内モバイルアプリ

モバイルアプリ · 社内ツール · プロダクトデザイン

BNI Syariah社員向けの社内モバイルアプリをデザイン。オンボーディング・日常業務管理・休暇申請・承認・給与明細・チームコラボレーション機能を網羅しました。

01 / 概要

目的・役割・挑戦

目的

→BNI Syariah社員の日常業務フローを効率化
→休暇申請・承認・給与明細へのアクセスをデジタル化
→チームコミュニケーションと活動追跡を改善

役割

→エンドツーエンドのモバイルUIデザイン
→ユーザーフローと画面設計
→社内テスト用インタラクティブプロトタイプ
→モバイルエンジニアチームへのDesign Handoff

挑戦

→技術リテラシーが異なる多様な社内ユーザー層向けの設計
→複雑な人事フローをシンプルで親しみやすいモバイルUIに落とし込む
→ロールベースのアクセス権がインターフェース上で明確に反映されること

02 / プロセス

デザインプロセス

UIデザイン・プロトタイプ

2019年

オンボーディングから休暇管理・承認・給与明細・チームツールなどのコアHR機能まで、社内アプリ全体のUIをデザインしました。

·オンボーディングフロー（3画面）
·ホームダッシュボードと受信トレイ
·検索と通知
·休暇申請と履歴
·承認ワークフロー
·チームメンバー管理
·スケジュール・カレンダービュー
·給与明細画面

03 / フロー

フロー — 休暇申請・承認

社員が申請し、上司が通知を受けて承認または却下する、明確な双方向フローを設計しました。

例：休暇申請の流れ

正常系（Positive Flow）

01社員が休暇画面を開く → 日程を選択
02申請を送信 → 上司に通知
03上司が確認 → 申請を承認
04社員が承認通知を受け取る

異常系（Negative Flow）

✕休暇日程の重複 → システムが競合警告を表示
✕上司が却下 → 理由とともに社員に通知
✕必須項目が未入力 → インラインバリデーションで案内

04 / 学び

得られた知見

社内ツールは美しさより明瞭さが優先

社員は時間的プレッシャーの中で社内アプリを使用します。認知負荷の軽減と明確なステータス表示は、視覚的な洗練よりも大きな効果をもたらしました。

ロールベースUIは慎重な情報階層設計が必要

社員と上司で異なるアクションが表示されます。別アプリなしにこれを明確に設計するには、慎重な階層設計とコンテキスト表示が必要でした。

05 / 成果

成果・インパクト

業務効率

↑↑

人事フローのデジタル化

休暇申請・承認・給与明細へのアクセスが手動プロセスから統合モバイル体験へ移行。

モバイルファースト

100%

モバイルファースト社内ツール

モバイル専用に設計し、社員がどこでもタスク管理できるよう実現。

06 / ギャラリー

ビジュアルギャラリー

Onboarding — Step 1

Onboarding — Step 2

Onboarding — Step 3

Home Page

Home — Inbox

Notifications

Leave Request

Leave History — Canceled

Approval

Add Member

Day View

Payslip Detail

Product Knowledge

Product Knowledge — Pembiayaan

ツール

SketchInVision

← すべての作品を見る

さらに多くの作品はこちら

Dribbble ↗