Write E-Mails securely

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.

Reimagining the brand

To be honest: as great as the technology of the product is, the brand was not. It literally „looked“ open-source and not like something a regular user wants to consume, because it does not live up to the known standards.

The evolved brand is a combination of its origin (a seal), its name (m for Mailvelope) and its technology (@ for e-Mail). Like this we respect the history of the brand and play with metaphors that everybody directly understands. On top of it, it is clear and recognizable also in small sizes.

We combined it with the Cera Pro and the Cera Round Pro from TypeMates, a very friendly and open type family. It is used throughout the interface and gives the feeling of a brand you can trust.

For colors we chose a cherry red to emphasize on the metaphor of the seal. It is paired with petrol, a color from the other end of the spectrum which lets the red become flashy and modern and completes the evolution of the brand.

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.

Key Screens – E-Mail Window

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.

Key Screens – Decryption

In your webmail interface Mailvelope replaces the unreadable encrypted attachment into human readable text on input of your key password.

Key Screens – 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.

Key Screens – Landing Page

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.