top of page
protect VPN.png

Protect VPN

2024

bg protect VPN.png

This is the story of the creation of a Protect VPN experience. It covers the design process and decisions that were made by me, as well as some other features that became a part of the experience.

UX/UI
Wireframing
Design System
Prototyping

Protect VPN

Discovery

I started by talking with users. I researched two main groups of users: those who have been using VPNs for a long time (6 months or more) and those who are new to the product (1-3 weeks). I divided users' problems into two main themes.

main screen
splash screen
select location

Prototyping

Main flow 1 - Select Location
prototype main screen
prototype select location screen
prototype choose location screen

Prototyping

Main flow 1 - Select Location
Main flow 2 - Account
prototype menu screen
prototype screen
prototype profile screen

Prototyping

Main flow 1 - Select Location

02  User problems

  • Not sure what to do next to improve online security.

  • Unclear on how to use VPN features effectively.

  • Feeling lost or unsupported in navigating VPN usage.

  • VPN recommendations don't match their online habits, making it hard to follow security measures.

user problems illustration
Mobile - dribbble  - Dark.png

Project Goals

Choose between our Basic Mode, which simplifies protection with essential security measures suitable for most users, or our Advanced Mode, offering detailed controls and customization options for enhanced security management.

Main flow 3 - Sign In / Create Account
prototype log in screen
prototype screen
prototype screen

Prototyping

Main flow 1 - Select Location

User 1 / Emily 

Emily is a user who values online privacy.

  • Asked where to find the server list.

  • Doesn't understand the "Quick Connect" button and thinks it will reset her settings.

  • Understands the basic settings but is confused by the color indicators.

  • Likes the easy-to-use interface.

User 2 / John

John is an experienced user who wants advanced security features.

  • Asked why there aren't more detailed server statistics.

  • Finds the "Advanced Settings" section too hidden.

  • Likes the range of server locations but wants more customization options.

  • Finds the connection speed satisfactory.

User 3 / Sarah

Sarah uses VPN mainly for streaming and bypassing geo-restrictions.

  • Doesn't understand why some servers are faster than others.

  • Finds the “Auto-Connect” feature confusing.

  • Understands the main functions but wants clearer guides for specific tasks.

  • Likes the recommended servers for streaming.

User 4 / Mike

Mike is a professional who needs secure connections for work.

  • Asked where to find the encryption settings.

  • Doesn't understand the "Kill Switch" feature and thinks it will disconnect him completely.

  • Likes the overall security but wants more explanations for each feature.

  • Finds the app reliable but wants faster customer support.

Key conclusions

Previous knowledge

I found that most users, even those new to VPNs, have some general knowledge about online security. When I removed certain technical details from the main view, it made them feel uncertain and like they were missing something important.

People are NOT robots

Most testers liked the basic and advanced modes I proposed. They thought it was a good way to help them achieve better online security. However, they all wanted to customize these modes, some by adjusting the security settings and others by selecting specific servers.

Looks simple = feels good

As expected, creating a simple design and prototype is not enough. Most users wanted the interface to be more visually appealing and easier to navigate.

Design

Account

Easily update your personal information and view your current IP address.

Premium

Subscribe to Premium to unlock unique features like faster connection speeds, priority customer support, and access to exclusive servers for enhanced security and performance.

Main screen

The main screen provides an overview of your connection status, quick access to essential features.

Choose location

The new server selection feature allows you to choose from various locations to optimize your connection.

Sign In

Log in to access your Protect VPN account, manage your settings, and enjoy secure browsing with your personalized VPN setup.

Using AI

I used Midjourney AI to create visual elements and ChatGPT to generate and refine content for Protect VPN. This helped me save time and costs while maintaining high quality.

background AI

01  The challenge

In today's digital world, online privacy is crucial. Protect VPN ensures a secure internet connection, shielding users from hackers and surveillance.

challenge illustration
logo Luna UI
protect VPN all screens.png

Easy settings options

Provide simple choices for users to set up their security easily.

Personalized options

Let users customize their security settings with helpful suggestions and explanations.

Feedback and adjustments

Allow users to give feedback on their security choices for a more personalized experience.

User-friendly journey

Create a step-by-step process that guides users through their security setup.

04 User Research

In my user research process, I create detailed personas and user stories to understand users' needs, goals, and challenges. This helps me identify key information and actions required to design an intuitive and effective interface.

bottom of page