Project Adele for ZenMate

A shield symbol inside a circle

In 2016 I helped ZenMate, a cybersecurity company from Berlin to redesign their VPN client. Internally project was dubbed “Adele”. ZenMate had apps on all the major platforms (Windows, Mac, Android, iOS and browser extensions), but they for the most part looked nothing alike.

The goal was to unify all the apps in a single style, so that the service can be positioned as a universal solution that protects all your devices. I worked in a team with Jan Martin (art-director) and Peter Krämer (second designer). Primarily I authored the design system and layouts for Android.

UI Kit

Components and subcomponents of “Adele” UI kit

Screens

Home screen in disconnect, connecting, and connected states
Home screen with the key interaction

Animation for establishing connection was prototyped in HTML in an effort to speed up the development hand-off process. It turned out to be a complete success, since deriving values from CSS animation was much easier than relying on recording of animation and trying to make sense of easing curves that I used in the prototype.

Recording of connection animation prototype
Country selection screen and various other sub-screens

Transition from homescreen to subscreens was prototyped in Principle. The rising “wave” animation accentuated the selected tab instead of opting out for universal animation for each screen.

Menu slide-out animation

Tablets got special layout with subscreen content always present when you use the app.

Tablet layout with a screen separated in halves, connection on the left, sub-screens on the right
Tablet layout

New design was met warmly by users and received praise in store reviews and in online discussions.

Photo of a previously showed UI presented on a mobile phone lying askew
Test build of the application running on a mobile phone