Robert Heiser
Case Study UX/UI · B2B Kundenportal · 3D-Messtechnik

algona
Hub.

Alles, was nach dem Kauf zählt – an einem Ort. Ein Kundenportal für Anwender von ZEISS- und Artec-3D-Scannern: Online-Schulungen statt Präsenztermine, ein Ticketsystem statt Mail und Telefon, und Gerätewissen, das auch einen Personalwechsel übersteht.

Rolle UI/UX Designer
Auftraggeber algona GmbH – Vertrieb von 3D-Scannern und Messsoftware
Zeitraum · Team Laufendes Projekt, seit 2020 · Design in Eigenverantwortung, Abstimmung mit Geschäftsführung, Support und Vertrieb
Plattform · Werkzeuge Web-App, Desktop-first · Figma (Variables, Tokens, Komponenten) · BIxD
Auf einen Blick
Problem

Präsenzschulungen kosten Zeit und Personal, und vom Gelernten bleibt wenig hängen. Verlässt der geschulte Mitarbeiter das Unternehmen, wird das Gerät im schlechtesten Fall nicht mehr genutzt. Support läuft über Telefon und Mail, ohne feste Zuständigkeit.

Lösung

Ein Portal mit Video-Bibliothek, Online-Schulungen mit Zertifikat, Ticket-Support mit Lösungsvorschlägen aus früheren Fällen und einer Übersicht über die eigenen Geräte inklusive Dokumente.

Stand

Research, Informationsarchitektur, klickbarer Prototyp, finales UI und Designsystem liegen vor. Erste Rückmeldungen aus Support und Vertrieb sind eingeholt, die Umsetzung ist in Abstimmung.

Kontext
Ausgangslage

Erklärungs­bedürftige Geräte, verstreutes Wissen.

algona vertreibt 3D-Scanner und die zugehörige Software an Industriebetriebe. Die Geräte erfordern Einweisung, Übung und im Störungsfall jemanden, der das System kennt.

Bislang bedeutete das: Ein Trainer fährt zum Kunden. Fragen kommen per Mail oder Anruf. Handbücher und Kalibrierprotokolle liegen irgendwo im Kundenunternehmen, oder auch nicht. Jeder zusätzliche Kunde bringt denselben Aufwand noch einmal mit.

Wie lässt sich das Wissen um Gerät und Software so bereitstellen, dass Kunden mehr selbst lösen, algona weniger Zeit mit wiederkehrenden Fragen verbringt – und die Kundenbeziehung dabei enger wird, nicht loser?

Aufgabenstellung

„Nach der Schulung bleibt oft wenig hängen. Wechselt der Mitarbeiter, geht das Wissen mit.“Ausgangsbeobachtung · Gespräche bei algona

Ziele algona
  • Supportaufwand senken
  • Schulungen skalierbar anbieten, ohne Reisetätigkeit
  • Cross-Selling und Aftersales steigern
  • Kundenbindung stärken
Ziele der Anwender
  • Geräte und Software sicher beherrschen, auch Monate später
  • Wissen unabhängig von einzelnen Personen halten
  • Zügig eine Antwort und ein fester Ansprechpartner
  • Alle Unterlagen zum eigenen Gerät sofort verfügbar
Meine Rolle & Rahmen

Ich habe den gesamten Designprozess verantwortet: Research und Konzept, Informationsarchitektur, Wireframes, klickbarer Prototyp, visuelles Design und Designsystem. Ohne dediziertes Research-Budget entstanden die Erkenntnisse aus Gesprächen mit Support und Vertrieb sowie aus einer Analyse von Nutzerdaten und Wettbewerbs-Pricing. Weil Kunden mit sehr unterschiedlichem technischem Vorwissen kommen, musste das UI von Anfang an vollständig mit Design-Tokens angelegt sein – direkt weiterverwendbar für die Entwicklung.

Vorgehen
Branded Interaction Design

Fünf Phasen. Fünf Kapitel.

Ich arbeite nach dem BIxD-Modell von think moto. Es verbindet Markenstrategie mit nutzerzentriertem Design. Das Portal ist nach dem Kauf der wichtigste Berührungspunkt zwischen algona und seinen Kunden – es soll nicht wie ein beliebiges Ticket-Tool wirken, sondern wie algona.

  1. 01DiscoverChancen erkennen
  2. 02DefineRichtung festlegen
  3. 03DesignStruktur entwickeln
  4. 04DeliverDetails ausarbeiten
  5. 05DistributeErgebnis weitergeben
Phase 01

Discover

Gespräche mit Geschäftsführung, Support und Vertrieb, eine Auswertung typischer Supportanfragen und ein Blick auf den bisherigen Schulungsablauf.

E·1

Wissen hängt an Personen.

Nach der Schulung liegt es bei einer, selten zwei Personen. Verlassen diese den Betrieb, beginnt der Kunde von vorn.

E·2

Anfragen wiederholen sich.

Dieselbe Frage, anderer Kunde, wieder eine Mail.

E·3

Unterlagen sind verstreut.

Handbücher, Protokolle und Lizenzen liegen im Ordner, im Postfach oder nirgends.

E·4

Nutzung bleibt hinter dem Gerät zurück.

Wer die Software nur teilweise beherrscht, nutzt einen Bruchteil und fragt nie nach Zusatzmodulen.

Anwender

Messtechniker

Arbeitet täglich mit dem Scanner. Braucht eine schnelle Antwort, kein Handbuch. Wartezeiten auf Rückrufe kosten ihn Produktivität.

Entscheider

Verantwortlicher Qualität / Technik

Hat die Anschaffung verantwortet und will, dass sie sich rechnet. Braucht Überblick über Geräte, Dokumente und Schulungsstand.

Intern

Support bei algona

Beantwortet Anfragen, viele davon wiederkehrend. Will priorisieren, dokumentieren und Antworten nicht mehrfach schreiben.

Research-Board mit Nutzerdaten, Pricing-Analyse und User Journeys
Grundlagenarbeit

Research & Business Case

Neben Interviews und Supportauswertung: Nutzerdaten und Wettbewerbs-Pricing als Grundlage für eine erste ROI-Betrachtung, dazu Pain Points, Benefits und drei zentrale User Journeys für Schulung, Bibliothek und Support.

Kauf → Inbetriebnahme → Schulung → Alltag → Störung → Personalwechsel → Erweiterung. Die Brüche liegen bei Schulung, Störung und Personalwechsel. Genau dort setzt der Hub an.

Phase 02

Define

Der Hub macht algona vom Lieferanten zum Begleiter. Lernen, nachschlagen, anfragen – jede Interaktion nach dem Kauf läuft über einen Ort, den algona gestaltet.

Strategische Leitidee
P·1

Erst helfen, dann fragen lassen.

Bevor ein Ticket entsteht, sieht der Nutzer passende Videos und Vorschläge aus gelösten Fällen.

P·2

Wissen gehört dem Unternehmen.

Kurse, Zertifikate und Dokumente sind an das Kundenkonto gebunden, nicht an eine Person.

P·3

Nur zeigen, was relevant ist.

Inhalte werden nach den registrierten Geräten vorgefiltert.

P·4

Ein Bearbeiter, ein Status.

Jede Anfrage hat einen sichtbaren Ansprechpartner und einen nachvollziehbaren Stand.

Scope – vier Bereiche
  • Video-Bibliothek
  • Online-Schulungen mit Quiz und Zertifikat
  • Support-Ticketsystem mit KI-Lösungsvorschlägen
  • Geräteübersicht mit allen Dokumenten
Kennzahlen für den Betrieb
  • Tickets pro Kunde und Monat
  • Anteil der Anfragen, die vor dem Ticket erledigt sind
  • Abschlussquote der Kurse
  • Aktive Nutzer je Kundenkonto
  • Anfragen zu Zusatzmodulen aus dem Hub heraus
Phase 03

Design

Vier Bereiche und ein Dashboard als Einstieg. Das Dashboard zeigt, was aktuell ansteht: offene Tickets, begonnene Kurse, neue Videos zu den eigenen Geräten.

Wireframes von Dashboard, Lernbibliothek, Support und Schulungen
Struktur vor Farbe

Wireframes

Vier Bereiche in Low-Fi durchgeplant und verlinkt: Dashboard, Lernbibliothek, Support und Schulungen – erst als klickbarer Zusammenhang, bevor visuelles Design und Copy dazukamen.

Klickbarer Prototyp: Ticket anlegen mit KI-Lösungsvorschlag
Vom Wireframe zum Ablauf

Klickbarer Prototyp

Zentraler Testfall: ein Ticket anlegen. Der Assistent schlägt zuerst passende Videos und gelöste Fälle vor – erst wenn das nicht reicht, geht die Anfrage tatsächlich raus.

Designentscheidungen

Erst der Vorschlag, dann das Ticket.

Der KI-Vorschlag steht vor dem Formular, nicht daneben. Nutzer, die ohnehin ein Ticket brauchen, kostet das einen Klick. Dafür wird ein Teil der Anfragen gar nicht erst zum Ticket. Ein Link „Trotzdem Ticket eröffnen“ hält den Weg kurz.

Bibliothek nach Gerät, nicht nach Thema.

Nutzer denken vom Scanner her („mein Gerät zeigt Fehler X“), nicht von einer Kategorie. Themen bleiben als zweite Ebene erhalten.

Kurse und Bibliothek getrennt.

Kurse sind linear und enden mit Quiz und Zertifikat. Die Bibliothek ist frei durchsuchbar. Beides in einem Bereich hätte den Kursfortschritt unklar gemacht.

Ein Login für alles.

Kein separates Konto für Schulungen oder Support – ein Zugang deckt alle vier Bereiche ab, damit ein Zusatzangebot nie an einer weiteren Anmeldung scheitert.

Phase 04

Deliver

Ein Designsystem, das an das Erscheinungsbild von algona anknüpft und so strukturiert ist, dass die Entwicklung direkt damit weiterarbeiten kann.

Aufbau
  • Farb-, Typo- und Abstandswerte als Figma-Variables
  • Semantische Tokens, etwa für Ticketstatus (offen, in Bearbeitung, gelöst), statt Rohwerten in Komponenten
  • Komponenten mit Varianten und Auto-Layout
  • Dokumentation direkt in Figma, damit Komponenten-Bibliothek und Handoff synchron bleiben

Beispielkomponenten sind nach diesem Prinzip angelegt: Basiswert als Variable, semantischer Token darüber, Komponente bindet ausschließlich an den Token.

Phase 04 · Die Lösung

Fünf Bereiche.
Ein Login.

Das Dashboard als Einstieg, dahinter Bibliothek, Schulungen, Tickets und Geräte.

Dashboard
Einstieg

Dashboard

Zeigt, was den Nutzer heute betrifft: laufende Kurse, offene Tickets, neue Videos zu seinen Geräten.

Video-Bibliothek
Bereich 1

Video-Bibliothek

Kurze Videos zu Bedienung, Praxistipps und Fehlerbehebung, vorgefiltert nach den Geräten und der Software des Kunden.

Online-Schulungen
Bereich 2

Online-Schulungen

Schulungen finden nicht mehr vor Ort statt. Der Kunde erhält einen Videokurs, Lernmaterial und bei Bedarf Datensätze für die Software. Fortschritt sichtbar, Quiz zum Abschluss, Zertifikat direkt anforderbar.

Support-Tickets
Bereich 3

Support-Tickets

Statt Mail und Anruf ein Ticket mit festem Ansprechpartner – mit Lösungsvorschlag aus gelösten Anfragen, bevor das Ticket überhaupt eröffnet wird.

Geräteübersicht
Bereich 4

Geräte­übersicht

Alle Geräte und Lizenzen des Unternehmens an einer Stelle, mit den zugehörigen Unterlagen: Handbücher, Protokolle, Lizenzen.

Phase 05

Distribute

  • Konzept, Prototyp und Designsystem sind mit Geschäftsführung und Support abgestimmt und stehen für die Entwicklung bereit.
  • Rollout in zwei Stufen geplant: zuerst Bibliothek, Support-Tickets und Geräteübersicht, danach Online-Schulungen mit KI-Lösungsvorschlägen.
Ergebnis
Was dabei herauskam

Ein Konzept, das steht.

Research, Informationsarchitektur, klickbarer Prototyp, finales UI und Designsystem – abgestimmt mit Geschäftsführung, Support und Vertrieb und bereit für die Entwicklung.

Bereiche, ein Login 4+1
User Journeys durchgeplant 3
Phasen von Discover bis Distribute 5
Was sich für algona ändert
  • Schulungen skalieren, ohne dass zusätzliches Personal reist.
  • Wiederkehrende Fragen werden einmal beantwortet und danach automatisch angeboten.
  • Kunden schöpfen ihre Geräte besser aus – die Voraussetzung dafür, dass Zusatzmodule nachgefragt werden.
  • Der Hub wird zum täglichen Kontaktpunkt mit der Marke.
Rückblick
  • Das Ticketsystem war technisch der anspruchsvollste, wirtschaftlich aber der klarste Baustein. Beim nächsten Mal noch früher mit dem Support-Team an realen Anfragen arbeiten.
  • Das Designsystem parallel zum UI aufzubauen hat sich ausgezahlt.
  • Kunden schon in der Wireframe-Phase in Testinterviews einbinden, statt erst am fertigen Prototyp.
Ausblick
  • Usability-Test mit Bestandskunden
  • Rollen- und Rechtekonzept für mehrere Standorte
  • Mobile Ansicht für Bibliothek und Ticketstatus
Kontakt

Reden wir über B2B, Designsysteme – oder diesen Hub.