52 KiB
52 KiB
Wireframe Text Low-Fidelity WhatsApp Inbox MVP
Dokumen ini adalah wireframe berbasis teks untuk semua screen MVP. Tujuannya agar struktur layout, hierarchy konten, dan area interaksi bisa dipahami sebelum masuk ke Figma.
Format:
TopbarSidebarMain ContentRight Paneljika adaPrimary Actions
1. Public / Auth
1.1 Login
+--------------------------------------------------+
| Logo |
|--------------------------------------------------|
| Welcome Back |
| Sign in to your workspace |
| |
| Email |
| [____________________________] |
| |
| Password [Show] |
| [____________________________] |
| |
| [ Sign In ] |
| |
| Forgot password? |
| Error alert / status message |
+--------------------------------------------------+
1.2 Forgot Password
+--------------------------------------------------+
| Back to Login |
|--------------------------------------------------|
| Reset Password |
| Enter your email to receive reset link |
| |
| Email |
| [____________________________] |
| |
| [ Send Reset Link ] |
| Success / error message |
+--------------------------------------------------+
1.3 Reset Password
+--------------------------------------------------+
| Reset Password |
|--------------------------------------------------|
| New Password |
| [____________________________] |
| Confirm Password |
| [____________________________] |
| Password rules |
| |
| [ Save New Password ] |
| Token expired state / success state |
+--------------------------------------------------+
1.4 Invitation Acceptance
+--------------------------------------------------+
| You're invited |
|--------------------------------------------------|
| Invited Email: name@company.com |
| Full Name |
| [____________________________] |
| Password |
| [____________________________] |
| Confirm Password |
| [____________________________] |
| |
| [ Accept Invitation ] |
+--------------------------------------------------+
1.5 Unauthorized / Forbidden
+--------------------------------------------------+
| Access Denied |
|--------------------------------------------------|
| You don't have permission to view this page. |
| [ Back to Dashboard ] |
+--------------------------------------------------+
2. Shared App Shell
2.1 Desktop App Shell
+--------------------------------------------------------------------------------------+
| Sidebar | Topbar: Search | Notifications | Channel Status | Profile Menu |
|------------------+--------------------------------------------------------------- ----|
| Menu items | Page Title |
| by role | Subtitle / filters / breadcrumbs |
| |------------------------------------------------------------------|
| | Main content area |
| | |
| | |
| | |
+--------------------------------------------------------------------------------------+
2.2 Global Search Overlay
+---------------------------------------------------------------+
| Search anything... |
| [_______________________________________________] |
|---------------------------------------------------------------|
| Conversations |
| Contacts |
| Users / Tenants |
| Recent searches |
+---------------------------------------------------------------+
2.3 Notification Center
+---------------------------------------------------------------+
| Notifications |
|---------------------------------------------------------------|
| Assignment updated |
| Channel disconnected |
| Campaign completed |
| Delivery failed |
| User invited |
+---------------------------------------------------------------+
2.4 My Profile
+---------------------------------------------------------------+
| My Profile |
|---------------------------------------------------------------|
| Avatar Name |
| Email |
| Role |
| Workspace |
| |
| [ Edit Profile ] [ Change Password ] |
+---------------------------------------------------------------+
2.5 Edit Profile
+---------------------------------------------------------------+
| Edit Profile |
|---------------------------------------------------------------|
| Avatar Upload |
| Full Name |
| [____________________________] |
| |
| [ Save Changes ] |
+---------------------------------------------------------------+
2.6 Change Password
+---------------------------------------------------------------+
| Change Password |
|---------------------------------------------------------------|
| Current Password |
| [____________________________] |
| New Password |
| [____________________________] |
| Confirm Password |
| [____________________________] |
| |
| [ Update Password ] |
+---------------------------------------------------------------+
3. Super Admin
3.1 Super Admin Dashboard
+--------------------------------------------------------------------------------------+
| Sidebar | Topbar |
|------------------+-------------------------------------------------------------------|
| Dashboard | Global KPI Overview |
| Tenants | [Active Tenants] [Active Channels] [Failures] [Alerts] |
| Channels | |
| Billing | Message Volume Chart |
| Reports | |
| Audit Log | Subscription Health Table |
| Settings | Disconnected Channels List |
| | Platform Alerts Feed |
+--------------------------------------------------------------------------------------+
3.2 Tenant List
+--------------------------------------------------------------------------------------+
| Page Header: Tenants [ Create Tenant ] |
|------------------------------------------------------------------------------- ------|
| Search [____________] Status [v] Plan [v] Channel Status [v] |
|--------------------------------------------------------------------------------------|
| Tenant Name | Plan | Status | Channels | Usage | Seats | Actions |
|-------------|------|--------|----------|-------|-------|----------------------------|
| Acme Co | Pro | Active | Connected| 74% | 8/10 | View Edit Suspend |
+--------------------------------------------------------------------------------------+
3.3 Create Tenant
+---------------------------------------------------------------+
| Create Tenant |
|---------------------------------------------------------------|
| Company Name |
| Tenant Name |
| Slug / Workspace |
| Timezone |
| Subscription Plan |
| Initial Admin Email |
| |
| [ Create Tenant ] |
| Validation errors |
+---------------------------------------------------------------+
3.4 Tenant Detail
+--------------------------------------------------------------------------------------+
| Tenant: Acme Co [ Edit ] [ Suspend ] [ Connect ] |
|--------------------------------------------------------------------------------------|
| Summary Cards: Plan | Status | Channel | Usage | Seats |
|--------------------------------------------------------------------------------------|
| Company Profile |
| Subscription Plan |
| Channel Status |
| Usage Summary |
| User Seats |
| Recent Activity Snapshot |
+--------------------------------------------------------------------------------------+
3.5 Edit Tenant
+---------------------------------------------------------------+
| Edit Tenant |
|---------------------------------------------------------------|
| Company Name |
| Tenant Name |
| Timezone |
| Status |
| Subscription Plan |
| |
| [ Save Changes ] |
+---------------------------------------------------------------+
3.6 Suspend / Reactivate Confirmation
+-----------------------------------------------+
| Confirm Action |
|-----------------------------------------------|
| Suspend this tenant? |
| This may block access for all users. |
| |
| [ Cancel ] [ Confirm ] |
+-----------------------------------------------+
3.7 Channel List
+--------------------------------------------------------------------------------------+
| Page Header: Channels [ Connect Channel ] |
|--------------------------------------------------------------------------------------|
| Search [____________] Status [v] Provider [v] Tenant [v] |
|--------------------------------------------------------------------------------------|
| Number | Tenant | Provider | Status | Webhook | Last Sync | Actions |
+--------------------------------------------------------------------------------------+
3.8 Connect Channel
+---------------------------------------------------------------+
| Connect Channel |
|---------------------------------------------------------------|
| Tenant |
| Provider |
| WABA ID |
| Phone Number ID |
| Display Number |
| Webhook Config |
| |
| [ Validate Connection ] [ Save ] |
| Success / failure result |
+---------------------------------------------------------------+
3.9 Channel Detail
+--------------------------------------------------------------------------------------+
| Channel Detail [ Reconnect ] [ Disconnect ] |
|--------------------------------------------------------------------------------------|
| Summary Cards: Status | Webhook | Last Sync | Failure Rate |
|--------------------------------------------------------------------------------------|
| WhatsApp Business Account Info |
| Phone Status |
| Webhook Health |
| Delivery Issue Summary |
| Event Activity |
+--------------------------------------------------------------------------------------+
3.10 Subscription Plan Catalog
+--------------------------------------------------------------------------------------+
| Plan Catalog |
|--------------------------------------------------------------------------------------|
| Plan Card: Basic | Plan Card: Pro | Plan Card: Enterprise |
| Price | Price | Price |
| Message Quota | Message Quota | Message Quota |
| Seat Quota | Seat Quota | Seat Quota |
| Broadcast Quota | Broadcast Quota | Broadcast Quota |
+--------------------------------------------------------------------------------------+
3.11 Tenant Subscription List
+--------------------------------------------------------------------------------------+
| Tenant Subscription List |
|--------------------------------------------------------------------------------------|
| Tenant | Current Plan | Usage | Renewal | Payment Status | Actions |
+--------------------------------------------------------------------------------------+
3.12 Invoices List
+--------------------------------------------------------------------------------------+
| Invoices |
|--------------------------------------------------------------------------------------|
| Invoice No | Tenant | Period | Amount | Payment Status | Due Date | Actions |
+--------------------------------------------------------------------------------------+
3.13 Invoice Detail
+--------------------------------------------------------------------------------------+
| Invoice #INV-001 |
|--------------------------------------------------------------------------------------|
| Tenant | Period | Plan | Status | Due Date |
|--------------------------------------------------------------------------------------|
| Subtotal |
| Tax |
| Total |
| Payment Timeline |
+--------------------------------------------------------------------------------------+
3.14 Platform Reports
+--------------------------------------------------------------------------------------+
| Platform Reports |
|--------------------------------------------------------------------------------------|
| Filter Bar: Date | Tenant | Provider |
| KPI Cards |
| Global Message Traffic Chart |
| Tenant Growth Chart |
| Broadcast Usage Table |
| Failure & Retry Monitoring |
+--------------------------------------------------------------------------------------+
3.15 Audit Log
+--------------------------------------------------------------------------------------+
| Audit Log |
|--------------------------------------------------------------------------------------|
| Filters: Tenant | Actor | Entity | Date | Action |
|--------------------------------------------------------------------------------------|
| Timestamp | Tenant | Actor | Entity | Action | Metadata | View |
+--------------------------------------------------------------------------------------+
3.16 Security Events
+--------------------------------------------------------------------------------------+
| Security Events |
|--------------------------------------------------------------------------------------|
| Failed Logins | Suspicious Access | Permission Changes |
| Event feed / table |
+--------------------------------------------------------------------------------------+
3.17 API / Webhook Logs
+--------------------------------------------------------------------------------------+
| API / Webhook Logs |
|--------------------------------------------------------------------------------------|
| Filters: Provider | Status | Tenant | Date |
|--------------------------------------------------------------------------------------|
| Event Type | Provider Event ID | Process Status | Failed Reason | View |
+--------------------------------------------------------------------------------------+
3.18 System Notifications / Alerts
+--------------------------------------------------------------------------------------+
| System Alerts |
|--------------------------------------------------------------------------------------|
| Severity | Tenant | Issue | Triggered At | Action |
+--------------------------------------------------------------------------------------+
3.19 Platform Settings
+--------------------------------------------------------------------------------------+
| Platform Settings |
|--------------------------------------------------------------------------------------|
| Left Nav: Platform Profile | Pricing | Feature Flags | Template Policy |
| Detail Panel |
| Form fields / toggles / save actions |
+--------------------------------------------------------------------------------------+
4. Admin Client
4.1 Admin Dashboard
+--------------------------------------------------------------------------------------+
| Sidebar | Topbar |
|------------------+-------------------------------------------------------------------|
| Dashboard | Today Summary |
| Shared Inbox | [Open] [Waiting Reply] [Resolved Today] [Active Agents] |
| Contacts | |
| Broadcast | Agent Workload Snapshot |
| Templates | Broadcast Performance Snapshot |
| Team | Contact Growth |
| Reports | Recent Activity / Quick Actions |
| Settings | |
| Billing | |
| Audit Log | |
+--------------------------------------------------------------------------------------+
4.2 Shared Inbox - List + Detail
+----------------------------------------------------------------------------------------------------------------+
| Topbar |
|----------------------------------------------------------------------------------------------------------------|
| Filters Bar: Tabs(All/Unassigned/Assigned/Resolved) | Search | Agent | Channel | Status | Priority |
|----------------------------------------------------------------------------------------------------------------|
| Conversation List | Conversation Detail | Right Panel |
|-----------------------------------|---------------------------------------------------|----------------------|
| Contact name | Header: Contact + status + assignee | Customer Card |
| Last message preview |---------------------------------------------------| Tags |
| Unread badge | Message timeline | Assignment Panel |
| Time | | Internal Notes |
| | Reply composer | Activity Log |
| | Quick replies / template picker | |
+----------------------------------------------------------------------------------------------------------------+
4.3 Shared Inbox - Empty State
+---------------------------------------------------------------+
| No conversation selected |
| Choose a conversation from the left panel. |
+---------------------------------------------------------------+
4.4 Shared Inbox - Disconnected Channel State
+---------------------------------------------------------------+
| Channel Disconnected |
| Replies may fail until channel is reconnected. |
| [ View Settings ] |
+---------------------------------------------------------------+
4.5 Contact List
+--------------------------------------------------------------------------------------+
| Contacts [ Add Contact ] [ Import ] [ Export ]|
|--------------------------------------------------------------------------------------|
| Search [__________] Tag [v] Segment [v] Opt-in [v] Channel [v] |
|--------------------------------------------------------------------------------------|
| Name | Phone | Tags | Last Interaction | Opt-in | Channel | Actions |
+--------------------------------------------------------------------------------------+
4.6 Create / Edit Contact
+---------------------------------------------------------------+
| Contact Form |
|---------------------------------------------------------------|
| Full Name |
| Phone Number |
| Email |
| Country Code |
| Tags |
| Opt-in Status |
| External Ref |
| |
| [ Save Contact ] |
+---------------------------------------------------------------+
4.7 Contact Detail
+--------------------------------------------------------------------------------------+
| Contact: John Doe [ Edit ] |
|--------------------------------------------------------------------------------------|
| Profile Card | Tags | Segment Membership | Opt-in Status |
|--------------------------------------------------------------------------------------|
| Conversation History |
| Campaign History |
| Custom Fields |
+--------------------------------------------------------------------------------------+
4.8 Import Contacts
+--------------------------------------------------------------------------------------+
| Import Contacts |
|--------------------------------------------------------------------------------------|
| Step 1: Upload CSV |
| Step 2: Field Mapping |
| Step 3: Validation Preview |
| Step 4: Confirm Import |
| Import summary / partial error list |
+--------------------------------------------------------------------------------------+
4.9 Export Contacts
+---------------------------------------------------------------+
| Export Contacts |
|---------------------------------------------------------------|
| Filters |
| Fields to export |
| |
| [ Export ] |
+---------------------------------------------------------------+
4.10 Segments / Lists
+--------------------------------------------------------------------------------------+
| Segments [ Create Segment ] |
|--------------------------------------------------------------------------------------|
| Segment Name | Rule Summary | Member Count | Updated At | Actions |
+--------------------------------------------------------------------------------------+
4.11 Segment Detail
+--------------------------------------------------------------------------------------+
| Segment Detail [ Edit ] |
|--------------------------------------------------------------------------------------|
| Metadata |
| Rules Summary |
| Contacts Preview |
| Related Campaigns |
+--------------------------------------------------------------------------------------+
4.12 Template List
+--------------------------------------------------------------------------------------+
| Templates [ Create Template Request ] |
|--------------------------------------------------------------------------------------|
| Search | Status | Category | Channel | Language |
|--------------------------------------------------------------------------------------|
| Name | Category | Language | Approval Status | Channel | Actions |
+--------------------------------------------------------------------------------------+
4.13 Create / Edit Template Request
+--------------------------------------------------------------------------------------+
| Template Form |
|--------------------------------------------------------------------------------------|
| Template Name |
| Category |
| Language |
| Header Type |
| Body Text |
| Footer Text |
| Buttons |
| Preview |
| [ Submit Template ] |
+--------------------------------------------------------------------------------------+
4.14 Template Detail
+--------------------------------------------------------------------------------------+
| Template Detail [ Edit / Resubmit ] |
|--------------------------------------------------------------------------------------|
| Status | Channel | Provider Template ID |
| Content Preview |
| Rejected Reason |
| Related Campaigns |
+--------------------------------------------------------------------------------------+
4.15 Campaign List
+--------------------------------------------------------------------------------------+
| Campaigns [ Create Campaign ] |
|--------------------------------------------------------------------------------------|
| Search | Status | Channel | Date |
| KPI Cards: Draft | Scheduled | Processing | Completed | Failed |
|--------------------------------------------------------------------------------------|
| Campaign | Channel | Audience | Status | Scheduled At | Result | Actions |
+--------------------------------------------------------------------------------------+
4.16 Create Campaign
+--------------------------------------------------------------------------------------+
| Create Campaign |
|--------------------------------------------------------------------------------------|
| Stepper: Metadata -> Template -> Audience -> Schedule -> Review |
|--------------------------------------------------------------------------------------|
| Campaign Name |
| Campaign Type |
| Channel |
| Template |
| Audience Source |
| Segment / Manual / Import |
| Schedule or Send Now |
| Estimated Recipients |
| [ Back ] [ Next ] |
+--------------------------------------------------------------------------------------+
4.17 Campaign Review
+--------------------------------------------------------------------------------------+
| Review Campaign |
|--------------------------------------------------------------------------------------|
| Metadata Summary |
| Template Preview |
| Audience Estimate |
| Warnings / Validation |
| [ Edit ] [ Confirm & Create Campaign ] |
+--------------------------------------------------------------------------------------+
4.18 Campaign Detail
+--------------------------------------------------------------------------------------+
| Campaign: Promo April [ View Recipients ] |
|--------------------------------------------------------------------------------------|
| Summary Cards: Total | Sent | Delivered | Read | Failed |
|--------------------------------------------------------------------------------------|
| Campaign Metadata |
| Send Timeline |
| Delivery Trend |
| Error Breakdown |
+--------------------------------------------------------------------------------------+
4.19 Campaign Recipients
+--------------------------------------------------------------------------------------+
| Campaign Recipients |
|--------------------------------------------------------------------------------------|
| Search | Send Status | Failure Only |
|--------------------------------------------------------------------------------------|
| Contact | Phone | Send Status | Failure Reason | Sent At | Delivered At |
+--------------------------------------------------------------------------------------+
4.20 Team / Users List
+--------------------------------------------------------------------------------------+
| Team / Users [ Create User ] |
|--------------------------------------------------------------------------------------|
| Search | Role | Status |
|--------------------------------------------------------------------------------------|
| Name | Email | Role | Status | Last Login | Assigned Conversations | Actions |
+--------------------------------------------------------------------------------------+
4.21 Create / Edit User
+---------------------------------------------------------------+
| User Form |
|---------------------------------------------------------------|
| Full Name |
| Email |
| Role |
| Status |
| |
| [ Save User ] |
+---------------------------------------------------------------+
4.22 User Detail
+--------------------------------------------------------------------------------------+
| User Detail [ Edit ] [ Deactivate ] |
|--------------------------------------------------------------------------------------|
| Profile Info |
| Role / Status |
| Last Login |
| Assigned Conversations Count |
| Performance Snapshot |
+--------------------------------------------------------------------------------------+
4.23 Team Performance Snapshot
+--------------------------------------------------------------------------------------+
| Team Performance |
|--------------------------------------------------------------------------------------|
| Agent | Handled Conversations | Avg Response | Resolved | Workload |
+--------------------------------------------------------------------------------------+
4.24 Reports Overview
+--------------------------------------------------------------------------------------+
| Reports |
|--------------------------------------------------------------------------------------|
| Report cards: Response Time | Resolution | Agent Productivity | Campaign | Growth |
+--------------------------------------------------------------------------------------+
4.25 Report Detail Pattern
+--------------------------------------------------------------------------------------+
| Report Title |
|--------------------------------------------------------------------------------------|
| Filters: Date | Agent | Channel | Team |
| KPI Cards |
| Main Chart |
| Breakdown Table |
| [ Export ] |
+--------------------------------------------------------------------------------------+
4.26 Tenant Settings
+--------------------------------------------------------------------------------------+
| Settings |
|--------------------------------------------------------------------------------------|
| Left Nav: Profile | Business Hours | Auto Assignment | Tags | Canned Responses | Webhook |
| Detail Panel |
| Form / table / toggles |
| [ Save ] |
+--------------------------------------------------------------------------------------+
4.27 Billing & Subscription
+--------------------------------------------------------------------------------------+
| Billing & Subscription |
|--------------------------------------------------------------------------------------|
| Current Plan | Usage Quota | Renewal Date | Payment Status |
|--------------------------------------------------------------------------------------|
| Usage Breakdown |
| Billing History |
| Upgrade Prompt |
+--------------------------------------------------------------------------------------+
4.28 Billing History
+--------------------------------------------------------------------------------------+
| Billing History |
|--------------------------------------------------------------------------------------|
| Invoice No | Period | Amount | Status | Due Date | Actions |
+--------------------------------------------------------------------------------------+
4.29 Tenant Audit Log
+--------------------------------------------------------------------------------------+
| Tenant Audit Log |
|--------------------------------------------------------------------------------------|
| Filters: Actor | Module | Action | Date |
|--------------------------------------------------------------------------------------|
| Timestamp | Actor | Module | Action | Metadata | View |
+--------------------------------------------------------------------------------------+
5. Agent
5.1 Agent Dashboard
+--------------------------------------------------------------------------------------+
| Dashboard |
|--------------------------------------------------------------------------------------|
| [Assigned to Me] [Unread] [Waiting Reply] [Due Follow-up] [My Stats] |
|--------------------------------------------------------------------------------------|
| Priority Conversations |
| Personal Activity Snapshot |
+--------------------------------------------------------------------------------------+
5.2 My Inbox
+----------------------------------------------------------------------------------------------------------------+
| Filters: Assigned / Unassigned / Mentioned / Resolved | Search | Status |
|----------------------------------------------------------------------------------------------------------------|
| Conversation List | Agent Conversation Detail | Customer Card |
|-----------------------------------|---------------------------------------------------|----------------------|
| Contact | Header | Tags |
| Last message | Timeline | Notes |
| Unread | Reply composer | Limited activity |
| Time | Quick replies / template | |
+----------------------------------------------------------------------------------------------------------------+
5.3 Unassigned Queue
+--------------------------------------------------------------------------------------+
| Unassigned Queue |
|--------------------------------------------------------------------------------------|
| Search | Priority | Channel |
|--------------------------------------------------------------------------------------|
| Contact | Last Message | Waiting Time | Priority | [ Take Assignment ] |
+--------------------------------------------------------------------------------------+
5.4 Mentioned Conversations
+--------------------------------------------------------------------------------------+
| Mentioned Conversations |
|--------------------------------------------------------------------------------------|
| List / filters |
+--------------------------------------------------------------------------------------+
5.5 Resolved History
+--------------------------------------------------------------------------------------+
| Resolved History |
|--------------------------------------------------------------------------------------|
| Search | Date | Channel |
|--------------------------------------------------------------------------------------|
| Contact | Resolved At | Last Agent Action | View |
+--------------------------------------------------------------------------------------+
5.6 Agent Contact List
+--------------------------------------------------------------------------------------+
| Contacts |
|--------------------------------------------------------------------------------------|
| Search | Tags |
|--------------------------------------------------------------------------------------|
| Name | Phone | Last Interaction | Actions |
+--------------------------------------------------------------------------------------+
5.7 Agent Contact Detail
+--------------------------------------------------------------------------------------+
| Contact Detail |
|--------------------------------------------------------------------------------------|
| Identity |
| Tags |
| Previous Chats |
+--------------------------------------------------------------------------------------+
5.8 Quick Tools
+--------------------------------------------------------------------------------------+
| Quick Tools |
|--------------------------------------------------------------------------------------|
| Canned Responses |
| Template Picker |
| Follow-up Notes |
+--------------------------------------------------------------------------------------+
5.9 My Performance
+--------------------------------------------------------------------------------------+
| My Performance |
|--------------------------------------------------------------------------------------|
| Filters: Date |
| KPI Cards: Response Time | Resolved | Workload |
| Personal Trend Chart |
+--------------------------------------------------------------------------------------+
6. Shared Reusable States
6.1 Generic Empty State
+---------------------------------------------------------------+
| Nothing here yet |
| Add data or adjust filters to continue. |
| [ Primary Action ] |
+---------------------------------------------------------------+
6.2 Generic Error State
+---------------------------------------------------------------+
| Something went wrong |
| Please try again. |
| [ Retry ] |
+---------------------------------------------------------------+
6.3 Confirmation Modal
+-----------------------------------------------+
| Confirm Action |
|-----------------------------------------------|
| Action explanation |
| |
| [ Cancel ] [ Confirm ] |
+-----------------------------------------------+
6.4 Toast / Alert
[ Success ] Saved successfully
[ Error ] Failed to send message
[ Warning ] Channel disconnected
6.5 Loading / Skeleton
[ Header Skeleton ]
[ Card Skeleton ][ Card Skeleton ][ Card Skeleton ]
[ Table/List Skeleton Rows ]
7. Catatan Prioritas Visual
Screen yang paling layak didesain paling dulu:
- login
- app shell
- admin dashboard
- shared inbox
- conversation detail
- contact list/detail
- campaign flow
- users/team
- super admin dashboard
- tenant/channel management