UI/UX Improvement: Smart Tag Intelligence Page Feels Empty & Lacks Visual Hierarchy #642
Description
🎨 UI/UX Improvement: Smart Tag Intelligence Page Feels Empty & Lacks Visual Hierarchy
Page: Smart Tag Intelligence
Component: Dashboard Cards / Layout
Problem
The Smart Tag Intelligence page currently appears too empty and flat, especially when there is no data (0 tags, 0 rules). This makes the page feel unfinished and gives poor user guidance on what to do next.
Key UI/UX issues:
Large empty cards with only “0” values look uninformative
No visual emphasis on primary actions
“Loading tags…” and “Analyzing transaction patterns…” states feel static
Lack of onboarding or empty-state guidance
Suggested Improvements
- Better Empty States
Replace plain 0 with helpful empty state content:
Add icons + short descriptions
Add CTA buttons inside cards
Example:
No tags yet — Create your first tag to organize transactions
- Visual Hierarchy
Make + Create Tag and + New Rule more prominent (primary color + larger)
Reduce height of empty stat cards
Group stats into a compact summary row
- Skeleton Loaders / Animations
Replace static text:
“Loading tags…” → skeleton list shimmer
“Analyzing transaction patterns…” → animated loader
- Helpful Guidance Section
Add a “Getting Started” panel:
Step 1: Create a tag
Step 2: Add automation rule
Step 3: Review auto-applied tags
- Contrast & Density
Reduce vertical spacing between cards
Increase contrast for section headers
Add subtle dividers or background variation
Expected Result
Page feels active even with no data
User clearly understands next actions
Better first-time user experience
More professional, SaaS-like dashboard feel
