← Back to works
Ignatia B2B Merchant & POS Ecosystem
Year
2022—Present
Role
Product Design Lead
Key challenge
Migrating a legacy merchant product into a responsive, maintainable system while standardizing the design language across dense B2B workflows.
The context & scope
Ignatia is a merchant-facing B2B product ecosystem spanning POS and backoffice workflows. My responsibility sits across product design and the system behind it: reusable patterns, responsive behavior, design-system governance, and the interface decisions that keep operational workflows coherent.
The complexity
The inherited product had accumulated legacy patterns, dense desktop-first tables, inconsistent styling, and UI decisions that became harder to maintain as screens and workflows grew. The issue was not one isolated screen; it was the relationship between product behavior, components, typography, color semantics, and responsive rules.
My ownership
Design-system architecture, semantic token strategy, component normalization, responsive product patterns, production UI design, design QA, and alignment with product and engineering.
01 / The system inherited
The interface wasn't one problem. It was many small rules drifting apart.
Add legacy backoffice screenshot
Legacy styling pattern
Before standardization
Screen A
Manual color / one-off spacing / local decisions
Screen B
Detached components / mixed text styles / duplicated states
Screen C
Desktop assumptions / inconsistent responsive behavior
02 / System architecture
A semantic layer between raw values and product UI.
The redesign moved styling decisions out of individual screens. Primitive values feed a semantic layer; components consume those semantic roles; product screens inherit the system instead of restyling it repeatedly.
68
Semantic color tokens in the current Ignatia system
Mobile
Merchant-facing product surfaces
Web
Backoffice and operational workflows
DS
Shared component and typography logic
Token system
Primitive → semantic → component → screen
Primitives
Neutral, brand, status, base values
68 Semantics
Text, surface, border, icon, action, status roles
Components
Buttons, forms, cards, controls, navigation
Product UI
Responsive merchant and backoffice screens
03 / Token mapping
Meaning first. Raw color second.
Semantic examples
Replace with your actual token screenshot later
text-primary
background-card
status-warning-text
border-default
text-secondary
button-primary-bg
status-success-bg
icon-default
Add Figma semantic mapping screenshot
04 / Architecture decision
Standardize the rule, not every screenshot.
Keep local styles
Fast for one screen, expensive across a growing product. Inconsistency remains hidden until maintenance.
Override per component
Cleaner than raw styling, but still creates isolated logic and makes system-wide changes harder.
Semantic system
More setup up front, but component roles become predictable and scalable across product surfaces.
Selected direction
05 / Responsive overhaul
From legacy desktop assumptions to responsive product patterns.
The visual redesign matters, but the larger change is structural: dense workflows are reorganized into responsive patterns that preserve hierarchy and task clarity instead of shrinking a desktop screen onto smaller devices.
Legacy
Desktop-first
Add legacy screen
Current
Responsive system
Add responsive result
System impact
The outcome is not just a newer UI. It is a product where screen-level decisions inherit shared system logic.
Add mobile workflow
Add web workflow
Add component audit
Have a special project in the pipeline?
Contact me
↗