Project: HT Kunststoffe | Industrial E-commerce System

<aside> ⚙

Status: 🟡 Design Phase / Dashboard Prototype Validated

Role: Design Lead & Frontend System Architect

Context

HT Kunststoffe manages a high-precision industrial inventory including aluminum profiles and architectural glass systems (VSG/ESG).

The business operates in a specification-heavy B2B environment with complex acquisition workflows and warehouse dependencies.

The challenge was not a visual redesign.

It was system restructuring.

Problem definition

The existing backend, powered by Medusa.js, provided flexibility but lacked operational specificity.

The default admin panel did not support:

• High-frequency inbound logistics
• Clearly separating inbound and outbound purchases
• Configurable industrial products
• Bulk order validation logic

This misalignment between backend structure and operational reality created measurable friction in bulk processing.

Strategic Goal

Design a structured, implementation-ready interface system that:

• Mirrors real operational workflows
• Reduces cognitive load in data-heavy views
• Supports scalable component reuse
• Aligns with a React/Tailwind frontend architecture
• Enables future system evolution without redesign debt

Approach: Workflow Architecture Before UI

Before designing screens, I mapped the full acquisition lifecycle:

Inquiry → Specification → Validation → Stock Allocation → Fulfillment

Using structured journey mapping, I identified:

• Redundant confirmation loops
• Delayed status visibility
• Information bottlenecks between departments

I translated operational workflow mapping into a modular dashboard architecture aligned with frontend constraints.

System Design Decisions

1️⃣ Component-Driven Dashboard

Instead of static layouts, I structured the dashboard as modular blocks:

• Inventory status modules
• Order lifecycle tracking units
• Validation state indicators

Each block was designed as a reusable unit prepared for React implementation.

2️⃣ Token-Based Theming

• Established a structured token layer (color, spacing, motion)
• Implemented CSS-variable-ready theme logic
• Designed both Dark and Light (in progress) modes
• Ensured accessible contrast ratios for dense data views

This allows controlled visual evolution without component refactoring.

3️⃣ Frontend Alignment

UI variants were defined with implementation logic in mind:

• Clear prop-based states (default, hover, disabled, loading)
• Predictable hierarchy patterns
• Controlled variant expansion rules
• Created a live Storybook component library

storybook - Storybook

The objective was to minimize handoff ambiguity and prevent future UI drift.

Technical Highlights

• Data-density optimized layout hierarchy
• Reduced redundant validation steps
• Modular inventory visualization
• Systematic UI token mapping
• Theme switching via CSS variable architecture

Validation & Workflow Mapping

Before finalizing the dashboard structure, I collaborated with the PM on a full acquisition lifecycle map in Miro that outlines cross-department interactions, validation dependencies, and status transitions.

This mapping allowed me to:

• Identify redundant confirmation loops
• Detect information bottlenecks between the warehouse and sales
• Reduce unnecessary step duplication in bulk workflows

The final dashboard structure directly reflects this mapped operational logic.

Excerpt from acquisition workflow mapping used to identify validation redundancies and state ownership conflicts:

Current Status

• Dashboard prototype validated through internal workflow review
• Acquisition stages being refined for edge-case scenarios
• Mapping UI tokens to a shared React/Tailwind component library
• Finalizing accessible Light Theme with CSS-variable-based theme switching </aside>

https://www.figma.com/proto/qas0Mo3mxe1K5ZFRhEuUEs/HT-Mockup?node-id=79-1656&p=f&t=OezHfDGtiWsv2V6T-1&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=79%3A1656&show-proto-sidebar=1 - work in progress

Project: Pleiger Group | Global Brand Architecture & Web System

<aside> ⚙

Status: 🟢 Brand System Finalized / Prototype Handoff

Role: Design Systems Lead & UI Architect

Context

Pleiger Group is a diversified industrial manufacturer operating across distinct sectors — including laser optics, marine hydraulics, and wastewater systems.

Each division had evolved independently, resulting in:

• Inconsistent brand applications
• Fragmented digital structures
• Non-uniform UI behavior
• Redundant design logic across entities

The challenge was not redesigning a website.

It was building a scalable system that could unify seven industrial identities without removing their operational specificity.

Problem Definition

The group required:

• A unified digital framework
• Division-level differentiation without structural divergence
• Governance rules for long-term scalability
• CMS-compatible component architecture
• Controlled rollout across multiple entities

The risk was either:

1. Over-standardization (losing divisional identity), or
2. Fragmentation (design drift across entities)

Approach: System Before Surface

</aside>

https://www.figma.com/proto/nBBMSmuS7x3tP19OjqjWdh/Pleiger-Group?node-id=2072-6720&t=4rfsFnCT4KlOKnWA-1&scaling=min-zoom&content-scaling=fixed&page-id=2071%3A275&starting-point-node-id=2072%3A6720&show-proto-sidebar=1 - work in progress

<aside> 🎨

</aside>