Client
Codify
Role
UI/UX Designer
Industry
Maritime Security
Design system
Data-heavy UI
Component design
SaaS
B2B
Data Table System for Maritime SaaS
Codify's client maritime security company providing digital solutions for protecting commercial vessels, cargo, and offshore operations. The company helps security teams monitor threats, manage onboard security activities, track incidents, and improve operational efficiency through specialized software designed for the maritime industry.
13
product sections
One component used across 13 different contexts, from audit logs to cargo control
9
data types
Text, date, duration, status, icon+label, number, progress, checkbox, actions
5
component states
Default, hover, selected, loading, and empty, fully designed and documented
Context
Codify is IT outstaffing company. I joined as a contracted designer to work on an enterprise maritime security platform, used by operators to monitor vessels, manage tasks, and control cargo across multiple voyages simultaneously.
The problem
The platform used a standard shaden table component - functional for basic use cases, but not built for the data complexity Codify required. As the product scaled. tables needed to handle radically different contexts: audit logs with minimal data. task monitoring with 12+ columns per vessel, cargo control checklists, scenario tables, and subscriber/contact lists. Each context had different data types, different interaction needs, and different density requirements. A single unstyled component couldn't hold all of it.
My Role
I owned the table component end-to-end - from defining the component architecture in Figma to specifying all states, variants, and data types for engineering. lalso contributed to the broader design system and worked on new feature design during the same period.
Process
Component architecture 1.Header cells - sortable columns with directional indicators, consistent sizing across density levels, and a flexible layout that accommodates both short labels and longer compound headers. 2. Table cells - a unified cell component with variants for every data type: text. number, date, duration, status badge, icon+label, progress indicator, checkbox, and action menu. All built as Figma auto-layout components with properties. 3. Row states - default, hover, selected (checkbox), and flagged/alert rows with a left-border color indicator for urgency. Kept density consistent across all states. 4. Table footer - pagination component with "rows per page" control. page indicator, and navigation. Two variants: full and compact. 5.Empty state - a purpose-built empty state with icon, message, and a primary CTA ("Create Entity") - not a blank screen. 6.Responsive variants - designed and documented table behavior across 5 breakpoints, showing which columns collapse, truncate, or shift to secondary views at each size. What we needed to support:
Text / Number
Standard columns
Status badges
Ongoing, Not started, etc.
Task progress
3/25 subtasks completed
Overflow actions
Context menu per row
Date & Time
Multiple formats incl. duration
Checkboxes
Multi-select & bulk actions
Vessel type with visual marker
Empty / loading states
Full table-level feedback
Design decisions
One component, many contexts The core challenge was making one table system work across completely different use cases — from a 3-column audit log to a 12-column vessel monitoring view. Instead of building separate tables per context, I built a composable cell library: each cell type is a standalone component that plugs into the same row/header shell. This meant engineering got a single table component to maintain, while designers could assemble the right column set per context without breaking visual consistency.
