ProtonVPN
Designing Privacy for Secure Internet Access
After the success of ProtonMail, ProtonVPN was created to extend Proton's mission of online privacy and security to internet browsing. ProtonVPN provides a secure, encrypted connection to the internet, protecting users from data tracking, censorship, and surveillance.
Project Overview
After establishing ProtonMail's initial design across web and mobile platforms, I took on ProtonVPN as my next major project in 2016. Given significant creative freedom with its appearance and feature set, ProtonVPN became my opportunity to evolve Proton's design language. I aimed to create an interface that would make VPN technology accessible while maintaining a sophisticated "tech" aesthetic that resonated with our privacy-conscious users.
The project allowed me to implement innovative features like an interactive map view, real-time connection graphs, and a unique profile system for saving favorite connections - all while maintaining a consistent experience across platforms.
- Created a self-explanatory country list interface that maintained consistency across all platforms and devices.
- Designed an innovative connection graph and profile system that enhanced the user experience.
- Established a new design direction that later influenced the entire Proton suite.
- Received positive reviews for the interface's balance of accessibility and technical sophistication.
Goals & Challenges
VPN interfaces have traditionally been intimidating, filled with technical jargon and complex settings. With ProtonVPN, I saw an opportunity to break this pattern. The goal was ambitious yet clear: create a VPN interface that anyone could use, while preserving the advanced features that tech-savvy users expect.
Unlike the rushed development of ProtonMail's first versions, this project gave me the space to tackle fundamental UX challenges in VPN design. How could we make server selection intuitive? How might we visualize connection status in a meaningful way? These questions drove our innovation in features like the interactive map view and connection graphs.
Key goals
- Make VPN technology accessible and easy to use, even for users with no technical background.
- Communicate the benefits of privacy and security without overwhelming users with technical jargon.
- Ensure consistent branding and design alignment with the Proton ecosystem.
- Create a user-friendly interface that is easy to navigate and understand.
Challenges
- VPN functionality involves complex workflows (e.g., server selection, protocol configuration) that needed to be simplified for users.
- Balancing a minimal interface with the advanced features expected by power users.
- Designing for performance in regions with slow or unstable internet connections.
- Ensuring the design aligned with technical and business requirements.
Launch Website
"ProtonVPN has one of the best user interfaces around, whether it be on Windows 10, iOS or Android. It has a sleek, dark interface that runs smoothly with a simple "Quick Connect" button to immediately connect to the fastest country and server."
"Overall, I liked how easy the desktop interface is with the use of ProtonVPN. It was intuitive and not cluttered so even VPN newbies could navigate it. And while Proton doesn't host as many servers as NordVPN or SurfShark, what it makes up for in quantity is quality."
Process
The development of ProtonVPN marked a significant shift in our design approach. Free from the time pressures that characterized ProtonMail's initial launch, we could focus on thoughtful innovation. The cornerstone of our design was the country list interface - a seemingly simple element that required careful consideration to work seamlessly across web, desktop, and mobile platforms.
Building on this foundation, we layered in sophisticated features: an interactive map for visual server selection, real-time graphs for connection monitoring, and a profile system for saving preferred configurations. Each addition was carefully crafted to enhance functionality without compromising the interface's clarity.
1. Design Evolution:
- Used ProtonVPN as an opportunity to evolve Proton's design language beyond the initial ProtonMail aesthetic.
- Created a distinctive "tech" vibe that resonated with our privacy-conscious user base.
2. Feature Innovation:
- Developed an intuitive country list interface that worked consistently across all platforms.
- Integrated interactive maps and real-time connection data visualizations.
- Created a profile system for saving and quickly accessing favorite connections.
3. Collaboration:
- Worked closely with developers to ensure smooth animations, real-time server status updates, and low-latency user interactions.
- Partnered with marketing to design website visuals and educational content that highlighted ProtonVPN's unique selling points.
4. Testing and Iteration:
- Conducted usability tests to refine server selection workflows and improve user understanding of connection statuses.
- Collected feedback from beta testers in censorship-heavy regions to optimize for challenging conditions.
5. Collaboration at All Levels:
- Partnered with the C-level team to set strategic design goals aligned with the company's vision.
- Worked with product owners and managers to define and execute product roadmaps, ensuring the design aligned with technical and business requirements.
"Because ProtonVPN puts such a heavy emphasis on user privacy and technological excellence, you might expect ProtonVPN would be an ugly, unusable mess. That's not the case. ProtonVPN has a slick and well-designed app that's easy to use and doesn't skimp on features."
"To put it straight, ProtonVPN brings everything to make your experience great on an Android TV with ironclad security and all-around privacy protection."
Outcomes
The success of ProtonVPN's design reverberated throughout Proton's ecosystem. What started as a fresh approach to VPN interfaces became the catalyst for a broader design evolution. The new design language we established - with its balance of sophistication and accessibility - set new standards that we later applied to refresh ProtonMail and influence subsequent products.
Industry recognition was swift and positive. Reviews consistently praised the interface's clarity and professional polish, validating our vision of making privacy technology more approachable. The "tech" aesthetic we crafted resonated strongly with users, helping establish ProtonVPN as a leading privacy solution.
User Impact
- Delivered a product that empowered millions of users to browse securely and access the internet freely, even in heavily censored regions.
- Simplified server selection and streamlined workflows significantly reduced the learning curve for new users.
Business Growth
- ProtonVPN became one of the most trusted VPN services, contributing to the overall growth of the Proton ecosystem.
- The product's success reinforced Proton's reputation as a leader in privacy-first technology.
Recognition
- Users and stakeholders praised the design for its clarity and simplicity, which stood out in a crowded market of overly complex VPN interfaces.
- Positive feedback highlighted the balance of functionality for both casual users and advanced features for power users.
First version for SmartTV
Reflection
ProtonVPN stands as a turning point in both my career and Proton's design evolution. While ProtonMail's initial design was born from necessity and speed, ProtonVPN gave me the creative freedom to truly innovate. This project proved that with adequate time and thoughtful consideration, we could create security tools that are both powerful and accessible.
The immediate positive response to our "tech-sophisticated yet user-friendly" approach validated our design decisions. More importantly, it demonstrated that privacy tools don't need to sacrifice usability for security - a principle that continues to guide Proton's product development today.
Learnings:
- Designing for technical tools like VPNs requires simplifying complexity without sacrificing functionality or security.
- Cross-platform consistency is vital for maintaining brand trust and user familiarity across devices.
Proud Moments:
- Seeing ProtonVPN adopted by users in regions where internet freedom is restricted, making a tangible difference in their ability to access information.
- Creating a user experience that seamlessly integrated advanced privacy features while remaining approachable.
Growth:
- This project strengthened my ability to design for highly technical products and to collaborate with engineering teams on performance-critical challenges.
- Proving that security doesn't have to sacrifice user experience.
- Building a design team that could handle the rapid growth of Proton's product suite.
