Keepsafe VPN is used to browse securely on public networks. I worked with an engineering team based in Berlin, a design manager and our marketing director.

  • Skills: UX, UI, Mobile Design, User Research
  • Tools: Sketch, Zeplin, After Effects
**User research & testing**

Iteration on VPN was heavily influenced by rounds of qualitative research. Both usertesting.com and user interviews were done.

**An old version**

previous vpn main screen

Generally people were confused about what a "trusted" vs "untrusted" network was. Even seeing the word "secured" people remained confused about what that meant and whether or not their VPN was "on". Unless prompted, people were not motivated to press the network button.

**Project Goals**

Create an interface accessible for a wide population of users. VPN's can be interesting in particular because they can be appealing for both very technical and very non-technical people.

Connection states

It's critical to give the user as much understanding of the state of their connection as possible in order to get the most out of their VPN.

on states
service request home screen
The rotating power button was made in After Effects. Using a plugin called Bodymovin to export JSON files which were given to the engineers who used Lottie to render.

Stay connected

We encouraged users to turn on auto-connect because it can be easy to forget to return to one's VPN.

auto connect