Crafting a B2B Product Management System
End-to-end design for an internal e-commerce product management tool
Lead UX/UI Designer, responsible for user research, flows, interaction design, and high-fidelity UI
Raqtan Group
Internal product operations and content teams managing B2B storefront data
A streamlined, error-resistant product management experience with reusable workflows and a scalable design system
10 months
Context
Overview
The company needed a more capable Product Information Management (PIM) system to support a large and constantly evolving B2B catalog. Multiple storefronts relied on this tool as their single source of truth, but the old system couldn’t handle the level of structure, validation, and flexibility required.
Its primary users were internal content specialists responsible for uploading and maintaining product information. Their workflows were very technical and task-driven, so the interface needed to support quick navigation, dense data views, and reliable validation. The redesign introduced clearer task flows, customizable tables, advanced filtering, bulk creation tools, and stronger error handling, aimed at reducing friction and helping them work faster and with fewer mistakes.
My contribution
I led the end-to-end design of the new system, from mapping existing workflows to defining the information architecture, interaction patterns, and UI. My focus was on creating an experience that supported technical, detail-oriented work: dense tabular layouts, advanced filters, and inline validations. I also placed special emphasis on accessibility and readability, choosing typography and layout patterns that worked well with data-heavy screens. The final output included detailed workflows, a reusable component library, high-fidelity UI, prototypes, and documentation to support implementation and future back-office tools.
Discovery & Research
Defining the problem
Understanding user needs
I spent time with Category Managers and Content Specialists to understand exactly how they worked. These users often deal with large datasets, repetitive tasks, file-based imports, and strict formatting requirements. Many of their workflows were built around speed and accuracy.
Key insights that shaped the solution:
They needed dense, table-first interfaces to view many attributes at once.
Filtering and sorting were essential for navigating large catalogs
Errors often came from missing formats, incorrect units, or category mismatches.
Bulk work wasn’t just “nice to have”, it was how they operated daily.
PIM Content Manager Persona
Solution Design
Data Structure
UI Design & System Patterns
I built a reusable component library for internal admin tools, including tables, validation patterns, bulk action modals, and wizards.
Components were designed for clarity, efficiency, and accessibility, supporting dense workflows with inline error handling and tabular data views. This library became the foundation for consistent internal product management tools.
Designing Key Workflows
Intro
Product Creation
Category Selection (Step 1)
Product Information Form (Step 2)
Image Upload (Step 3)
Review page (Step 4)
Confirmation page with branching options
Variant creation form
Product Catalog
The product catalog is the operational heart of the system — a dense, fast, and customizable table used daily to manage thousands of SKUs. The UX decisions here were centered on control, visibility, and efficiency, because users spend more time browsing and editing than creating.
Key UX Principles and Features Behind the Catalog
A highly configurable table featuring a column customizer, sorting and search allows users to shape the workspace around their needs.
Sidebar filtering because filtering is not secondary, it’s the core way users locate and operate on thousands of SKUs.
Bulk actions to reduce repetitive work and enable daily operations.
Product Catalog
Product Page
The product detail page had to accommodate a large amount of structured and unstructured information. The main design challenge was information architecture, ensuring users could navigate deep and varied content without being overwhelmed.
UX Decisions Behind the Page Structure
A clear, persistent sidebar keeps navigation predictable.
Grouping data into logical sections (basic info, variants, features, suppliers, SEO, attachments, etc.) reduces cognitive load.
Inline editing and modular content blocks make updates faster and more localized.
Product page (basic information tab)
Content Editor
The Problem
Product long descriptions were inconsistent and often looked unstructured across storefronts. We needed a way to help users create polished, consistent content without extra effort or design skills.
Ideation & Sketching
After ideating possible solutions, we decided to create a custom content editor for the PIM. During early prototyping, I brainstormed features that would give users flexibility without overwhelming them. With hand sketching, I explored how content blocks, layouts, and drag-and-drop interactions could work.
Ideating features for the editor
Content editor layout sketch
The final design brought these ideas together into a streamlined experience:
Layout presets ensure consistency without limiting creativity.
Drag-and-drop blocks keep content flexible and easy to adjust.
Real-time previews across devices and store themes reduce publishing errors.
Locale switching supports multi-region content creation with minimal friction.
Choosing a preset layout
Alternating rows layout – showing editable text content blocks
Feature grid layout
Previewing how the final description will appear on the storefront
Bulk Actions
Instead of forcing users into long, repetitive edit cycles, the product catalog includes a Bulk Actions menu to help teams update large sets of products quickly.
One of the most commonly used bulk actions is editing product features.
Product bulk actions list
When selected, it opens an editable sheet that lists the product’s main identifiers (ID, SKU, Manufacturer) along with the product features, but only enables editing for the feature-related columns to prevent users from accidentally modifying unrelated data.
Review page (Step 4)
Dropdown fields show predefined values to ensure consistency, while text-based fields support inline editing. Users can also search the table, download it as a CSV (since many team members are more comfortable working in Excel), and re-upload their changes directly.
Bulk edit table features
After updates are submitted, the system brings them back to the catalog view with a clear progress indicator, making the process transparent and predictable.
Bulk update progress indicator
Impact
Outcome
Faster product creation and updates
More accurate and consistent product data
Fewer engineering dependencies for content updates
A reusable foundation for other internal tools
100% ownership of product data by operations teams
Reflection
This project showed me how impactful UX can be in internal tools. where understanding real user pain points directly translates into meaningful improvements. It was one of the larger projects I took on early in my career, and it shaped much of the system-thinking approach I carry with me today.
