VyprVPN

Product Design
Project Overview
A redesign of the VyprVPN apps based on a cohesive, cross-platform design system that unifies the current experience and creates a framework for design and development on future platforms.
The Opportunity
Over the years our suite of VPN apps had become fractured across platforms, with different user experiences and feature sets. With years worth of user interviews, usability testing, and quantitative app data, we had the opportunity to rethink how VyprVPN was presented and prioritize it's functionality based on our user's needs.
We met with teams across the organization and held kickoff workshops to determine how everyone felt about the app internally, while also synthesizing years worth of user research into actionable items for the redesign. Through this process we came out some high level objectives:
Cohesive Brand Refresh: Create a more modern, expressive UI
Create a Design System: Collaborate across teams to document design decisions and apply a common design language
A Shared Experience Across Platforms: Create an adaptive app with common UI across platforms while respecting each platforms fundamental guidelines
Kickoff
With these higher level deliverables defined we dug further into the user research and identified a few key issues with the previous version of the apps. We turned these into How Might We questions to iterate on possible solutions.
How might we prioritize UI in a more concise and clear way? Get rid of elements like the “light board” and “speed graph” that users didn’t find useful
How might we make changing server locations easier? In usability testing, people often had trouble changing their server to a specific location
How might we make important functionality more discoverable yet unobtrusive? Find a place for useful features that isn’t slapped on the main UI or buried in settings
How might we visualize making a VPN connection in an impactful way? In a lot of ways a VPN is a fancy on/off switch, is there a way we can visualize our global servers and the process of making a connection?
How Might We
After a few rounds of iteration and workshopping with stakeholders, we arrived at what we felt was an effective solution that addressed our initial objectives.

We took the light to dark UI change from the previous version of the mobile apps and applied it to the connection state for all the apps. In usability testing and user interviews people always had a strong, positive reaction to the entire UI changing as the VPN connected. We also took the opportunity to introduce a more modern, evocative color palette on the connected screen that carried over to the rest of the branding of VyprVPN moving forward.

To alleviate the friction some users were having with changing server location we took the functionality out from behind an unlabelled icon and placed an easily tappable row near the connect/disconnect button. We also created a bottom navigation that more clearly highlighted both server selection and some of the more useful connection features.

As we were working on the wireframes and UI, we made simple tap through prototypes and began getting user feedback as early as possible. One thing that came out of this was renaming "Settings" to "Customize". Early on users would pass over "Settings" in the bottom nav when we'd ask them to explore the app. We experimented with different verbiage and landed on "Customize", which was much more effective at conveying the intent of the screen and encouraging users to explore.

Finally, we came up with the idea of implementing a 3d globe to show both our server locations and animate to the chosen server as the VPN connected. I created a rough video to embed in the prototype to get users reaction to this since it was such an important interaction. The responses were great, people had a visceral reaction to both the globe and the color transition as the app went from the inactive, disconnected state to the vivid connected state.
The Solution
We knew at the outset of the project that we wanted to create a clear pattern library and larger design system to document the decisions we were making along the way. This allowed us to work closely with the Dev teams on a pattern based process of building the apps. The cross platform teams would work on the same patterns at the same time. This allowed us to ensure that each pattern behaved and appeared exactly as we wanted and gave developers the chance to ask questions and provide feedback together as they worked. It also made QAing the app much more effective since the screens were all built from these robust, well documented patterns.
A Design System