Created with Sketch.
VyprVPN
  • #project
  • #golden frog

VyprVPN—Golden Frog’s flagship VPN product—was at a crossroads when I took over UX design at the company. The service had built a following among IT and security professionals, but relied primarily on user’s willingness to manually configure their systems in order to take advantage of the exceptionally fast, secure backend Golden Frog had constructed. My team, with me as it’s lead, was challenged to design a product that would allow a new generation of security-conscious but more casual users to access Golden Frog’s services. We were given the time and budget to simultaneously redesign VyprVPN’s Android and Desktop applications from the ground up, while also launching the product for the first time on iOS. I was responsible, with assistance from my small design team, for all aspects of UX and UI design from initial user research, to ideating overall design concepts and visual vocabulary, through to wireframing, user testing, visual design, presenting to executive stakeholders, and development handoff.

It was immediately apparent that a new market would bring a host of challenges related to design and usability, which I first chose to investigate via an extended period of user research. Device demographics and customer interviews indicated that potential iOS users were less interested in the kind of power user functionality Golden Frog had traditionally focused on, than in having software that was streamlined and easy to use at-a-glance. This aligned fortuitously with the reality that any iOS version of VyprVPN would be hamstrung with regard to any connection metrics, (as used in popular-on-android speed graph), due to platform level engineering restrictions. With that in mind, we decided that while both apps would use the same visual vocabulary and mental model, we would design a more feature-rich version for Android, and a more streamlined version for iOS.

1 connect 2 releasetoconnect 3 connecting 4 connected 5 dragserverselect 6 selectserver

Moving forward, our goals were:

  • To encourage adoption by promoting simplicity and ease of use
  • Simplify the the app on ALL platforms to revolve around a single primary interaction, which should be simple and highly discoverable.
  • Educate users about their privacy from moment to moment on the internet in an accessible way.
  • Communicate VyprVPN status at-a-glance
  • Successive iterations of user testing and design further refined both the UX and UI to better reflect the at-a-glance way in which people used VyprVPN.

Customer research on existing VyprVPN products indicated that users perceived the software as a simple “protection switch” for enabling or disabling connection security. Early ideation and user testing suggested that we extend this metaphor directly to the interface for iOS via a large switch that represented the connection’s status, and was it’s single point of control. This on-off state was also the basis for the visual design extended to other platforms, but we interpreted the UX metaphor less literally for other platforms. Future refinement during my time at Golden Frog would eventually phase out the sliding switch altogether, opting for a clearer on-off color contrast that relied less heavily on changing the positions of key controls.

1 vypr ios visualdesign 2 vypr ios visualdesign 3 vypr ios visualdesign 4 vypr ios visualdesign 5 vypr ios visualdesign 6 vypr ios visualdesign 1 vypr andoid visualdesign 2 vypr andoid visualdesign 3 vypr andoid visualdesign 4 vypr andoid visualdesign 5 vypr andoid visualdesign 6 vypr andoid visualdesign 7 vypr andoid visualdesign 8 vypr andoid visualdesign 9 vypr andoid visualdesign

Development of the slimmed-down iOS version proceeded in tandem with a more feature rich Android version. Golden Frog has kept this separation, with minimal changes to design beyond regular maintenance, through to current versions of both apps.

1 vypr mac visualdesign 2 vypr mac visualdesign 3 vypr win visualdesign

Redesigned versions of the MacOS and Windows apps were aligned with the new design mentality of putting the state of on-off connectivity at the center of the app’s focus. Stats and additional information for power users were available but were placed second in hierarchy.

The current release of VyprVPN continues to reflect the the work originally done by me and my team, with minimal changes to design beyond regular maintenance. Versions for iOS, Android, Mac, Windows, routers running the Tomato Framework, Blackphone, Android TV, QNAP, and Anonabox. These have proved effective in taking Golden Frog to a broader consumer audience, with favorable reviews in Lifehacker, The New York Times, The Verge, Gizmodo, and Ars Technica.

VyprVpn Product Page