BDB Design
System
A unified, scalable design language for a complex enterprise analytics ecosystem
ROLE
Lead Product Designer
DURATION
8 Months
EXPERTISE
UI/UX Design
PLATFORM
Web Application
Problem Statement
Over time, BDB’s web platform grew organically. Feature teams shipped UI elements independently, which led to:
Visual inconsistency — buttons, icons, typography, and colour usage varied from screen to screen.
Redundant variations of the same components — multiple styles of similar buttons and alerts.
Disconnected interaction patterns and navigation structures.
Confusion for users navigating complex data views, with inconsistent behaviors across modules.
Slow design-development cycles, as each team recreated and redesigned components instead of reusing existing ones.
In short: the product lacked a unified visual language and reusable components that could scale with the platform’s complexity.
This negatively impacted:
Usability — inconsistent UI distracted and confused users.
Efficiency — duplicated effort across design and development.
Scalability — future product growth would compound inconsistency rather than mitigate it.
Brand perception — a disjointed experience undermined confidence in the platform’s quality.
The challenge
Create a unified design system that brings clarity, consistency, and scale to a multi-module enterprise analytics platform — without constraining flexibility for evolving use cases.
Design Process: Structured for Scale
1. Core Visual Language
I started by grounding the design system in a clear visual foundation:
✔ Colour System — neutral base with gray tones for foundational UI layers, and a primary brand colour for interaction and emphasis.
✔ Typography — established hierarchy for headings, labels, and body text to ensure readability and rhythm across screens.
✔ Iconography & Spacing — consistent icon scales and spacing rules to normalize UI proportions.
A well-defined colour and type system not only unified the UI but provided tokens designers and developers could rely on for consistency.
2. Component Library — Reusable, Stateful, and Predictable
Rather than only defining static visuals, I designed fully documented components with interaction states:
Buttons — primary, secondary, icon variants, and disabled styles.
Alerts & Feedback — informative, warning, error, success states standardized to communicate system status clearly.
Inputs & Forms — unified form controls with focus, error, disabled states to reduce user friction.
Navigation Patterns — breadcrumbs, pagination, and structured menu layouts to support deep hierarchies.
This component library became a single source of truth — designers could draw from it confidently, and developers could implement consistent UI in code.
3. Interaction & Behavior Standards
Every component tied to interaction logic:
Hover states
Focus behavior
Disabled and error handling
Responsive behavior across breakpoints
This ensured not just visual consistency, but consistent user experience and interaction logic across modules.
Colour System
Gray
Gray is a neutral color and is the foundation of the color system. Almost everything in UI design—text, form fields, backgrounds, dividers—are usually gray.
Container
#FFFFFF
Dark mode Text
#D9D9D9
Border
#777777
Text 1
#616161
Text 2
#525252
Brand
The brand color is your "primary" color, and is used across all interactive elements such as buttons, links, inputs, etc. This color can define the overall feel and can elicit emotion.
Small container
#FCFAFF
Background
#F5F5FF
ButtonHover
#9B8AFB
Selected State
#7C4DFF
Button
#5925DC
Typography
Iconography
Components
Alert
An alert is a UI component that notifies users about important information that needs their attention. Alerts can warn, inform, confirm an action, or show success/failure messages.
Error/Negative
Success
Warning
Alert Text
Alert Text
Alert Text
Alert Text
Error/Negative
Success
Warning
Critical
Alert Text
Alert Text
Alert Text
Alert Text
Breadcrumb
A breadcrumb is a horizontal list of links that represent the path from the homepage to the current page. Breadcrumbs are most helpful when:
The product has deep hierarchy
Users browse categories
There are multiple nested levels
There's need for backtracking
DEFAULT
HOVER
PRESSED
Datacenter
/
Setup Data Connector
/
Setup Data Connector
Datacenter
/
Setup Data Connector
/
Setup Data Connector
Datacenter
/
Setup Data Connector
/
Setup Data Connector
DEFAULT
HOVER
PRESSED
Datacenter
/
Setup Data Connector
/
Setup Data Connector
Datacenter
/
Setup Data Connector
/
Setup Data Connector
Datacenter
/
Setup Data Connector
/
Setup Data Connector
Button
A button is an essential interactive UI element that users click to initiate an action or response. It serves as a clear call to action, guiding users towards intended functionalities.
Primary Button
The primary button is used for the most important action on a page or modal. It should be used for actions that you want to encourage the user to perform, such as "Save", "Submit", or "Continue". This button should stand out the most on the page to draw attention.
Secondary Button
Secondary buttons are used for actions that are less important than those triggered by primary buttons. They are often used for actions like "Cancel" or "Back". Use these when you want the action to be available but not to compete with the primary action.
DEFAULT
HOVER
PRESSED
DISABLED
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
DEFAULT
SMALL
LEADING ICON
ONLY ICON
SECONDARY
SECONDARY ICON
SMALL 2
ICON 2
DEFAULT
HOVER
PRESSED
DISABLED
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
DEFAULT
SMALL
LEADING ICON
ONLY ICON
SECONDARY
SECONDARY ICON
SMALL 2
ICON 2
Date Picker
A date picker is a UI component that allows users to select a date or a date range from a calendar-style interface instead of typing manually. It improves accuracy and makes date input faster and more user-friendly.
Date
Select date
Dec 2021
M
T
W
T
F
S
S
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
Date
Select date
Date
8-12-2021
1
1
1
1
1
Date range
Clear
From
12/12/2021
To
16/12/2021
Date range
Clear
From
12/08/2021
To
16/12/2021
Dec 2021
M
T
W
T
F
S
S
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
Date
Select date
Dec 2021
M
T
W
T
F
S
S
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
Date
Select date
Date
8-12-2021
1
1
1
1
1
Date range
Clear
From
12/12/2021
To
16/12/2021
Date range
Clear
From
12/08/2021
To
16/12/2021
Dec 2021
M
T
W
T
F
S
S
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
Dropdown
Use a single select dropdown when the user needs to choose only one option from a list. This is appropriate for settings where only one choice is valid and simplifies decision-making for the user
DEFAULT
HOVER
PRESSED
Option 1
Option 1
Option 2
Option 1
Option 2
Option 3
Option 4
DEFAULT
HOVER
PRESSED
Option 1
Option 1
Option 2
Option 1
Option 2
Option 3
Option 4
Input Field
An input field is a box or area in a website or app where users can type or select data — like name, email, password, search terms, numbers, etc.
DEFAULT
HOVER
PRESSED
DISABLED
ERROR
Placeholder text
Placeholder text
Placeholder text
Placeholder text
Error
DEFAULT
HOVER
PRESSED
DISABLED
ERROR
Placeholder text
Placeholder text
Placeholder text
Placeholder text
Error
Modal
A modal (or modal dialog) is a UI overlay that appears on top of the page and requires user interaction before the user can continue.
It temporarily blocks the rest of the interface until the user:
Confirms something
Cancels something
Reads critical information
It is called “modal” because it forces the user into a mode of interaction.
Modal title
Lorem ipsum dolor sit amet, consectetur adipiscing elit interdum hendrerit ex vitae sodales.
Cancel
Save
Modal title
Lorem ipsum dolor sit amet, consectetur adipiscing elit interdum hendrerit ex vitae sodales.
Cancel
Save
Navigation
Navigation refers to the UI components and structural patterns that help users move through an app or website and find what they need easily.
It defines how content is organized and how users access it.
Top Navigation
Placed at the top of the screen.
Used for:
Websites
Dashboards
Desktop screens
Side Navigation
Vertical list on the left or right side.
Used for:
Complex apps
Dashboards (BDB, analytics tools)
Settings pages
Can be collapsible for better space usage.
Pagination
Pagination provides horizontal navigation between chunks (pages) of a dataset. A long list can be divided into several pages using Pagination, and only one page will be loaded at a time.
Prev
1
2
3
...
10
Next
1
2
3
...
10
Prev
1
2
3
...
10
Next
1
2
3
...
10
Progress Indicators
A progress indicator is a UI element that shows the status of an ongoing process — how long something will take, how much is completed, or simply that something is in progress.
Used in:
File uploads
Onboarding flows
Checkout process
Form steps
Data processing / loading
90%
60%
66.8%
1
Getting Data
1
Getting Data
90%
60%
66.8%
1
Getting Data
1
Getting Data
Radio , Checkbox and Toggle
Radio buttons, checkboxes, and toggles are form elements designed for making selections.
Radio Button
Radio buttons allow users to select one option from a group, representing a single choice mechanism.
Checkbox
Checkboxes support multiple selections from a set, offering flexibility to choose several options.
Toggle
Toggles are used for binary settings, typically switching between two states such as "On" and "Off."
Badge
Badges are compact indicators used to inform users about the status or the count related to an object or action, facilitating quick recognition at a glance. They are not interactive components like buttons, and it's crucial to ensure they are visually distinct to avoid any confusion.
Loader
A loader (also called a loading indicator) is a UI element that shows the system is processing something and the user needs to wait.
Search Bar
A search bar is a UI component that allows users to enter text to find information within an app or website.
Tabs
Tabs are interactive labeled controls that facilitate the organization and display of content by allowing users to switch between multiple views within the same page context. They effectively group related content, enhancing the discoverability and accessibility of information, making navigation intuitive and efficient without leading to a new URL.
DEFAULT
HOVER
PRESSED
Tab Label
Tab Label
Tab Label
Tab Label
Tab Label
Tab Label
Tab Label
DEFAULT
HOVER
PRESSED
Tab Label
Tab Label
Tab Label
Tab Label
Tab Label
Tab Label
Tab Label
Impact: How the Design System Shifted the Project
Enhanced Usability & Visual Clarity
With unified UI rules:
Users recognized patterns throughout the product.
Interactions became predictable, reducing cognitive load.
These improvements are essential in data-intensive interfaces where clarity drives effectiveness.
A design system transforms UI components into a consistent language that users learn — smoothing navigation and reducing confusion.
2. Increased Design & Development Velocity
Instead of redesigning UI elements from scratch, teams reused system components, accelerating:
Feature rollout
Design iterations
Developer handoffs
This reduced duplicated effort and sped up timelines, enabling the product to grow faster without quality regressions.
Scalability for Future Growth
Because every component was documented with states and usage rules, the system:
Supported new modules without reinventing patterns
Reduced onboarding time for new team members
Served as a baseline for future design decisions
As products scale, design systems become knowledge artifacts that prevent regressions and foster consistency.
Brand Strength & Perception
A coherent UI strengthens the product’s identity. Even subtle aspects — like consistent spacing, button behaviour, and colour usage — contribute to a more polished and trustworthy experience, especially for enterprise users navigating analytical tools.
Key Takeaways for Future Projects
Design systems aren’t stylistic — they’re strategic.
They reduce ambiguity, scale product development, and help teams ship better features faster.
Build systems not just for visuals — build them for relationships and interactions.
Document behaviour, not just appearance — front-end engineers, designers, and product managers all benefit.
