Mailvelope UX-UI-Design Digitales Produktdesign

Mailvelope - E-Mails sicher schreiben

Mailvelope is an open-source project that strives to bring safe email to everyone by offering an end-to-end encryption process. Even though it is – technically speaking – the most versatile tool out there, it lacked the usability and brand to succeed on a bigger scale.

Our goal was to simplify usability and to evolve Mailvelope to a more consumable brand.

What is the status?

When we analyzed the User Experience of Mailvelope we identified a lot of gaps and dead ends, which leads users to abandon the product. This insight is backed by statistics, which reveal that a lot of people are interested in the plugin and download it, but never write a single mail.

To change that we tried to transform the complex (and sometimes contradicting) nature of OpenPGP and GnuPG into a simple language with understandable metaphors and known patterns. Once we completed the ideal process on a wireframe basis we broke it down into implementable pieces, that will be developed over the future months.
Design Thinking Workshop Mailvelope
Design Thinking Workshop Mailvelope
Security Background Mailvelope UX-Design

The Security Background

A specialty of Mailvelope is that due to security reasons each screen has to feature an individual security background to let the user know that the contents of this screen are not manipulated or can be read by someone else. While this feature is unique, the execution felt somehow impersonal, because the user could only modify the rotation, size and color of a key lock.

Inspired by the security features of banknotes we put together an intercultural set of icons, where the user could choose one of them and a color scheme to build a personal relation to his own security background. As the user base of Mailvelope is spread over the world the icons had to represent every part of the world equally.

Sending & Receiving Emails

Receiving an encrypted Email

In your webmail interface Mailvelope replaces the unreadable encrypted attachment into human readable text on input of your key password.
Receiving an Email Mailvelope UX-UI-Design

Writing an Email

The heart of Mailvelope is of course the email window that gets triggered on clicking the Mailvelope button. It is placed on the security background and features a live validation of e-mail adresses, checking if secure communication is possible or not.
Sending an Email Mailvelope UX-UI-Design

Key Management

In every keyring you have your identity and contacts that are able to communicate securely. Each identity and contact can have multiple entities with dedicated validites. This very complex system is handled by a drill-in list that gives all the features without overloading the user.
UX-UI-Design Mailvelope Keymanagement

Presenting the Product

On the landing page it is important to communicate the key features of Mailvelope in a very simple way so that the user understand very quickly if they want to download the plugin or not. This is why we opted for a three-step hero illustration on the top only to be followed by a CTA.
UX-UI-Design Mailvelope Keymanagement