モバイルアプリ · ウェブダッシュボード · インターンシップ
Jenius — チャットボットインターフェース&営業ダッシュボード
チャットボットUIアプリ&ユーザー登録ダッシュボード(営業向け)設計

Jenius(PT Bank BTPN Tbk.、現SMBC Indonesia)でのインターンシップ中、2つのプロダクトを担当。カスタマー向けチャットボットUI(リッチメディア:カルーセル・音声・動画・フォーム・ドキュメント)と、Flexi Cash営業チーム向けのユーザー登録管理ウェブダッシュボードの設計を行いました。
01 / 概要
目的・役割・挑戦
目的
- →チャットボットUI:リッチメディア対応(カルーセル・音声・動画・フォーム・画像・ドキュメント)
- →営業ダッシュボード:営業担当者が顧客のFlexi Cash申請・アクティベーションを管理
- →チームリードビュー:承認フローとアクティベーション状況の一覧
- →営業チームの手動フォローアップ工数を削減
役割
- →チャットボットインターフェースのUI設計(全メッセージタイプ)
- →営業ダッシュボード:ユーザー一覧・アカウント詳細・同意フォーム画面
- →ユーザビリティテスト用プロトタイプ(Maze)
- →エンジニアリングチームへのHandoff
挑戦
- →多様なチャットボットメッセージタイプを一貫したビジュアル言語で設計すること
- →営業ダッシュボードで2つの権限レベル(営業 vs チームリード)の使い分けが必要
- →短いインターンシップ期間での迅速な設計・Handoffサイクル
- →Jeniusデザインシステムへの準拠と新機能ニーズのバランス調整
02 / プロセス
デザインプロセス
オンボーディング・要件理解
2020年1月Jeniusデザインシステム・既存チャットボットパターン・Flexi Cash営業フローを学び、制約を把握してスコープを定義しました。
- ·Jeniusデザインシステムの確認
- ·Flexi Cashプロダクト概要理解
- ·チャットボットコンテンツタイプの整理
- ·PMとのスコープ合意
チャットボットUI設計
2020年1月〜2月テキスト・クイックリプライ・カルーセル・音声・動画・画像・フォーム・ドキュメントの全メッセージタイプを設計。統一されたビジュアル言語を保ちながら各タイプ固有のレイアウトを作成しました。
- ·クイックリプライバブル
- ·カルーセルカードコンポーネント
- ·音声・動画・画像プレーヤー
- ·デジタルフォームレイアウト
- ·ドキュメントプレビューカード
営業ダッシュボード設計
2020年2月〜3月2つの権限レベルを持つFlexi Cash営業登録ダッシュボードを設計。営業担当者はユーザー登録・アクティベーション追跡が可能。チームリードはFlexi Cashアクセスの承認レイヤーを担当。
- ·ダッシュボード:フィルター付きユーザー一覧(未アクティブ・アクティブ・Flexi Cash)
- ·承認待ちビュー(営業・チームリード)
- ·アカウント追加フォーム
- ·アクティベーション状態付きアカウント詳細
- ·アクセス管理用同意フォーム
プロトタイプ・Handoff
2020年3月Figmaでインタラクティブプロトタイプを作成し、Mazeによるユーザビリティテストを実施。エンジニアリングチームにアノテーション付き仕様書を納品しました。
- ·Figmaプロトタイプ(チャットボット+ダッシュボード)
- ·Mazeユーザビリティテスト
- ·アノテーション付きHandoff仕様書
- ·最終QAレビュー
03 / フロー
Flow設計 — Flexi Cashアクティベーション
正常なアクティベーションフローと承認待ち・否認状態の両方を設計し、営業担当者とチームリードの認識を揃えました。
例:Flexi Cashアクティベーションの場合
正常系(Positive Flow)
- 01営業担当者が新規ユーザーアカウントを登録
- 02ユーザーがKYC・同意フォームを完了
- 03チームリードが確認・承認
- 04Flexi Cashがアクティベート → ダッシュボードのステータス更新
- 05営業担当者にアクティベーション完了通知
異常系(Negative Flow)
- ✕フォーム未入力項目あり → エラー表示・再入力を促す
- ✕KYC不一致 → 手動確認フラグ
- ✕チームリードが却下 → 理由表示、営業担当者に通知
- ✕アカウント重複登録 → 重複警告を表示
04 / 学び
得られた知見
01
チャットボットUXにはメッセージタイプ設計システムが必要
各コンテンツタイプ(音声・カルーセル・フォーム)には固有のインタラクションパターンがあり、個別ではなくシステムとして設計することで一貫性を確保できました。
02
権限レベルは異なるが一貫したUIが必要
営業とチームリードのビューは同じデータを使うが操作が異なる。共有コンポーネントベースから設計することで一貫性を保てました。
03
短いスプリントは明確なスコープ境界が必須
短いインターン期間では、スコープ内外を明確に定義することがスケジュール遵守の鍵でした。
04
ブランド準拠は制約ではなく加速要因
Jeniusデザインシステムの枠内で作業することで、低レベルな決定を省略しUXフロー・インタラクション設計に集中できました。
05 / 成果
成果・インパクト
メッセージタイプ
8+
リッチなチャットボット体験
クイックリプライ・カルーセル・音声・動画・画像・フォーム・ドキュメントなど8種類以上のメッセージタイプを統一ビジュアル言語で設計。
権限レベル
2
2つの権限ダッシュボード
営業担当者とチームリードのビューはデータを共有しつつ、ロール別の操作と承認フローを提供。
完全納品
3mo
3ヶ月でエンドツーエンド完成
チャットボットUIと営業ダッシュボードの両プロダクトを3ヶ月のインターンシップ内で設計・プロトタイプ・テスト・Handoffまで完遂。
06 / ギャラリー
ビジュアルギャラリー
Web Dashboard · 14 screens






-CTYKYug7.png)
-YMx7B7D2.png)
-iOCng9iF.png)





Mobile App · 12 screens












ツール
さらに多くの作品はこちら
Dribbble ↗