SYNITY BSC 2026 — UI/UX Redesign

11 Đề Xuất Giao Diện Mới

Từ "nhìn vào muốn thoát ra" đến dashboard CEO thực sự muốn mở mỗi sáng.
#1-5: UI/UX proposals · #6-7: BSC Expert dashboards · #8-11: Wizard & App mockups

Dữ liệu thực: SYNITY 2026 • Revenue target: 2.4 tỷ VNĐ • 14 objectives, 4 perspectives

Dashboard Mockups (#1–#7)

7 đề xuất giao diện dashboard cho CEO monitoring

72%
Health Score
#1 — Command Center

Executive Cockpit

Dark

Dark sidebar, Bloomberg terminal feel. Dashboard-first với neon accent và animated gauge. CEO thấy health score trong 2 giây.

Dark mode Sidebar nav Animated gauge
72%
#2 — Pulse

Health-Centric Monitor

Light

Donut gauge khổng lồ ở center, tab navigation. Warm whites với glass-morphism cards. Cảm giác như health app cho doanh nghiệp.

Donut gauge Tab nav Glass cards
⭐ Đề xuất
72%
3🔴
5🟡
#3 — Bento Grid

Apple-Style Card Layout

Warm

CSS Grid với bento cards mixed-size. Gradient health card khổng lồ, dark strategy map. Apple-inspired premium feel. Effort trung bình, impact cao nhất.

Bento grid Mixed sizes Count-up anim

Q1 2026

Chiến lược đạt 72%

Cần chú ý 3 KPI tài chính ngay hôm nay

#4 — Flow

Editorial Storytelling

Narrative

Dashboard như một báo cáo CEO. Scroll storytelling với alternating dark/light sections, AI summary hero, perspective banners với glow effects.

Scroll sections AI summary Glow effects
🔴 Cần xử lý (3)
Doanh thu
50%
🟡 Theo dõi (5)
NPS Score
75%
✅ Đạt mục tiêu
6 KPI
đang tốt
#5 — Kanban Health

RAG Action Board

Action

3 cột theo RAG status. Red expanded + pulsing, green collapsed. CEO biết ngay cần làm gì. Kanban-inspired, không cần drag-drop.

3 cột RAG Status groups View toggle
BSC Expert

Critical Path

F1 → P1 → C3 → FIN1

126tr / 2,400tr · -79% gap

#6 — CEO War Room

BSC Expert Dashboard

Dark

DỮ LIỆU THẬT SYNITY. Critical path chain, 3 strategy themes, leading vs lagging KPIs, team accountability, risks. CEO nhìn 10 giây biết nghẽn ở đâu.

Critical Path Leading vs Lagging Team view
BSC Expert

T1

0%

T2

20%

T3

35%

#7 — Strategy Story

Theme-Centric Narrative

Light

DỮ LIỆU THẬT SYNITY. 3 strategy themes = 3 câu chuyện nhân quả. Mỗi theme hiển thị chuỗi L→P→C→F với KPIs + initiatives liên kết. CEO Action Items ở cuối.

Causality chains 3 Themes Action items

BSC Expert Recommendation

Kết hợp #6 + #7
với visual của #3

  • ✓ #6 War Room: single-screen CEO overview
  • ✓ #7 Strategy Story: drill-down themes
  • ✓ #3 Bento: visual style + responsive
  • ✓ Dữ liệu thật, critical path, causality
  • ✓ Leading vs Lagging phân biệt rõ
  • ✓ #8-11: Wizard, Strategy Map, Fishbone, Nav
BSC methodology: Kaplan & Norton · Strategy-focused organization · Exception-based management

Wizard & App Mockups (#8–#11)

4 đề xuất cho wizard builder, strategy map, fishbone diagram & app navigation

Wizard
✨
#8 — Wizard Redesign

Modern Wizard UX

Wizard

Wizard builder hoàn toàn mới. Sidebar navigation với 4 phase groups, completion tracking, AI suggestion callouts. So sánh Step 1 và Step 4.

Sidebar nav Phases AI hints
FIN1
C2
C3
P1
P3
L1
L3
#9 — Strategy Map

Clean Swim Lane Map

Dark/Light

Bản đồ chiến lược với swim lanes rõ ràng, connections không rối. Critical path highlighted, minimap, zoom controls. 14 objectives thật SYNITY.

Swim lanes Critical path Minimap
2.4 tỷ
Tài chính
Khách hàng
Học hỏi
Quy trình
#10 — KPI Fishbone

Ishikawa KPI Diagram

Light

Biểu đồ xương cá Ishikawa cho phân tích KPI. 4 nhánh = 4 perspectives, 30 KPIs với RAG status. Hover xem chi tiết, filter theo trạng thái.

Ishikawa RAG filter 30 KPIs
Builder
8 bước
→ ←
Dashboard
CEO view
#11 — Navigation

App Navigation Flow

UX Spec

Thiết kế navigation tổng thể: Builder ↔ Dashboard ↔ Settings. Breadcrumb, step quick-jump, mobile hamburger, cross-linking giữa 2 chế độ.

Mode switch Breadcrumb Mobile

BSC OKR/KPI Designer — UI/UX Redesign Mockups — March 2026

Click vào từng mockup để xem chi tiết