2017-2018
IVPN is a company that operates in the realm of online privacy and security. It offers some of the most secure VPN services currently available on the market for personal privacy.
“IVPN excels at trust and transparency, the most important factors when you’re choosing a virtual private network. We found it to be worth the price for its combination of trust, security, and usability”.
How I got there
I was invited to join the IVPN team in August 2017 for the role of Head of Product Design. The company needed a person who would be responsible for all the design processes. I worked on product, marketing, and visual design, and conducted a series of business experiments. At IVPN, we believe that trust is earned through meaningful actions, and not controlled through empty words. We help users share information with those they trust and protect them from everyone else. We are struggling with the big data overlords who abuse trust to fuel their insatiable self-interest. Basically, IVPN aims to fight with ISPs, who sell the data about people, their lives on the Internet and their behaviors.
"How can we help people who are constantly concerned about their privacy and personal security on the Internet, to communicate truthfully and amicably?"
Highlighted objectives
01
High quality product design for people who care about their anonymity.
02
Convince users that if they use a VPN, they become invisible to the ISP.
03
Build an ecosystem of IVPN applications on all platforms.
IVPN is the company with the greatest amount of restrictions among which I have ever worked. Since IVPN is a privacy company, we did not have the opportunity to collect information about our users altogether. The access to analytics was extremely limited, because the rules dictated us to use software, which is installed locally on our servers for analytics. That is why instead of fully-featured and well-known analytics services, I had to use Piwik. To understand our users, I had to study a lot of personal security information. All design decisions had to be made, with respect to the interests of those who worried about their privacy.
My role
Ideation, validation, research
I was constantly involved in the generation of ideas and conducting market research. For each group of users, companies can create a separate application, but my focus was on the Security Gurus and Security Professionals group — a small group of influencers who could publicly talk about IVPN if it met their needs.
User Interface & information architecture
My main focus was on creating a cross-platform application that worked on the basis of operating system guidelines. At the same time, I used branded elements from the IVPN guidelines. The applications should have been fairly simple for each operating system, regardless of its configurability. For each action, UX Flow was developed separately.
Interaction design
In single-action applications, animation plays a significant role and affects their appeal. In 2018, people choose the application by its visual attractiveness. This does not work for Security Gurus and Security Professionals, but covers all other user groups. Animation is crucial for those who use the application for the first time.
Visual design
I thoroughly worked to create a "good company to fight evil." In our IVPN Manifesto, it is written as follows: “We help people share information with those they trust and protect it from those they do not.”.
I created visual design and illustrations on the basis of this mission.
I originally came to IVPN to adjust all design processes and build a product that is attractive to users.
Insights
Speed
Stability
Education
VPN for all the activities
Trustworthy
OS choice
Security forums
People need to turn on the app and forget about it.
A huge list of settings for security gurus is inside advanced settings.
Most people don’t know how to use a VPN and that they really need it.
Low connection speed can be compensated with complete safety.
Discovery
I had the opportunity to work following a standardized process. The list of competitors was provided to me by the company, and we collected the list of features for implementation with the CTO. Of these, we chose the most basic.
Information architecture
I created a mindmap in which I displayed all the possible functions of the product, from the point of entry to the point of retention. This is a Single-Action App, the redesign of an existing version and a significant improvement in UX.
Concepts ideation
In order to quickly iterate and approve everything with the management team, we quickly sketched and validated it. As soon as the sketch was asserted, the wireframes were drawn, which were folded into a prototype.
I developed an application in which the most important action is to press a button. Everything else should not be embarrassing and distracting, so the main idea was concealing everything superfluous outside the main window.
UI design for Mac
I went contrary to the Data-Driven decision making and began developing a Mac application as a reference. Looking at the statistics, only 25% of all connections were from Mac, 50% were on Windows, and the remaining 25% were distributed between Android and iOS. The CEO agreed with my decision, because the application for Mac could be implemented on the front end, the entire interior was completed. In addition, a radical change should not have entailed many consequences for all users.
01
High quality product design for people who care about their anonymity.
02
Convince users that if they use a VPN, they become invisible to the ISP.
03
Build an ecosystem of IVPN applications on all platforms.
Interaction Design for Mac
I paid a lot of attention to micro interactions inside the application. These small details play a big role in the emotions of users. IVPN is not what people used before.
Flinto is the best application for designing micro-interactions. Neither Framer, Kite Compositor, nor Principle offered the same level of flexibility and simplicity.
The generated graphics of easing functions were transferred to developers in the form of formulas.
UI design for Android
In Android, I followed the principles of Material Design and UI from macOS was completely redesigned into the layering of the Android interface.
I paid a lot of attention to micro interactions inside the application. These small details play a big role in the emotions of users. IVPN is not what people used before.
Windows app
In terms of UX design, Windows presents a more complex platform for developing applications. Microsoft developed extremely few guidelines for developing applications and I had to collect my own instructions from references and screenshots of other applications recognized by Microsoft as flagship.
Windows UI is extremely heterogeneous, the development of High-Fidelity designs on this platform is not specified. In order to understand it, I needed to conduct a survey among all the programs of this kind and single-action applications.
Website analisys
01
Content is king, but badly converting
Knowledgebase, Setup, Privacy Guides, PPTP is 40% of the overall traffic. This means that the first impression of every second user who visits IVPN is made on those pages and shows their significance in a successful conversion.
02
Homepage
The homepage is the most visited single page, taking in 20% of the overall traffic. With of people going from the homepage to the pricing page, half of the people coming to the homepage do not get into the funnel.
03
Pricing page
Pricing is a goal for our visitors. According to the statistics, the biggest (22%) part of our visitors are trying to know pricing right after visiting the Homepage.
04
People know where they are
‘How does it work’ button navigates to another page which says “How VPN works”. Seems that everybody who visits IVPN site knows how VPN works. This button accentuates on the first slide but it doesn’t provide any value for the user.
05
Sign up analysis
There is no Download button or Sign Up button. IVPN says about downloading or starting a free trial only at the end of the homepage. According to Scroll Map, only quarter of our visitors are reaching the form in the end.
06
Product
Product page seems to be not popular at all among our users. The word “Product” seems to be unattractive because it does not say about product features, featuring in the pages below the fold.
Web design
The task was to develop 6 different versions of the site to make it be correctly displayed on all possible resolutions.
I also worked on certain pages as a Visual Designer, inheriting the style that the contract designer chose.
The structure of each page was developed using the basis of the advanced Mindmap, taking into account the experience of the previous pages and the analytics. The traffic on each page was driven separately by Head of Growth when necessary. My task was to create a holistic website.
Email marketing
I was to develop a marketing strategy for sending emails and follow-ups, while more than 50 emails from related SaaS areas were analyzed as references.
I did the most basic work in this direction, which was then taken away by the Head of Growth. He joined me and we began to work as a team, creating dozens of letters for different situations.
IVPN 3
In parallel with the development of the second version of the application, we decided to create a series of concepts and present what the third version might look like. The version was supposed to be implemented in 2018.
Taking into account the results of analysis and user surveys (knowledge of what they want), we collected a document called IVPN V3, in which all the key principles of the new application were described.
Ideation stage
We reviewed more than 40 variations of the main window design. The task was to build an application from the already known functionality that would be convenient for all types of users. But the main idea was to create the feeling that the application controls every bit of information and passes it through the VPN server. Several options for ideas are listed below.
Fullscreen map, sidebar and application bar
The initial idea is in showing the map as a general interaction element on the screen. All the interactions can be done by both sides of the screen. All the menu is located in the left side. All the controls are spreaded around the map and don't distract the user. In this case we can add additional controls to the map when the new features arrives without painful layout changes.
Sidebar and action area + statistics
As promoting the easiest way to connect to the server, this way of showing the content is the most interesting one. The functional left side gives you an opportunity to extend the default feature set to endless amount. The right side is the action one, where you can turn on or off your connection, see your connection status and see your stats.
Final proposal
In this concrete case, I suggested to abandon the idea of the map altogether and concentrate on the main indicators of using a VPN connection. In the connected state, the application should show all statuses: WebRTC, DNS Leaks, OpenVPN status and Firewall status. At the stage of UI, this concept was overgrown with additional ideas and eventually simplified.
IVPN 3 UI Design
In the UI, we approached the design according to the principles of atomic design, when the interface is assembled from a set of already created UI elements, only by acquiring functionality.
For example, the top bar contains a button for settings, profile, and connection status.
The left sidebar interacts with the connection, and its lower part allows you to switch between different functional units of the right side.
The right part is the object of maximum interaction - on the Dashboard we show statistics, on Private Emails we allow generating Emails.
Split Tunneling allows you to turn off or turn on VPN if you connect to a specific IP address or if you are using an application (for example, Adobe Photoshop).
User feedback & Outcome
Jon Dugan, Google Play
Michael Ross, Google Play
Jared Potter, Google Play
Jon Ward, Google Play
Joel RGBaxter, Google Play
The best VPN you can buy
William M., G2.com
Wirecutter and The New York Times Company has identified IVPN as the best VPN client among all competitors in the market. The number of VPN client users has increased from 9500 to 15,500.
Thom Shaw, Head of Growth, IVPN
Fedir Nepyivoda, Head of Software Development, IVPN
