Mailvelope UX-UI-Design Digitales Produktdesign

Mailvelope - E-Mails sicher schreiben

Mailvelope ist ein Open-Source-Projekt, das sich zum Ziel gesetzt hat, sichere E-Mails für alle zugänglich zu machen, indem es einen Ende-zu-Ende Verschlüsselungsprozess anbietet. Obwohl es - technisch gesehen - das vielseitigste Werkzeug auf dem Markt ist, fehlte es an der Benutzerfreundlichkeit und der Markenqualität, um in größerem Maßstab erfolgreich zu sein.

Unser Ziel war es, die Mailvelope benutzerfreundlicher zu machen und zu einer erwachsenen Marke zu entwickeln.

Bestandsaufnahme

Das Mailvelope-Plugin existiert seit 2012 und hat dementsprechend schon einige Entwicklungszyklen hinter sich gebracht. Wie bei jeder Software schleichen sich bei höherer Feature-Dichte Inkonsistenzen ein. Bei unserer Analyse der Mailvelope-User-Experience haben wir auch einige Sackgassen im User-Flow entdeckt, die dazu geführt haben, dass die Nutzer das Plugin nach der Installation nicht mehr benutzen. Diese Erkenntnis wird durch Statistiken gestützt, die zeigen, dass viele Leute an dem Plugin interessiert sind und es herunterladen, aber nie eine einzige Mail schreiben.

Um das zu ändern wurde die komplexe (und manchmal widersprüchliche) Technologie von OpenPGP und GnuPG in eine einfache Sprache mit verständlichen Metaphern und bekannten Mustern verwandelt. Nachdem wir den idealen Prozess auf Wireframe-Basis abgeschlossen hatten, haben wir ihn in umsetzbare Teile zerlegt, die in den darauffolgenden Monaten umgesetzt werden konnten.

Security Background Mailvelope UX-Design

Der Sicherheitshintergrund

Eines der wichtigsten sicherheitsrelevanten Features von Mailvelope ist der Sicherheitshintergrund. Dadurch, dass dieser vollständig vom Nutzer durch Farbe und Symbol personalisiert wird, kann kein anderes Programm den Hintergrund nachstellen. So weiß der Nutzer, dass seine Kommunikation immer dann sicher ist, wenn er seinen persönlichen Sicherheitshintergrund sieht.

Der Hintergrund ist inspiriert von den Sicherheitsmerkmalen auf Geldscheinen: Auf diesen werden berühmte Personen, Tiere oder Bauwerke des jeweiligen Landes abgebildet. Mailvelope nutzt ebenfalls solche Erkennungszeichen von Nationen und Kulturen rund um den Globus, um der internationalen Benutzerbasis gerecht zu werden. So kann jeder eine persönliche Beziehung zu seinem eigenen Sicherheitshintergrund aufbauen.

Senden und Empfangen von E-Mails

Empfangen einer verschlüsselten E-Mail

In Ihrer Webmail-Oberfläche ersetzt Mailvelope den unleserlich verschlüsselten Anhang durch menschenlesbaren Text bei Eingabe Ihres Schlüsselpassworts.

Receiving an Email Mailvelope UX-UI-Design

Schreiben einer E-Mail

Das Herzstück von Mailvelope ist das E-Mail-Fenster, das beim Klicken auf die Schaltfläche Mailvelope geöffnet wird. Es wird auf dem Sicherheitshintergrund platziert und bietet eine Live-Validierung von E-Mail-Adressen, um zu überprüfen, ob eine sichere Kommunikation möglich ist oder nicht.

Sending an Email Mailvelope UX-UI-Design

Schlüsselmanagement

Im Schlüsselbund verwaltet man seine Identität und seine Kontakte, die ebenfalls sicher kommunizieren können. Jede Identität und jeder Kontakt kann mehrere Einheiten mit dedizierten Validierungen haben. Dieses sehr komplexe System wird durch eine Drill-In-Liste abgebildet. So kann der Nutzer auf alle Funktionen zugreifen, ohne dass er von zu vielen Informationen überfordert wird.

Vorstellung der Funktionen

Auf der Landing Page ist es wichtig, die zentralen Funktionen von Mailvelope auf einfache Weise zu kommunizieren. Ziel ist es, dass der Nutzer sehr schnell versteht, ob er das Plugin herunterladen möchte oder nicht. Deshalb haben wir uns für eine dreistufige Illustration entschieden, die auf spielerische Art und Weise das Produkt erklärt.