Connected! The most important thing about the VPN app design – InformTFB

Connected! The most important thing about the VPN app design

Connected! The most important thing about the VPN app design

It so happened that I made VPN clients much more often than I used them for their intended purpose. In 2020, almost every month I consistently received an offer to create “fast, convenient and secure”. Some offered two servers, both of which were paid. Others gave you a choice of 50 countries and the ability to connect to 4 at once. Despite the different approach, these applications have the same patterns.

Below I tried to describe all the most important things, without focusing on details.

Privacy, permissions

Standard procedure, without which we cannot provide our services. We give it right after the Splash screen. The sooner the user understands the procedure and forgets about it, the sooner they will use the app. Therefore, we make the usual Agree at the bottom of the screen and the native Allow, which will release it to the settings and return it back.

I also heard that Privacy is accepted by the user at the time of download and all these screens are not needed. However, I haven’t seen any VPN apps without them yet.


Big and noticeable. The user came to you to click on it. Creative solutions instead of user experience will have to pay for very favorable terms of in-app purchase. The rest, is her mark in the center, ignore the accents, not to isolate and all the people brake, closes and goes into the application, which You are. It is better to make a standard circle (often) or a button (rarely) at the bottom, take into account and show the status, and allow you to cancel the connection.

The status of the connection. On the one hand, this is elementary and understandable. If connected, write “connected” and highlight the button. However, I often came across applications that display the status with an indicator on the side or an interesting illustration, the meaning of which is known only to the designer and the customer. Remember that not everyone is a power user.

One word and the opposite color. Everyone is happy, everyone understands.

Connection location. Required element. I can’t remember any VPN clients without displaying the server location. This is one of the most important information on the screen. It is often a button that pushes the user to the screen with the server selection from the list.

List of servers

We are only going to go to it now, because, by and large, this is already a different screen. We make either a regular ModalVC, which sometimes disguises itself as a view (on top of a button), or a separate ViewController (another screen). It depends on your wishes and preferences.

We structure the list of servers by connection quality, number of available megabytes, alphabet, or other convenient indicator. If there are 20+ countries, it makes sense to add a search string. You can display the connection quality for the user, but judging by the observations, this is optional. But it is very desirable to show whether you want money specifically for this server. People don’t like being surprised by an unexpected transition to the in-app purchase screen.

Speed display. Someone does it, and someone does not. For the mass user, this is more of an element of curiosity. Very rarely is this information necessary. If you think that the screen is too empty and you need something else, the speed of loading and unloading is the best solution.

The connection time. I found almost as rare information as speed information, but unlike it, I didn’t find any practical use for the timer. Neither personal experience, nor surveys, nor a dialogue with colleagues gave me the answer to the question: “Um, I’ve been connected for 3 minutes. What’s next?” It doesn’t interfere with living, but it doesn’t do any good either. Tell Me what you think about this, I’m interested.


It is a stretch to refer it to the “minimum costs” group. It is difficult to implement, and does not apply to mandatory elements. However, interactive display of servers will definitely add exclusivity to the application, and with the right approach – convenience.

In-app purchase

This screen is everywhere. There is nothing to say about him in the context of this article. Most likely, there will be a separate article dedicated exclusively to him. With more detailed statistics, research, and figures.


Settings, support, Q&A, restore purchases, and so on. Anything that will make the user’s life a little easier. It occurs in 90% of VPN applications. The remaining 10% can do without it.


Do not load the user with all possible permissions, especially those that do not relate to the VPN at all. Don’t make the subscription screen the first one, especially if you can’t close it. If you can do it without mandatory registration, do it without it. Try to explain your functions to the user with a competent design, and not with constant pop-up explanations. Consider the platform’s user experience.

If you ignore this, you risk, at best, being removed 15 seconds after launch, and at worst, getting reviews with a rating of 2.

In conclusion

This is the main thing that is important to know about the design of a VPN application. We don’t take into account the beautiful corporate identity, correct animations, and friendly UI. This is also important, and for many users it can be a defining choice. We have a Starter pack. By implementing this list, the app can be submitted to the App Store and Google Play.

Valery Radokhleb
Valery Radokhleb
Web developer, designer

Leave a Reply

Your email address will not be published. Required fields are marked *