Payify: Ein Abrechnungssystem entwerfen, das wirklich Sinn macht

Das Problem mit Rechnungstools

Nach Jahren als Freiberufler in Deutschland habe ich fast jedes Rechnungstool auf dem Markt ausprobiert. Lexoffice, sevDesk, Fastbill, sogar Tabellenkalkulationen mit PDF-Exporten. Jedes hatte das gleiche Problem: Sie waren entweder für Unternehmen mit Funktionen konzipiert, die ich nie nutzen würde, oder so stark abgespeckt, dass sie grundlegende deutsche Steueranforderungen wie die Kleinunternehmerregelung nicht bewältigen konnten.

Der Wendepunkt kam, als ich eine einfache Rechnung durch ihren Lebenszyklus verfolgen musste – Entwurf, gesendet, angesehen, bezahlt – und feststellte, dass ich zwischen drei verschiedenen Tools jonglierte. Die Rechnung war in einer App, die E-Mail-Bestätigung in einer anderen, und mein mentales Modell dessen, was tatsächlich geschah, existierte nur in meinem Kopf.

Daher beschloss ich, Payify zu entwickeln: ein Rechnungssystem, das speziell auf meine Arbeitsweise zugeschnitten ist und nicht darauf, wie Softwareanbieter für Unternehmen denken, dass ich arbeiten sollte.

Beginnend mit dem mentalen Modell

Bevor ich eine Zeile Code schrieb, verbrachte ich zwei Wochen mit Stift und Papier. Nicht mit Wireframing – sondern mit Nachdenken. Was repräsentiert eine Rechnung eigentlich? Sie ist nicht nur ein PDF. Sie ist ein Versprechen, ein Beleg und ein Kommunikationsmittel zugleich. Diese Realität musste ich in der Benutzeroberfläche abbilden.

Die zentrale Erkenntnis war, Rechnungen als Entitäten mit unterschiedlichen Zuständen zu behandeln, nicht nur als Dokumente. Eine Rechnung ist nicht einfach 'bezahlt' oder 'unbezahlt' – sie durchläuft eine klare Abfolge: Entwurf (wird erstellt), Freigegeben (finalisiert, aber nicht gesendet), Gesendet (an den Kunden geliefert), Bezahlt (Geld erhalten). Jeder Zustand löst unterschiedliche Aktionen aus und zeigt andere Informationen an.

Dieses Zustandsmaschinen-Denken beeinflusste jede nachfolgende Designentscheidung. Das Dashboard zeigt nicht nur eine Liste von Rechnungen – es gruppiert sie nach ihrem Zustand, wodurch die nächste Aktion sofort ersichtlich wird.

Das Dashboard: Informationsarchitektur

Das Dashboard musste drei Fragen sofort beantworten: Wie viel Geld ist ausstehend? Was benötigt heute meine Aufmerksamkeit? Wie ist der allgemeine Zustand meines freiberuflichen Geschäfts? Ich experimentierte mit Dutzenden von Layouts, bevor ich mich für einen dreispaltigen Ansatz entschied.

Die linke Spalte zeigt monetäre Kennzahlen: Gesamtbetrag der Ausstände, überfälliger Betrag und der Umsatz dieses Monats. Diese Zahlen sind immer sichtbar, da sie den Hauptgrund für die Existenz des Tools darstellen. Die mittlere Spalte zeigt Rechnungen, die eine Aktion erfordern, sortiert nach Dringlichkeit. Die rechte Spalte bietet schnelle Aktionen für gängige Aufgaben.

Farbe spielt eine subtile, aber entscheidende Rolle. Ich vermied die Falle, überfällige Posten schreiend rot darzustellen – das erzeugt Angst, nicht Handlung. Stattdessen verwenden überfällige Rechnungen ein gedämpftes Amber, das Aufmerksamkeit erregt, ohne Panik zu verursachen. Ziel ist es zu informieren, nicht zu alarmieren.

Rechnungserstellung: Das Formular, das sich selbst schreibt

Die meisten Rechnungstools behandeln die Formularerstellung als Dateneingabe. Man füllt Felder aus, klickt auf Speichern, fertig. Aber die Rechnungserstellung ist eigentlich eine Designaufgabe – man erstellt ein Dokument, das die eigene Professionalität widerspiegelt. Das Formular sollte sich auch so anfühlen.

Ich habe den Rechnungseditor als Live-Vorschau-System aufgebaut. Während Sie Posten eingeben, zeigt die rechte Seite des Bildschirms genau, wie das PDF aussehen wird. Kein 'Entwurf erstellen, PDF herunterladen, Fehler bemerken, bearbeiten, wiederholen' mehr. Sie sehen, was Sie bekommen, während Sie es erstellen.

Posten verwenden ein Inline-Bearbeitungsmuster, inspiriert von Tabellenkalkulationen. Tab bewegt sich zwischen Feldern, Enter erstellt eine neue Zeile, und die Benutzeroberfläche bleibt Ihnen aus dem Weg. Für wiederkehrende Posten gibt es ein Schnell-Hinzufügen-Menü mit gespeicherten Vorlagen.

// Line item component with inline editing
<LineItem
  onTab={() => focusNextField()}
  onEnter={() => addNewLine()}
  onBlur={() => recalculateTotal()}
>
  <EditableCell field="description" />
  <EditableCell field="quantity" type="number" />
  <EditableCell field="rate" type="currency" />
  <ReadOnlyCell value={quantity * rate} />
</LineItem>

Das Statusverfolgungssystem

Der Rechnungsstatus ist nicht nur Metadaten – er ist der Kern der Benutzererfahrung. Ich habe das Statussystem so konzipiert, dass es sowohl sichtbar als auch handlungsrelevant ist. Jeder Status hat eine eigene Farbe, ein Symbol und eine Reihe verfügbarer Aktionen.

• Entwurf (grau): Bearbeiten, Löschen, Freigeben
• Freigegeben (blau): Bearbeiten, Senden, PDF herunterladen
• Gesendet (lila): Erneut senden, Als angesehen markieren, Als bezahlt markieren
• Bezahlt (grün): Herunterladen, Archivieren
• Überfällig (amber): Erinnerung senden, Als bezahlt markieren

Statusübergänge sind durch Geschäftslogik geschützt. Sie können eine Rechnung nicht als bezahlt markieren, wenn sie nie gesendet wurde. Sie können eine bezahlte Rechnung nicht bearbeiten (Sie müssten stattdessen eine Gutschrift erstellen). Diese Einschränkungen sind nicht willkürlich – sie spiegeln wider, wie die Buchhaltung tatsächlich funktioniert.

type InvoiceStatus = 'draft' | 'released' | 'sent' | 'paid' | 'overdue'

const statusTransitions: Record<InvoiceStatus, InvoiceStatus[]> = {
  draft: ['released'],
  released: ['sent', 'draft'],
  sent: ['paid', 'overdue'],
  paid: [],
  overdue: ['paid'],
}

function canTransition(from: InvoiceStatus, to: InvoiceStatus): boolean {
  return statusTransitions[from].includes(to)
}

E-Mail-Automatisierung: React Email in Aktion

Rechnungen per E-Mail zu versenden, scheint einfach, bis man es tatsächlich umsetzt. Die E-Mail muss professionell aussehen, den PDF-Anhang enthalten und gerade genug Kontext bieten, ohne überladen zu wirken.

// React Email template for invoice notification
export const InvoiceEmail = ({ invoice, status }: Props) => (
  <Html>
    <Head />
    <Preview>Invoice #{invoice.number} - {formatCurrency(invoice.total)}</Preview>
    <Body style={main}>
      <Container>
        <Heading>Invoice #{invoice.number}</Heading>
        <Text>Amount due: {formatCurrency(invoice.total)}</Text>
        <Text>Due date: {formatDate(invoice.dueDate)}</Text>
        <Button href={invoice.viewUrl}>View Invoice</Button>
      </Container>
    </Body>
  </Html>
)

Jeder Statusübergang kann automatisch eine E-Mail auslösen. Wenn eine Rechnung auf 'Gesendet' wechselt, erhält der Kunde sie. Wenn sie überfällig wird, geht eine freundliche Erinnerung raus. Das System übernimmt die Kommunikation, sodass ich mich nicht daran erinnern muss.

Komponenten-Designphilosophie

Jede Komponente in Payify folgt einigen Kernprinzipien. Erstens sollten Komponenten selbsterklärend sein – ihr Zweck sollte aus ihrem visuellen Design ohne Beschriftungen klar hervorgehen. Zweitens sollten interaktive Elemente sofortiges Feedback geben. Drittens sollten leere Zustände Benutzer zu Aktionen anleiten.

Die Rechnungskarten-Komponente ist ein gutes Beispiel. Sie zeigt Kundenname, Betrag, Datum und Status in einem kompakten Format. Beim Hovern erscheint ein subtiler Schatten und die Aktionsschaltflächen. Ein Klick an beliebiger Stelle öffnet die Detailansicht. Ein Rechtsklick zeigt ein Kontextmenü.

Leere Zustände wurden mit der gleichen Sorgfalt wie gefüllte Zustände gestaltet. Eine leere Rechnungsliste sagt nicht nur 'Keine Rechnungen' – sie zeigt eine freundliche Illustration und einen prominenten 'Erste Rechnung erstellen'-Button.

Die PDF-Generierungspipeline

Die PDF-Generierung ist eine dieser Funktionen, die einfach erscheint, aber erhebliche Komplexität verbirgt. Das PDF muss pixelgenau sein, systemübergreifend konsistent gerendert werden und schnell genug generiert werden, um den UX-Fluss nicht zu unterbrechen.

Ich habe mich für React PDF aufgrund seiner Entwicklererfahrung entschieden – PDFs mit React-Komponenten zu gestalten ist wesentlich angenehmer als die Alternativen. Die Rechnungs-Vorlage ist ein separater React-Baum, der als PDF gerendert wird und Styling-Konstanten mit der Web-App für Konsistenz teilt.

Was ich gelernt habe

Die Entwicklung von Payify lehrte mich, dass 'einfache' Tools am schwierigsten zu gestalten sind. Jede Funktion muss ihre Existenz rechtfertigen. Jeder Bildschirm muss die Zeit des Benutzers respektieren. Jede Interaktion muss sich natürlich anfühlen.

Die wertvollsten Designentscheidungen waren oft die, was nicht enthalten sein sollte. Kein komplexes Berichtsmodul – exportieren Sie nach CSV und verwenden Sie eine Tabellenkalkulation, wenn Sie Analysen benötigen. Keine Unterstützung für mehrere Währungen – ich arbeite in Euro, das Tool arbeitet in Euro. Keine Kollaborationsfunktionen – dies ist ein Tool für Solo-Freiberufler.

Einschränkungen befreien das Design. Indem ich einen engen Anwendungsfall akzeptierte, konnte ich jedes Detail für diesen Fall optimieren. Das Ergebnis ist Software, die sich anfühlt, als wäre sie für mich gemacht – weil sie es war.

Was kommt als Nächstes

Payify entwickelt sich aktiv weiter. Aktuelle Prioritäten umfassen ein Angebots-/Vorschlagsmodul, das in Rechnungen umgewandelt werden kann, Spesenverfolgung für die Steuererklärung und eine tiefere Bankintegration für den automatischen Zahlungsabgleich. Das Fundament ist solide; jetzt geht es darum, die Funktionalität zu erweitern, ohne den Fokus zu verlieren.