BDB Platform
Redesign
Simplifying complex analytics with clarity and accessibility.
ROLE
Lead Product Designer
DURATION
8 Months
EXPERTISE
UI/UX Design
PLATFORM
Web Application
Project Overview
BDB.ai is an enterprise-grade data analytics suite used by analysts and data engineers to connect, prepare, model, visualize, and interact with organizational data.
When I joined, the platform had grown organically across modules, resulting in:
Fragmented interaction patterns
Inconsistent visuals and terminology
Cognitive overload during long analytical sessions
No accessibility support or dark mode
These issues were hindering user productivity, increasing support overhead, and slowing adoption of newer modules.
Redesign Objective: Modernize the entire UX while retaining power-user efficiency and preparing the product for future expansion.
Company
Bizviz Technologies [ BDB.AI]
Team
1 PM · 6 Engineers (FE/BE) · QA · Solutions Architect · Designer (me)
Scope
Complete end-to-end redesign of the BDB.ai data analytics suite — covering Data Connectors, Pipelines, Data Science Lab, Dashboard Designer, and Data Agent modules. The focus was on creating a unified design language, optimizing workflows, and improving overall usability and accessibility for power users.
Problem Definition
How might we…
Reduce cognitive load without removing power-user tools?
Create a unified and scalable design language across highly technical modules?
Enhance onboarding and accessibility for all users?
Support both new and expert users with minimal disruption?
Constraints and Challenges
Complex domain: Multiple interlinked modules (Data Connectors, Pipelines, DS Lab, Dashboards, Data Agent).
No dark mode: Caused fatigue during extended analytics sessions.
Inconsistent patterns: Icons, feedback, and terminology differed across screens.
Legacy expectations: Power users resisted changes that slowed workflows.
Rollout risk: Phased deployment needed to avoid disruption.
Research and Discovery
Heuristic Evaluation
Evaluated the platform using Nielsen’s heuristics + WCAG guidelines.
Key findings:
Poor visibility of system status
Inconsistent controls and unpredictable icon behavior
Missing feedback for errors and empty states
User Journey Mapping
Mapped the flow from data ingestion → transformation → modeling → visualization → insight generation.
Insights:
Unclear transitions between modules caused context loss
Users frequently restarted tasks due to missing feedba
Competitive Benchmarking
Analyzed Snowflake, Databricks, Tableau, Power BI.
Takes:
Clear hierarchies matter
Dark mode is essential for long sessions
Unified action patterns reduce error
Strategic Design Decisions
Information Architecture
Created a unified IA that:
Groups modules into predictable clusters
Surfaces Workspaces, Dashboards, Pipelines, and Connectors as top-level anchors
Standardizes control structure (Search → Filter → Sort → Refresh)
Navigation & Workflow
Left rail reorganized into functional clusters (Data Center, Engineering, Lab, Designer, Reports)
Flattened hierarchy to reduce clicks and context switches
Visual Hierarchy & Rhythm
Introduced a modular grid
Consistent type scale, color, and spacing
Standardized row-level action clusters (e.g., Open | Edit | Share | Delete)
Feedback & Empty States
Skeleton loaders
Contextual toasts
Guided empty state messaging
Accessibility Enhancements
WCAG AA contrast compliance
Full keyboard parity
ARIA labels and focus rings
Dark & Light Themes
Built tokenized color systems enabling parity across light and dark modes for extended analytics sessions.
Design System Principles
Consistency: Standardized components, spacing, icons
Scalability: Tokenized styles for future theme expansion
Clarity: Reduced cognitive load with white space and visual rhythm
Component Highlights:
Navigation shell with breadcrumbs
Unified buttons and inputs
Accessible modals, tooltips, toasts
Data-heavy tables & charts optimized for readability
Old vs. New Design — Key Differences
Area
Old Design
New Design
Navigation
Overcrowded sidebar, poor grouping
Streamlined information architecture with categorized modules (Data Center, Engineering, DS Lab, etc.)
Visual Hierarchy
Inconsistent typography and spacing
Modular grid, clear hierarchy using type scale, accent color, and consistent padding
Action Placement
Scattered and unpredictable
Standardized row-level action cluster (Open → Edit → Share → Delete) with confirmation states
Feedback System
No empty or error states
Added skeleton loaders, toasts, and contextual empty-state messaging
Theme Support
Single light theme
Dual light & dark theme with tokenized color system (WCAG AA compliant)
Accessibility
Minimal keyboard navigation
Full keyboard parity, focus rings, and accessible ARIA labels
Learnability
High onboarding friction
Added Take a Tour and contextual Support panel
System Feedback
Sparse status updates
Inline loaders and undo options after critical actions
Cognitive Load
High (dense layouts)
Progressive disclosure — only relevant info visible at each step
AI Integration
None
Data Agent introduced for conversational insights and automated tasks
Overall Impact
Quantitative Results
32% faster module navigation post-redesign
40% fewer mis-clicks due to action consistency
84% user preference for dark mode
40% reduction in self-reported visual fatigue
Higher readability scores after contrast enhancements
Fewer onboarding support requests due to guided tours
Qualitative Impact
Consistent workflows decreased context switching friction
Streamlined visuals helped long analytical sessions
Unified design system enhanced brand cohesion and future scalability
Summary
Unified Ecosystem: Seamless transition across modules.
Efficiency Gains: Reduced task time and enhanced focus.
Brand Cohesion: Consistent tone, color, and iconography.
Scalable Foundation: Design system ready for future features
Next Steps
Personalized dashboards & quick-start templates
Bulk actions across modules for expert users
Audit trails & activity logs
Expand AI-assisted insights based on usage patterns
