Infomatrix Webseite – Webseite, Matrix Studio und Kundenportal
Unsere eigene zweisprachige Webseite mit Matrix Studio für das Team, einem Kundenportal für Anfragen, Termine, Offerten und Rechnungen, einem KI-Assistenten, einem kostenlosen KI-Webseiten-Check und sicherer Anmeldung mit Passkeys.
Umgesetzt mit
- Next.js
- React
- TypeScript
- Node.js
- Payload CMS
- MongoDB
- Mongoose
- Tailwind CSS
- shadcn/ui
- Radix UI
- Motion
- React Hook Form
- HTML
- CSS
- SCSS
- Python
- Odoo
- Google Gemini
- Google Cloud Vision
- PageSpeed Insights
- Google Analytics
- WebAuthn (Passkeys)
- JWT
- Sharp
- Vitest
- GitHub Actions
- Nginx
- PM2
- Cloudflare

Die Startseite
Diese Webseite ist das eigene Projekt von Infomatrix: das Schaufenster für unseren IT-Support, unsere Webseiten und Software und zugleich der Ort, an dem Kundinnen, Kunden und das Team zusammenarbeiten. Infomatrix hat sie mit Next.js, Payload CMS und MongoDB gestaltet und entwickelt und betreut sie von A bis Z.

Die Startseite im dunklen Design
Eine zweisprachige Webseite, im CMS bearbeitbar
Jede Seite, jeder Text und jede E-Mail ist auf Deutsch und Englisch und lässt sich ändern, ohne Code anzufassen. Seiten werden aus Blöcken zusammengestellt, Blogbeiträge und Projekte teilen ein Layout mit Inhaltsverzeichnis, und die Lösungen sind so gruppiert, dass Besucherinnen und Besucher schnell finden, was sie brauchen. Ein helles und ein dunkles Design, sanftes Scrollen und kurze Ladezeiten machen die Webseite angenehm.

Die Lösungen, so gruppiert, dass Besucherinnen und Besucher finden, was sie brauchen

Ein Blogbeitrag mit Inhaltsverzeichnis
Matrix, der KI-Assistent
Matrix beantwortet Fragen von Besucherinnen und Besuchern in ihrer Sprache und empfiehlt die passenden Lösungen, mit kurzen Antworten und Links zu den passenden Angeboten.

Matrix, der KI-Assistent, unter den Lösungen
Kostenloser KI-Webseiten-Check
Alle können eine Webseite kostenlos prüfen lassen. Der Check misst die Geschwindigkeit mit Google PageSpeed und prüft Suchmaschinen, Sicherheit und Barrierefreiheit; danach schreibt eine KI einen leicht verständlichen Bericht, der als PDF per E-Mail kommt.

Der kostenlose KI-Webseiten-Check
Matrix Studio: ein Ort für das Team
Matrix Studio ist das eigene Backoffice der Webseite, in ihrem Design in die Webseite eingebaut. Das Team meldet sich auf der Webseite an und findet dort alles: die Inhalte, Kundenanfragen, Termine, Zeiterfassung und Einstellungen. Alle im Team sehen, was ihre Rolle erlaubt, und die Übersicht zeigt auf einen Blick, was wartet.

Matrix Studio: die Übersicht des Teams
Inhalte
Seiten, Blogbeiträge, Lösungen, Projekte, Teammitglieder und Medien werden in Matrix Studio bearbeitet, auf Deutsch und Englisch. Texte entstehen aus Blöcken – Überschriften, Bilder, Tabellen, Diagramme, Buttons und mehr –, und Entwürfe bleiben privat, bis sie veröffentlicht werden. Jede veröffentlichte Fassung der rechtlichen Seiten bleibt erhalten, sodass frühere Fassungen lesbar bleiben.

Blogbeiträge, Seiten, Lösungen und Projekte werden direkt in Matrix Studio bearbeitet
Support-Tickets
Anfragen aus dem Support-Formular, dem Kundenportal und E-Mails an die Support-Adresse werden zu Tickets. Das Team gibt jedem einen Status, eine Priorität und Teammitglieder, antwortet der Kundschaft direkt aus dem Ticket per E-Mail und ergänzt interne Notizen, die nur das Team sieht. Tickets zum gleichen Thema lassen sich zusammenführen, und das Postfach lässt sich jederzeit mit einem Klick auf neue E-Mails prüfen.

Support-Tickets mit Status, Priorität und Teammitgliedern

Ein Ticket: Antworten an die Kundschaft und interne Notizen für das Team
Termine
Besucherinnen und Besucher buchen online eine kostenlose Erstberatung, und das Team bestätigt sie, schlägt eine andere Zeit vor oder plant eigene Termine mit der Kundschaft: online, per Telefon oder vor Ort. Kundschaft und Team erhalten die passenden E-Mails und Kalendereinladungen.

Termine und kostenlose Beratungen
Zeiterfassung
Das Team stempelt den Arbeitstag ein, misst seine Arbeit mit einem Timer und verknüpft jeden Eintrag mit einer Kundin, einem Kunden, einem Ticket oder einem Termin. Auch Fernwartungen werden erfasst. Der Zeitrapport zählt Stunden und Beträge zusammen, exportiert sie als CSV und markiert die Einträge, sobald sie verrechnet sind.

Der Zeitrapport, bereit für die Rechnung
Kundenportal
Kundinnen und Kunden haben ein eigenes Konto im selben Matrix Studio, mit nur dem, was ihnen gehört. Sie sehen ihre Support-Anfragen, Termine, Offerten und Rechnungen und ändern ihre Angaben und die Sprache unserer E-Mails selbst.

Das Kundenportal: Anfragen und Termine auf einen Blick
Support-Anfragen
Kundinnen und Kunden eröffnen Anfragen, hängen Dateien an und verfolgen die Antworten in einem Gespräch. Fernwartungen erscheinen mit ihrer Dauer in der Anfrage, sodass alles zu einem Problem beisammen bleibt.

Eine Support-Anfrage aus Sicht der Kundschaft, mit der Fernwartung
Termine
Kommende Termine erscheinen mit dem Link zum Online-Meeting; neue Termine buchen, verschieben oder absagen geht mit wenigen Klicks.

Termine mit Link zum Online-Meeting
Offerten und Rechnungen
Kundinnen und Kunden fragen eine Offerte für eine Lösung an, nehmen sie online an und unterschreiben sie und bezahlen Rechnungen online. Offerten und Rechnungen kommen aus Odoo, der Geschäftssoftware von Infomatrix, und bleiben mit ihr abgeglichen.
Firmenkonten
Eine Firma hat ein Konto für ihre Mitarbeitenden: Ihre Administratorinnen und Administratoren laden Kolleginnen und Kollegen ein, geben ihnen Rollen und bestimmen, wer Rechnungen sehen oder Anfragen eröffnen darf.

Ein Firmenkonto: Mitarbeitende, Einladungen und Rollen
Sichere Anmeldung
Kundschaft und Team melden sich mit einem Passkey an – Face ID, Touch ID, Windows Hello oder ihrem Smartphone – oder mit ihrem Passwort und einem zweiten Schritt: einem Code per E-Mail oder aus einer Authenticator-App. Passkeys und Authenticator-App richten sie im Profil ein, sehen dort, auf welchen Geräten sie angemeldet sind, und melden sich von jedem ab. Nach zu vielen falschen Versuchen wird ein Konto vorübergehend gesperrt.

Anmelden mit Passkey, oder mit Passwort und zweitem Schritt

Der zweite Schritt: ein Code aus der Authenticator-App oder per E-Mail

Passkeys und Authenticator-App, im Profil eingerichtet
E-Mails in einem Design
Jede E-Mail der Webseite – Bestätigungen, Antworten, Rechnungen, Anmeldecodes – hat dasselbe Design, kommt in der Sprache der Kundschaft und funktioniert mit Screenreadern. Eine Kopie jeder E-Mail bleibt für das Team erhalten; Anmeldecodes und private Links werden aus diesen Kopien entfernt.
Was wir umgesetzt haben
- Design & Entwicklung: eine schnelle, zweisprachige Webseite mit Matrix Studio für das Team und einem Kundenportal.
- Inhaltsverwaltung: Payload CMS, jeder Text auf Deutsch und Englisch bearbeitbar.
- Sicherheit: Passkeys, ein zweiter Schritt nach dem Passwort, Sperre nach falschen Versuchen und angemeldete Geräte.
- Anbindungen: Odoo für Offerten, Rechnungen und Zahlungen, Google Gemini für Matrix und den Webseiten-Check, Google PageSpeed.
- Hosting & Wartung: Server, SSL, Backups und automatische Tests vor jedem Update.

