ProofPass
ProofPass ist ein Datenblatt-Portal: Hersteller und Händler stellen damit Sicherheitsdatenblätter und Leistungserklärungen ihren Kunden zu, mit Nachweis. Es ist kein Kundenauftrag, sondern eine Eigenentwicklung aus unserem Haus, die wir gestaltet und gebaut haben und selbst betreiben. Hier zeigen wir, wie aus einem trockenen Pflichtthema eine Oberfläche wird, der man vertraut.
- Branche
- Eigenes Produkt (Software)
- Standort
- Graz
- Leistungen
- Barrierefreie Websites nach BaFG, Homepage erstellen lassen in Graz, Webentwicklung in Graz
- Schwerpunkt
- Designsystem, Nutzerführung, Vertrauen
Ausgangslage
Worum es ging
Sicherheitsdatenblätter, Leistungserklärungen und GPSR-Angaben sind Pflicht, aber niemand liest gern darüber. Wer sie liefern muss, will drei Dinge wissen: Ist das Dokument aktuell, ist es beim Kunden angekommen, und kann ich das belegen? Die Oberfläche von ProofPass sollte genau diese Fragen beantworten, ohne nach Behörde oder nach Werbeseite auszusehen. Weil es unser eigenes Produkt ist, gab es keine Vorgaben von außen, aber auch niemanden, auf den man eine schwache Entscheidung schieben könnte.
Umsetzung
Was wir gebaut haben
Ein Satz als Maßstab
Bevor eine Seite entstand, stand der Kernsatz fest: „Jedes Datenblatt beim Kunden. Mit Nachweis.“ Jede Seite muss ihn stützen, keine darf ihn verwässern. Das klingt nach Marketing, ist aber ein Werkzeug für die Gestaltung: Was den Satz nicht stützt, fliegt raus.
Farben, die etwas bedeuten
Grundfarbe ist ein dunkles Tannengrün für Knöpfe, Links und das Zeichen. Dazu kommt genau eine Signalfarbe: das Rot vom Rand der Gefahrenpiktogramme, das jede Sicherheitsfachkraft kennt. Es markiert nur, was gesehen werden muss, etwa eine Frist oder eine Warnung, und kommt höchstens einmal pro Ansicht vor. Die Flächen sind kühles Papierweiß statt Creme, damit die Seite nach Werkzeug aussieht und nicht nach Lifestyle.
Drei Schriften, drei Aufgaben
Überschriften und Bedienung laufen in Schibsted Grotesk, einer sachlichen Zeitungsgrotesk. Lange Ratgebertexte stehen in Source Serif 4, weil sich Fließtext so ruhiger liest. Eine Monospace-Schrift kommt nur für Kennungen zum Einsatz: GTIN, UFI, Versionsnummern, Dateinamen. So erkennt man auf einen Blick, was Text ist und was eine Nummer, die man abgleichen muss. Alle Schriften liegen auf dem eigenen Server.
Das Produkt zeigen statt beschreiben
Auf der Startseite läuft eine kleine Demo durch vier Ansichten: Hochladen, Produktseite, Zustellen, Nachweis. Sie spielt langsam, solange sie sichtbar ist, lässt sich mit den Pfeiltasten bedienen und hat einen Pause-Knopf, damit sich nichts ungefragt bewegt. Wer mehr sehen will, findet auf einer Beispielseite eine Produktseite, eine Zustellmail und die Nachweisliste mit erfundenen Daten, die als erfunden gekennzeichnet sind. Die Bilder des Dashboards sind echte Bildschirmfotos der Software.
Vertrauen nur mit wahren Sätzen
ProofPass ist neu. Also gibt es keine Kundenlogos und keine Zitate, solange es keine echten gibt. Vertrauen entsteht stattdessen aus Dingen, die man prüfen kann: Basis-Paket bis zehn Produkte kostenlos, Server in Frankfurt, entwickelt in Graz, und bei jeder Rechtsaussage die Fundstelle, etwa „Art. 31 REACH“. Wie wir solche Oberflächen technisch umsetzen, beschreibt unsere Seite zur Webentwicklung in Graz.
Details, die den Unterschied machen
Die Herstellerseite übernimmt die Hausfarbe des Kunden, aber nicht um jeden Preis. Erreicht weiße Schrift auf dieser Farbe kein Kontrastverhältnis von 4,5:1, nimmt die Seite das ProofPass-Grün. Die Vorschau auf der Beispielseite rechnet das live im Browser vor, damit niemand erst nach dem Speichern merkt, dass seine Farbe nicht taugt.
Im Dashboard führt eine Einrichtungs-Checkliste durch die ersten Schritte, vom ersten Produkt mit PDF bis zum Vertrag zur Auftragsverarbeitung. Erledigtes bleibt durchgestrichen sichtbar, damit man sieht, wie weit man ist. Unter den Überschriften steht ein Satz, wozu die Ansicht da ist, etwa bei den Abnehmern: „Wer deine Produkte bekommt, bekommt die Datenblätter.“ Das Werkzeug soll nüchtern wirken, weil es um Pflichten geht.
Eine kleine Entscheidung mit großer Wirkung: Bestätigen und Abmelden aus einer Mail funktioniert nur über einen Knopf auf der Seite, nie über den Link allein. Viele Firmen-Postfächer öffnen Links automatisch zur Prüfung. Ohne den Knopf hätte ein Virenscanner im Namen des Kunden bestätigt oder abgemeldet.
Ergebnis
Was geliefert wurde
Einblicke
Die Website im Detail
Am Smartphone
Der QR-Code auf Etikett oder Gebinde wird fast immer mit dem Handy gescannt. Die Produktseite zeigt deshalb ganz oben die aktuellen Dokumente mit Version und Stand und darunter die Kontaktadresse für Fragen. Ältere Fassungen folgen erst danach, damit niemand versehentlich ein ersetztes Datenblatt öffnet.
Für deinen Betrieb
Was du mitnehmen kannst
- Ein Pflichtthema wird verständlich, wenn jede Seite genau eine Aussage stützt und alles andere weglässt.
- Eine Signalfarbe wirkt nur, solange sie selten ist. Einmal pro Ansicht reicht.
- Zeig dein Produkt mit Beispieldaten, statt es zu beschreiben, und schreib dazu, dass es Beispieldaten sind.
Häufige Fragen
Ist ProofPass ein Kundenprojekt?
Nein. ProofPass ist eine Eigenentwicklung, eine Marke unserer Schwesterfirma EA Digital Solutions in Graz. Wir haben Oberfläche und Software selbst gestaltet und gebaut und betreiben das Portal selbst. Deshalb steht hier kein Kundenzitat und keine Kennzahl eines Auftraggebers.
Was macht ProofPass?
Hersteller und Händler laden Sicherheitsdatenblätter, Leistungserklärungen und andere Produktdokumente hoch. Jedes Produkt bekommt eine Seite mit QR-Code, jede neue Fassung geht per Mail an die Abnehmer, und Versand, Öffnen und Download stehen mit Zeitpunkt in einer Nachweisliste. Bis zehn Produkte ist das Basis-Paket kostenlos.
Warum ein eigenes Produkt als Referenz?
Weil man daran sieht, wie wir entscheiden, wenn niemand etwas vorgibt: welche Farbe was bedeutet, welche Schrift wofür steht und was weggelassen wird. Dieselbe Sorgfalt stecken wir in Websites und Web-Apps für Betriebe.
Könnt ihr so eine Oberfläche auch für meine Software gestalten?
Ja. Wir gestalten und bauen Web-Apps, Portale und Dashboards, vom Designsystem bis zur fertigen Oberfläche. Schreib uns, was deine Software können soll, dann sagen wir dir, wie wir es angehen würden.
Wie ProofPass unter der Oberfläche gebaut ist, mit Mandanten, Versionsarchiv, API und Hosting, beschreibt unsere Schwesterfirma: Technik und Architektur dahinter bei EA Digital Solutions.
Nächster Schritt
So etwas für deinen Betrieb?
Erzähl uns von deinem Betrieb. Nach 30 bis 45 Minuten hast du eine klare Empfehlung, auch wenn wir nicht zusammenarbeiten.
Kostenlos und unverbindlich5,0 bei Google