レリ・モナリサ

モバイルアプリ · ウェブダッシュボード · インターンシップ

Jenius — チャットボットインターフェース&営業ダッシュボード

チャットボットUIアプリ&ユーザー登録ダッシュボード(営業向け)設計

Jenius — Chatbot Interface & Sales Dashboard

Jenius(PT Bank BTPN Tbk.、現SMBC Indonesia)でのインターンシップ中、2つのプロダクトを担当。カスタマー向けチャットボットUI(リッチメディア:カルーセル・音声・動画・フォーム・ドキュメント)と、Flexi Cash営業チーム向けのユーザー登録管理ウェブダッシュボードの設計を行いました。

01  /  概要

目的・役割・挑戦

目的

  • チャットボットUI:リッチメディア対応(カルーセル・音声・動画・フォーム・画像・ドキュメント)
  • 営業ダッシュボード:営業担当者が顧客のFlexi Cash申請・アクティベーションを管理
  • チームリードビュー:承認フローとアクティベーション状況の一覧
  • 営業チームの手動フォローアップ工数を削減

役割

  • チャットボットインターフェースのUI設計(全メッセージタイプ)
  • 営業ダッシュボード:ユーザー一覧・アカウント詳細・同意フォーム画面
  • ユーザビリティテスト用プロトタイプ(Maze)
  • エンジニアリングチームへのHandoff

挑戦

  • 多様なチャットボットメッセージタイプを一貫したビジュアル言語で設計すること
  • 営業ダッシュボードで2つの権限レベル(営業 vs チームリード)の使い分けが必要
  • 短いインターンシップ期間での迅速な設計・Handoffサイクル
  • Jeniusデザインシステムへの準拠と新機能ニーズのバランス調整

02  /  プロセス

デザインプロセス

01

オンボーディング・要件理解

2020年1月

Jeniusデザインシステム・既存チャットボットパターン・Flexi Cash営業フローを学び、制約を把握してスコープを定義しました。

  • ·Jeniusデザインシステムの確認
  • ·Flexi Cashプロダクト概要理解
  • ·チャットボットコンテンツタイプの整理
  • ·PMとのスコープ合意
02

チャットボットUI設計

2020年1月〜2月

テキスト・クイックリプライ・カルーセル・音声・動画・画像・フォーム・ドキュメントの全メッセージタイプを設計。統一されたビジュアル言語を保ちながら各タイプ固有のレイアウトを作成しました。

  • ·クイックリプライバブル
  • ·カルーセルカードコンポーネント
  • ·音声・動画・画像プレーヤー
  • ·デジタルフォームレイアウト
  • ·ドキュメントプレビューカード
03

営業ダッシュボード設計

2020年2月〜3月

2つの権限レベルを持つFlexi Cash営業登録ダッシュボードを設計。営業担当者はユーザー登録・アクティベーション追跡が可能。チームリードはFlexi Cashアクセスの承認レイヤーを担当。

  • ·ダッシュボード:フィルター付きユーザー一覧(未アクティブ・アクティブ・Flexi Cash)
  • ·承認待ちビュー(営業・チームリード)
  • ·アカウント追加フォーム
  • ·アクティベーション状態付きアカウント詳細
  • ·アクセス管理用同意フォーム
04

プロトタイプ・Handoff

2020年3月

Figmaでインタラクティブプロトタイプを作成し、Mazeによるユーザビリティテストを実施。エンジニアリングチームにアノテーション付き仕様書を納品しました。

  • ·Figmaプロトタイプ(チャットボット+ダッシュボード)
  • ·Mazeユーザビリティテスト
  • ·アノテーション付きHandoff仕様書
  • ·最終QAレビュー

03  /  フロー

Flow設計 — Flexi Cashアクティベーション

正常なアクティベーションフローと承認待ち・否認状態の両方を設計し、営業担当者とチームリードの認識を揃えました。

例:Flexi Cashアクティベーションの場合

正常系(Positive Flow)

  1. 01営業担当者が新規ユーザーアカウントを登録
  2. 02ユーザーがKYC・同意フォームを完了
  3. 03チームリードが確認・承認
  4. 04Flexi Cashがアクティベート → ダッシュボードのステータス更新
  5. 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

Login
LoginDashboard
Dashboard — Default
Dashboard — DefaultDashboard
User List — Not Active
User List — Not ActiveDashboard
User List — Active
User List — ActiveDashboard
User List — Flexi Cash Active
User List — Flexi Cash ActiveDashboard
Flexi Cash Postponed
Flexi Cash PostponedDashboard
Waiting Approval — Sales
Waiting Approval — SalesDashboard
Waiting Approval — Team Lead
Waiting Approval — Team LeadDashboard
Add Account
Add AccountDashboard
Account Detail — Not Active
Account Detail — Not ActiveDashboard
Account Detail — Activated
Account Detail — ActivatedDashboard
Account Detail — Flexi Cash
Account Detail — Flexi CashDashboard
Agreement Form — Sales
Agreement Form — SalesDashboard
Agreement Form — Team Lead
Agreement Form — Team LeadDashboard

Mobile App · 12 screens

Carousel
Carousel
Carousel — Step 1
Carousel — Step 1
Carousel — Step 2
Carousel — Step 2
Quick Reply
Quick Reply
Quick Reply — Active
Quick Reply — Active
Digital Audio
Digital Audio
Digital Audio — Playing
Digital Audio — Playing
Digital Audio — Paused
Digital Audio — Paused
Digital Form
Digital Form
Digital Image
Digital Image
Digital Video
Digital Video
Document
Document

ツール

FigmaMazeFigJam
すべての作品を見る

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

Dribbble ↗