Project Adele for ZenMate

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 with the list of countries, search field and a sticky header section — 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

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