1. BACKGROUND

The VPN Connection is an increasingly popular service among personal use and business use. The global VPN market size is projected to reach USD 3749.5 million by 2027 from USD 1772.2 in 2020 at a Compound Annual Growth Rate of 11.3% during 2021-2027 (source). That was why the client contacted our team to design and develop a VPN application amid the dynamic developing VPN market.

 

Goal:

Design and develop a mobile and desktop app called “ViteVPN” with functions that satisfy the targeted user segment.

Who?

The app is perfect for both personal use and business use who only need an easy-to-use designed app with a high-security connection.

How?

By researching current most popular applications, including some VPN apps, and by applying user-centered design methodology, we expected to produce beautiful and loved applications.

Duration

6 weeks

October 2021 –  November 2021

Role

UI/UX Design member

 

Tools

Sketch, Illustrator, Miro, Xmind

 

2. COMPETITOR RESEARCH AND FUNCTION LIST

To begin the project, we conducted an interview with the client and together we filled out the project brief which will be used for further research. Based on the project brief, we identified 3 among many competitors in the VPN app market which are ExpressVPN, NordVPN, and TikVPN. 

The first step was to download the three apps from Google Play or App Store. For each application, I evaluated its usability, visual design, and most importantly, the utility to users.

NordVPN TikVPN ExpressVPN

Strengths

  • Minimal UI design with nice fonts and colors.
  • Cover most of the basic functions of a VPN app.

Strengths

Simple home screen with only some key touch-points which is easy to use for new users.

Strengths

  • Clean and consistent UI design with nice fonts and colors and gives out a feeling of brand identity.
  • Only covers the most basic functions that do not confuse users.
  • Fast connect and connection log available on the home screen.

Weaknesses

The home screen with the interactive world map is quite cool at first but becomes redundant after several times of use.

Weaknesses

The main menu is stacked with a long list of sections that should be reorganized.

Weaknesses

Premium account price is quite high for personal use compared to other apps.

Besides strengths and weaknesses, exploring these apps gave us a sense of what functions most of the current VPN apps are offering and what are their selling points.

Based on the popularity of each function and its requirements for users’ knowledge, I classified the list into 3 function levels:

  • Blue ones: the most basic functions that most VPN apps offer.
  • Yellow ones: the second most popular functions and they may require a bit of user’s knowledge. VPN Protocols is an example as it is a must-have function while not all users have an understanding of it.
  • Red ones: includes the least common functions like the Private Browser and the ones that require users’ advanced VPN knowledge to use like Kill Switch.

Building red functions for the new app would be a heavy-lifting job while making the app way more complex and thus harder for maintenance. Therefore, aiming at the blue and yellow functions at the beginning is a good choice to cover the majority of users’ needs while keeping the app simple, smooth functioning and so user-friendly.

Similarly, this new app will operate mainly on Mac, IOS, Windows, and Android as those are the most popular platform being used.

However, that function list is not a fixed one. When the application’s launched for a while, more user research will be conducted to decide what function or platform should be added to meet the fast-changing users’ demands.

The bottom line

Despite each app showing a different function set and interface design, learning them still helped us find out the common core functions, some good ideas of how to structure our app, and then initiate our own design system.

3. USER INTERVIEW

In order to better understand the users, I interviewed some of the professionals whose job or their daily activities require a VPN connection.

Interview Script:

  1. Are you a student, professional, or both? what are your daily routines and responsibilities?
  2. How do you find a VPN app to try? what are some qualities of a good VPN app?
  3. On what device do you use VPN? where do you use it?
  4. Tell me about some of the VPN apps you have used and why you choose the current one over the past ones.
  5. What features of the current one that you think need improvements?
  6. What motivates you to keep using a VPN application?
  7. If you were a VPN app designer, what feature you would love to add to the app?

Learnings

The interviews helped me identify several common themes that ran through most of the users:

  • VPN connection speed is of great importance to use other applications and surfing websites.
  • VPN connection log should be visually available to check the connection history.
  • Feel special when VPN can help access great resources with great identity protection.

4. USER PERSONA

Armed with insight into users’ needs and goals, I create a user persona – Joe Cuong to empathize with the user.

5. USER JOURNEY

Before I could get started designing for Joe, I needed to make a visual presentation of how he feels when using “ViteVPN”. Identifying his low points and high points helped justify my later design decisions.

6. USER FLOW

With user persona and journey come to life, it’s time to map out how Joe completes key tasks with ViteVPN.

Flow 1: Find a VPN location to connect & experience.

Entry Point

Joe launches ViteVPN.

Success Criteria

Joe signed in successfully and find a VPN location to connect.

Flow 2: Mark a VPN location as favorite for later use.

Entry Point

Joe launches ViteVPN.

Success Criteria

Joe signed in successfully, went to a VPN location, and marked it as favorite.

7. SITEMAP

To visualize the information architecture of ViteVPN I created a Sitemap. Besides, this sitemap was also organized in a way so that the development team could use it to estimate their work time for each flow.

8. LOW AND MID-FIDELITY WIREFRAMES

With the Information Architecture and a mood board of app inspiration collected by me, I started to sketch and make mid-fidelity wireframes to get feedback from other stakeholders. This step would help me feel more confident before applying any UI design elements and also reduce changes in the future.

Sketches

After sketching with pencil and paper, I used Miro to make a mid-fidelity version with most of the key screens.

9. COLORS & TYPOGRAPHY

Now I had most of the screens ready, it was time to define a design language to make the app look not only consistent from screen to screen but also vibrant and thus user-friendly.

Colors

Besides brand colors, neutral colors will be used wisely on texts and backgrounds to guarantee contrast for accessibility.

Typography

The font family that was chosen is Poppins. I made a hierarchy of fonts based on font sizes/line-heights, font weights, character spacing so that we always had good choices for every context.

10. FINALIZED SCREENS

After many iterations and tests, I came up with the finalized screens using the defined design elements.

Walk-through screen, Sign In screen, Home-disconnected screen, Home-connected screen.

VPN Locations, VPN Location – country swipe left screen, Menu screen, Settings screen.

Split Tunneling screen, Connection Log screen, Account screen, Share screen.

11. LEARNINGS

Working on this project brought to me a deep understanding of a VPN Service, what functions should be included, who are its clients, the technologies behind it, etc. Every project I work on helps me understand a specific area on an amazingly deep level. That is the reason why I enjoy working as a UI UX designer. 

Besides, through this ViteVPN project particularly, I also learned that before completing any design deliverable, I should organize it the way it benefits other stakeholders the most like the way I constructed the Sitemap and the final UI designs so that they are easy for our developers to handle.

Other Projects

Calgary Transit (YYC Transit) is a popular mobile application among Calgarians. This project's goal is to discover users' pain points and improve user experience.

I was so lucky to work as a member of the WestJet digital design team and what I have learned there definitely helps build a strong foundation for my design career.

The VPN Connection is an increasingly popular service among personal use and business use.

Vlam is a social media application that focuses on travelling & photography.

Witbooster functions as a community where its users can follow each other’s TikTok profiles. That means it is free for users to earn more TikTok followers.

Connect with me

Get in touch for opportunities or just to say hi! 👋