This is how we do it: how to create an engaging design for a VPN The importance of design in an app
August 2020 by Kaspersky
Everyone wants to use new technology without spending too much time understanding how it works. If an app helps to solve problems as quickly as possible, it will leave a lasting impression. Happy customers can become ‘brand ambassadors’, spreading positive information and feedback about their experience.
Today, consumers are jumping between dozens of digital products every day. For instance, there are between 60 and 90 apps installed on the average smartphone. There is a higher chance that users will choose and keep an app with a more appealing design rather than other market offerings with a similar – but less attractive – functionality.
The same rules apply when it comes to designing security solutions: a friendly interface and a more modern appearance can increase the user’s satisfaction and strengthen their brand loyalty. To make sure we are on the same page as consumers and explain the importance of existing features, we have recently decided to refresh our Kaspersky VPN Secure Connection offering.
A new design is a good chance to highlight the various VPN capabilities in a different way and help our users navigate the many features more efficiently. The new design also helped us solve some issues surrounding users’ awareness of the functionality available in the product.
The role of UX
The most important element when improving design is to recognise what exactly worries your users the most while dealing with the app and what elements they find most attractive. To figure out how to make a design that won’t give consumers a headache, we firstly turned to user experience (UX) research.
Our UX research included evaluating product behavior and how that reflects on user expectations, the effectiveness of meeting user needs, identifying interface problems, and searching for relevant design ideas to implement. All of these steps were carried out as part of improving the user experience. We held in-depth interviews with our existing audience along with those that have tried our competitors’ products, and potential customers.
As a result of this research, we got a better understanding of how app experiences make people feel, and what issues should be fixed to avoid distraction while using the app. For example, one positive piece of feedback was that users are more interested in examples and use cases of situations that could happen to them in real life.
First of all, we introduced an effective splash screen that sets the stage for the rest of the app, and allow users to associate themselves with the brand and the app’s functionality. When done wrong, splash screens can instantly turn a user off or cause them to uninstall the app. But the ideal splash screen is an opportunity to grab your users’ attention and capture a sense of the functionality they will discover inside the app.
We also added a special tab explaining the difference between the free and paid versions of the app. Now it is clear to the user which regional servers are available in each version, the number of devices included in the subscription, and other differences in features, all at a glance.
We have also added ’Dark Mode’ on ma?OS and Android. While the darker text on a white background is the best solution for users in terms of readability, Dark Mode (which has white text on a dark background) is better for reducing eye strain in conditions with low light. With most of the screen dark, the screen glare is reduced, thereby minimising flickering and a blue light effect. As for Android, it looks like this:
After our UX research, we stumbled on a few issues. We noticed that some users did not understand the benefits of changing their location while using the app (such as being able to access country-specific content). They had simply overlooked a significant part of the product’s functionality. To make this functionality more apparent, we have added an onboarding screen which shows users why changing the country connection is beneficial. This screen first appears when the user tries to choose a server, and it can also be brought up in the app at any time.
Furthermore, many users struggled to understand if the product was working. To solve this problem, we made the VPN status more explicit. Users now see an animation of the toggle switch when they turn the app on, after that, a bright green lamp lights up and stays lit while the connection is enabled.
Additionally, we made it easy for users to connect to the fastest possible server through a tailored icon that highlights the benefits of connecting.
Our research showed that it was a problem for many users to choose the most suitable server in terms of speed. To help them we added and highlighted a field for the ‘fastest server’. This means that they no longer have to spend time going through all the options.
In addition, the connection process has accelerated. After choosing the location (server), the connection is made automatically and users do not need to tap on the ‘enable’ button.
The updated app now also features articles to extend users’ knowledge of how to use the product, as well as showcase solutions that can be useful and show what they protect against. Examples include how not to leave a digital footprint on the internet or how to purchase flight tickets at lower prices.
The power of real people in photography
One of our most important design improvements is the use of images of real people. Brands around the world are actively choosing to use real images to enhance the emotional impact of their products. Users are more likely to respond positively to human photography as they can associate themselves with images displayed and experience emotions from engaging with them. This helps users to feel that the brand is offering something close to their own personal experiences. On top of that, real photos are crucial when it comes to products related to money, data, and security to grow trust and connection, and our product of course deals with these subjects. Companies such as Google and Apple agree with this trend, preferring people photography instead of hand-drawn illustrations. Therefore we integrated photographs in places in the app where it is necessary to convey atmosphere and emotion.
We chose pictures of people who look modern and active so that users are drawn to this product and can connect with the images they are shown. Additionally, it’s good practice to place the hero in the image directly under the brand or product in a photoshoot. This provides the benefit of connecting the person to the product. Finally, we also added animations, updated all the graphs, changed the design elements for more modern versions, and made the app more visually attractive.
What you should keep in mind
The development of our new design allowed us to draw several conclusions about app design. First of all, it is important to conduct detailed research in several countries before introducing new elements to your product. Many people have different visions of the same product, so this research allowed us to discover interesting elements, as well as uncommon handling issues, around the app.
It’s also important that the elements introduced should not overload the user with information. For this reason, the new version of our own VPN design eliminates comprehensive descriptions, instead of using short and sharp language to make the point.
When considering the latest design trends, we tried to show how exactly our solution can be used with tutorial screens inside the app, displaying the real-life situations where the VPN will be helpful. We began to use photography in places where it is necessary to convey atmosphere and emotion such as when connecting to a secure connection in a public place where there is a potentially risky Wi-Fi network.
As a result of these improvements, we have seen users embrace the new design very well and tests on the new layouts have been positive. Plus, the interface has become fresh and dynamic. The new design has also increased conversion both on iOS and Android: conversion growth on the promo screen increased by 27% on Android and by 16% on iOS.
Our advice if you’re redesigning an app is: get closer to your users, talk to them, see how they use your product, discover their insights, and ask yourself questions about their decisions. You can learn a lot from your users, so be careful. Listen, watch, and ask questions.