Project Adele for ZenMate
![A shield symbol inside a circle](images/icon-400.webp)
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, buttons, lists, icons, main app circular button with a shield symbol in it](images/components-400.webp)
![Shapes, icons and parts of more complicated UI](images/subcomponents-400.webp)
Screens
![Home screen in disconnect, connecting, and connected states](images/home-400.webp)
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.
![Country selection screen with the list of countries, search field and a sticky header section](images/country-400.webp)
![Settings, stats, profile, and notifications screens](images/subscreens-400.webp)
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.
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](images/tablet-400.webp)
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](images/photo-400.webp)