Timeline2023 – 2025
RoleLead UX/UI Designer
Team1 UX/UI Designer 1 Project Manager 1 Product Owner 4 Developers
ToolsFigma Jira Lucidchart PostHog

Problem

Problem

After a merger, the debt collection ("Inkasso") process was split across two platforms. Users had to complete a single submission across two interfaces, adding overhead, slowing them down, and increasing the chance of errors in a workflow where data accuracy directly affects client trust.

Solution

Solution

The core flows from both platforms were pulled into one interface. Users complete the entire submission in one place, without switching contexts or repeating themselves.

PHASE 1 · 2023

Early Iterations

Early Iterations

The original submission flow lived on the parent platform. Users moved through four separate screens to submit a single case.

  1. INHERITED PROCESS
STEP 01
upload documentation
upload documentation
Contract, order confirmation, delivery note, etc.
STEP 02
confirm service
confirm service
Partial remittances, sent dunning letters overview.
STEP 03
review service
review service
Confirm recipient, sender, and overdue invoice details.
STEP 04
accept offer
accept offer
10% fee applies.
  1. FIRST ITERATION

The first iteration replicated the process from the parent platform, a multi-step approach, that served as a functional foundation. At this stage, the priority was establishing feature structure and validating the process end-to-end, using the Storybook-based legacy UI available at the time.

  1. NEW DIRECTION

The multi-step process was consolidated into a single-screen, checkout-style interface. Users could review and complete a submission in one place, with expandable sections replacing separate screens.

The checkout-style approach had stakeholder buy-in, but user testing told a different story.
  1. USER FEEDBACK

"I still feel like I have to go through every step one by one, even when I already know some stuff is optional. It slows me down and feels unnecessarily repetitive."

Peter

Peter

Peter

Nadine

Nadine

Steffi

Steffi

Max

Max

"I still feel like I have to go through every step one by one, even when I already know some stuff is optional. It slows me down and feels unnecessarily repetitive."

Peter

Peter

Peter

Nadine

Nadine

Steffi

Steffi

Max

Max

click/tap to switch quotes
PHASE 2 · REBUILD · 2024 - 2025

PHASE 2 · REBUILD ·
2024 - 2025

Rebuilding the Foundation

Where it broke

What had been a pragmatic starting point was now a ceiling on what the product could do.
By this stage, the "Inkasso" feature was working, but it was built on an outdated component library and a legacy Frontend architecture that was becoming increasingly difficult to maintain.

How we rebuilt it

The interface was redesigned around a new Design System, replacing the outdated component library and aligning the feature with the rest of the platform's evolving UI standards.

In parallel, working closely with the engineering team, we introduced Automation for transferring overdue invoices and modernized key parts of the Frontend architecture by reducing manual steps for users, as well as technical debt for the team.

Key Improvements

DESIGN SYSTEM MODERNIZATION

  • Replaced deprecated component library

  • Improved accessibility compliance

  • Increased visual consistency across screens

INKASSO
AUTOMATION

Inkasso Automation

  • Automatic transfer of overdue invoices

  • Configurable rule-based settings

  • Eliminated manual case submissions

WORKFLOW
TRANSPARENCY

  • Inline history log

  • Centralized visibility across debt collection cases

  • Customer exclusion management

  • Status overview for submitted invoices

TECHNICAL
IMPROVEMENTS

  • Migrated frontend code from JavaScript to TypeScript

  • Modernized legacy Node environment

  • Implemented TanStack Table for scalable, interactive data tables

Before: from Manual Submission

Legacy Invoice Overview
Legacy Invoice Overview
The submission process started here, in the invoice overview. Overdue invoices were flagged with an "Überfällig" status, and users could initiate a collection case directly from the table via the "An Inkasso" action.
Submission Form
Submission Form
Contract Confirmation
Contract Confirmation

After: to Automated Case Handling

  1. REDESIGN & HISTORY LOG
Redesigned Invoice Overview
Redesigned Invoice Overview
The invoice overview was rebuilt alongside the submission flow. Status tags, filters, and table actions were updated to match the new Design System.
Redesigned Submission Form
Redesigned Submission Form
Redesigned Contract Confirmation
Redesigned Contract Confirmation
Inline History Log
Inline History Log
Once a case is submitted, the invoice status updates automatically from "Überfällig" (Overdue) to "Inkasso" (Collection). The status tag is interactive: clicking it expands an inline history log directly inside the table row, showing every event in the collection timeline without leaving the page.
  1. SETTINGS · AUTOMATION SCREENS
Automation Configuration
Automation Configuration
Customer Exclusion Management
Customer Exclusion Management
Users can define when overdue invoices are transferred to collections, review metrics, exclude specific customers from automation, and monitor submission status through a dedicated overview with inline history and payment updates.
Submitted Invoices Overview
Submitted Invoices Overview

Outcome

What started as a fragmented multi-platform workaround became a single-screen submission, an automated escalation flow, and a codebase engineering could actually build on.

Two years of work. Workflow research, Design System migration, and a Frontend rebuild done alongside engineering, not thrown over the wall.

Create a free website with Framer, the website builder loved by startups, designers and agencies.