Zum Inhalt springen
← Alle Arbeiten
LiveUnternehmens-Webanwendung · komplettes Redesign

Eitel Invest CRM

Komplettes Redesign des internen CRM eines Unternehmens, vom Datenmodell bis zur täglichen Arbeitsoberfläche.

Kunde
Eitel Invest
Jahr
2026
Rolle

UI-Architektur und Designsystem

Kompletter Neubau des Frontends

API und Datenmodell

Rollen- und Rechtemodell

Sicherheitsprüfung und Härtung

Das CRM ist ein internes Werkzeug hinter einer Anmeldung. Die Screenshots stammen aus einer lokalen Testumgebung mit erfundenen Datensätzen, ohne Kundendaten.

crm.eitel-invest.ag
Neu gestaltetes Dashboard des Eitel Invest CRM mit Testdaten: Gesamtinvestment, Kundenzahl, Neuzugänge der Woche, Statusverteilung, offene Fälle und zuletzt hinzugefügte KundenGruppierte NavigationInvestment & NeuzugängeStatusleiste → filtert ListeZuletzt hinzugefügt

Vorher und nachher

Ziehen Sie den Regler, um die frühere Version des Dashboards mit dem Redesign zu vergleichen. Der frühere Screenshot stammt aus einem leeren System, das Redesign aus einer lokalen Testumgebung mit erfundenen Datensätzen.

crm.eitel-invest.ag
Nachher: das neu gestaltete Dashboard
Vorher: das frühere Dashboard
VorherNachher
  • Marke

    Vorher Eine generische Wortmarke „INVEST CRM“ auf neutralem Dunkelgrau.

    Nachher Durchgehend die Identität der Eitel Invest AG: Logo, Navy und Gold, Serifen-Überschriften.

  • Dashboard

    Vorher Zwei Zähler, Kunden gesamt und letzte Änderungen, plus eine Kachel zum Anlegen.

    Nachher Gesamtinvestment, Kundenzahl und Neuzugänge der Woche; eine Statusleiste, die per Klick die Liste filtert; offene Fälle, die am längsten unveränderten zuerst.

  • Navigation

    Vorher Eine flache Liste mit fünf Links.

    Nachher Gruppiert in Übersicht und Verwaltung, mit einem neuen Partnermodul neben den Kunden.

  • Partnermodell

    Vorher Keine Verwaltung von Partnern.

    Nachher Partner als eigene Datensätze, Kunden zuordenbar mit prozentualem Anteil.

  • Konto

    Vorher Name, Rolle und Abmelden.

    Nachher Initialen-Avatar, Rolle, Passwortänderung und Abmelden, dazu eine tageszeitabhängige Begrüßung und das heutige Datum.

  • Darunter

    Vorher —

    Nachher Rollenprüfung auf dem Server, SQL-Migrationen im Repository und eine dokumentierte Sicherheitsprüfung.

Ein internes Werkzeug, mit dem den ganzen Tag gearbeitet wird

Eitel Invest führt seine Kunden- und Lead-Arbeit über ein CRM, in dem das Team ständig arbeitet. Informationen müssen vollständig, aktuell und für die Person erreichbar sein, die den Fall als Nächstes übernimmt.

Ich habe es neu gebaut. Kein neuer Anstrich, sondern Interface-Architektur, Komponentensystem, Bildschirme, Rechtemodell und die Datenwege dahinter.

Eine erste Version, die Daten speicherte und wenig verriet

Die erste Version konnte das Nötigste: eine Kundenliste, ein Formular, ein Änderungsprotokoll und eine Benutzerverwaltung. Aber sie war generisch, ein „Invest CRM“ ohne Marke, und ihr Dashboard zeigte zwei Zähler. Sie konnte dem Team nicht sagen, wie viel Kapital betreut wird, wie viele Neukunden diese Woche dazukamen oder welche Fälle seit Langem unberührt liegen.

Partner, die Kunden vermitteln, kannte sie gar nicht. Bei einem internen Werkzeug, das das Team jeden Tag öffnet, bezahlt man solche Lücken jeden Tag.

Das System neu gestalten, nicht nur die Bildschirme

Ich habe bei der Komponentenebene angefangen: ein einheitlicher Satz aus Flächen, Eingaben, Tabellen und Zuständen, damit jeder neue Bildschirm dasselbe Verhalten erbt, statt es neu zu erfinden.

Darauf habe ich die Arbeitsoberflächen neu gebaut: Dashboard, Kundenliste und -detail, Kunden- und Partnerformulare, Benutzerverwaltung, Änderungsprotokoll. Dazu bekam das Produkt die eigene Identität des Unternehmens: Logo, Navy und Gold, Serifen-Überschriften. Das Dashboard öffnet jetzt mit Gesamtinvestment, Neuzugängen der Woche, einer Statusleiste, die per Klick die Kundenliste filtert, und den offenen Fällen, die am längsten unverändert sind.

Partner wurden ein eigenes Modul: Partner sind Datensätze, und jeder Kunde lässt sich einem oder mehreren davon mit prozentualem Anteil zuordnen.

Der Zugriff ist rollenbasiert, man sieht also genau das, was man auch tun darf, und alles funktioniert bis hinunter zur Tablet-Größe.

  • Gemeinsame Komponentenebene: Flächen, Formulare, Tabellen, Leer- und Ladezustände
  • Dashboard: Gesamtinvestment, Neuzugänge der Woche, Statusleiste, offene Fälle älteste zuerst
  • Neues Partnermodul mit prozentualen Anteilen pro Kunde
  • Kundendatensätze mit branchenspezifischen Feldern
  • Rollenbasierte Rechte steuern Navigation und Aktionen
  • Benutzerverwaltung und Änderungsprotokoll in der App
  • Responsiv bis zur Tablet-Breite

Modernes Frontend auf einem pragmatischen Backend

Das Frontend ist React und TypeScript auf Vite, mit Radix-Primitives unter dem Komponentensystem und Tailwind für die Gestaltung. Zustand, der über Bildschirme hinweg gebraucht wird, läuft über einen typisierten Context statt per Hand durchgereicht zu werden.

Das Backend ist PHP mit MySQL, weil die Umgebung das so vorgibt. Ich habe damit gearbeitet statt dagegen: eine klare API pro Ressource, Session-Authentifizierung, eine Rechteprüfung an der Grenze und SQL-Migrationen im Repository, damit das Schema eine Geschichte hat.

Zum Schluss habe ich das Ergebnis auf Sicherheit geprüft, also Eingabeverarbeitung, Autorisierung an jedem Endpunkt statt nur in der Oberfläche, sicherer Umgang mit Datei-Uploads und externen Links, und die Ergebnisse dokumentiert, damit die Korrekturen nachvollziehbar sind.

Was sich geändert hat

Ehrlich gesagt: Es ist ein internes System, und ich habe keine veröffentlichten Kennzahlen, die ich zitieren könnte. Zeigen kann ich die Oberfläche, die Architektur dahinter und dass es täglich im Einsatz ist.

Die Verbesserungen, für die ich geradestehen kann, sind strukturell: ein Komponentensystem statt mehrerer, Autorisierung auf dem Server, ein Schema mit Migrationen und Bildschirme, die dem echten Arbeitsablauf folgen.

Stack

  • React
  • TypeScript
  • Vite
  • Tailwind CSS
  • Radix UI
  • anime.js
  • PHP
  • MySQL
  • Session auth
  • Role-based permissions

Was das zeigt

Eine bestehende, geschäftskritische Anwendung von Grund auf neu bauen, mit Designsystem, Oberfläche, Rechten und Datenebene, ohne die Arbeit zu stoppen, die sie trägt.

Bildschirme

Geteilter Anmeldebildschirm: links Marke und Zweck, rechts ein einziges, fokussiertes Formular.Anmeldung
Geteilter Anmeldebildschirm: links Marke und Zweck, rechts ein einziges, fokussiertes Formular.
Oben Gesamtinvestment, Kundenzahl und Neuzugänge der Woche; eine Statusleiste, die per Klick die Kundenliste filtert; offene Fälle, älteste zuerst, neben den zuletzt bearbeiteten Datensätzen.Dashboard
Oben Gesamtinvestment, Kundenzahl und Neuzugänge der Woche; eine Statusleiste, die per Klick die Kundenliste filtert; offene Fälle, älteste zuerst, neben den zuletzt bearbeiteten Datensätzen.
Durchsuchbare Kundenliste mit Statusfiltern, Statusabzeichen und Aktionen pro Zeile.Kunden
Durchsuchbare Kundenliste mit Statusfiltern, Statusabzeichen und Aktionen pro Zeile.
Kundenformular mit branchenspezifischen Feldern und Partner-Zuordnung mit Anteil pro Partner.Erfassung
Kundenformular mit branchenspezifischen Feldern und Partner-Zuordnung mit Anteil pro Partner.

Nächstes Projekt

Propheon →

Neu gestaltete deutschsprachige Website für eine Prop-Trading-Firma: Angebot, Challenges und Kaufweg für Trader in Deutschland, Österreich und der Schweiz.

So ein Projekt geplant?

Erzählen Sie mir von Ihrem Vorhaben. Ich melde mich mit einem klaren Plan und einer ehrlichen Einschätzung.

Projekt anfragen →