Infomatrix
Infomatrix

Infomatrix Website – Website, Matrix Studio and Customer Portal

Our own bilingual website with Matrix Studio for the team, a customer portal for requests, appointments, quotations and invoices, an AI assistant, a free AI website check and secure sign-in with passkeys.

Built with

  • 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
The home page of the Infomatrix website

The home page

This website is Infomatrix’s own project: the shop window for our IT support, websites and software, and the place where customers and the team work together. Infomatrix designed and built it with Next.js, Payload CMS and MongoDB, and runs it end to end.

The home page of the Infomatrix website in the dark theme

The home page in the dark theme

A bilingual website, editable in the CMS

Every page, text and email is in German and English and can be changed without touching any code. Pages are put together from blocks, blog posts and projects share one layout with a table of contents, and the solutions are grouped so that visitors quickly find what they need. A light and a dark theme, smooth scrolling and fast loading make the website pleasant to use.

Solution cards on the Infomatrix website

The solutions, grouped so that visitors find what they need

A blog post on the Infomatrix website with its table of contents

A blog post with its table of contents

Matrix, the AI assistant

Matrix answers visitors’ questions in their language and recommends the solutions that fit, with short answers and links to the matching offers.

Matrix, the AI assistant of the Infomatrix website

Matrix, the AI assistant, below the solutions

Free AI website check

Anyone can have a website checked for free. The check measures speed with Google PageSpeed and looks at search engines, security and accessibility; an AI then writes an easy-to-read report, which arrives as a PDF by email.

The free website check on the Infomatrix website

The free AI website check

Matrix Studio: one place for the team

Matrix Studio is the website’s own back office, built into the website in its design. The team signs in on the website and finds everything there: the content, customer requests, appointments, time tracking and settings. Each team member sees what their role allows, and the overview shows at a glance what is waiting.

The overview of Matrix Studio for the team

Matrix Studio: the team’s overview

Content

Pages, blog posts, solutions, projects, team members and media are edited in Matrix Studio, in German and English. Texts are written with blocks – headings, pictures, tables, charts, buttons and more – and drafts stay private until they are published. Every published version of the legal pages is kept, so earlier versions can still be read.

The blog posts in Matrix Studio

Blog posts, pages, solutions and projects are edited right in Matrix Studio

Support tickets

Requests from the support form, the customer portal and emails to the support address become tickets. The team gives each one a status, a priority and team members, answers the customer by email right from the ticket, and adds internal notes only the team sees. Tickets about the same thing can be merged, and the mailbox can be checked for new emails at any time with a click.

The support tickets in Matrix Studio

Support tickets with status, priority and team members

A support ticket with answers and an internal note

A ticket: answers to the customer and internal notes for the team

Appointments

Visitors book a free first consultation online, and the team confirms it, offers another time or plans its own appointments with customers: online, by phone or on site. Customers and team members get the matching emails and calendar invitations.

The appointments in Matrix Studio

Appointments and free consultations

Time tracking

The team checks in for the working day, times its work with a timer and links each entry to a customer, a ticket or an appointment. Remote support sessions are recorded too. The time report adds up hours and amounts, exports them as CSV and marks the entries once they are invoiced.

The time report in Matrix Studio

The time report, ready for invoicing

Customer portal

Customers have their own account in the same Matrix Studio, with only what is theirs. They see their support requests, appointments, quotations and invoices, and change their details and the language of our emails themselves.

The customer portal’s overview

The customer portal: requests and appointments at a glance

Support requests

Customers open requests, attach files and follow the answers in one conversation. Remote support sessions show in the request with their time, so everything about a problem stays together.

A support request in the customer portal

A support request as the customer sees it, with the remote support session

Appointments

Upcoming appointments show with the link to the online meeting; customers book new ones, or move and cancel them, in a few clicks.

Appointments in the customer portal

Appointments with a link to the online meeting

Quotations and invoices

Customers request a quotation for a solution, accept and sign it online, and pay invoices online. Quotations and invoices come from Odoo, the business software Infomatrix works with, and stay in sync with it.

Company accounts

A company has one account for its employees: its administrators invite colleagues, give them roles and decide who may see invoices or open requests.

A company account with its employees

A company account: employees, invitations and roles

Secure sign-in

Customers and the team sign in with a passkey – Face ID, Touch ID, Windows Hello or their phone – or with their password and a second step: a code by email or from an authenticator app. They set up passkeys and the authenticator app in their profile, see on which devices they are signed in and can sign out of any of them. After too many wrong attempts, an account is locked for a while.

The sign-in page with passkey

Sign in with a passkey, or with the password and a second step

The second step after the password

The second step: a code from the authenticator app or by email

The sign-in methods in the profile

Passkeys and the authenticator app, set up in the profile

Emails in one design

Every email the website sends – confirmations, answers, invoices, sign-in codes – has the same design, comes in the customer’s language and works with screen readers. A copy of each is kept for the team; sign-in codes and private links are removed from those copies.

What we delivered

  • Design & development: a fast, bilingual website with Matrix Studio for the team and a customer portal.
  • Content management: Payload CMS, with every text editable in German and English.
  • Security: passkeys, a second step after the password, locked accounts after wrong attempts and signed-in devices.
  • Integrations: Odoo for quotations, invoices and payments, Google Gemini for Matrix and the website check, Google PageSpeed.
  • Hosting & maintenance: server, SSL, backups, and automatic tests before every update.

Related services

View all work

You are leaving infomatrix.ch

This link opens , a website of someone else. We are not responsible for its content.