Redesigning User Interaction with NordVPN App
Redesigning User Interaction with NordVPN App
University of Cincinnati HCI Project Team
Lonell Childred, Kristin Van Deusen, Chris Hammond, Pat Dills
Member Contributions:
Lonell Childred 25%
Introduction, Background and Research, Literature Review, Discussion and Conclusion, References
Kristin Van Deusen 25%
User Requirements, Description of Tasks, Description of Users, Survey Data Gathering, Survey Responses and Results
Chris Hammond 25%
Evaluation, Discussion and Conclusion, Appendix II
Pat Dills 25%
User Interface & User Experience Design, Design Methodology and User Experience Design Mapping, User Low Fidelity Prototype overview and User feedback, High Fidelity Prototype creation, Discussion and Conclusion, Appendix I
Final Project
Redesigning User Interaction with NordVPN App
University of Cincinnati HCI Project Team
Lonell Childred, Kristin Van Deusen, Chris Hammond, Pat Dills
Introduction:
Redesigning User Interaction with NordVPN App:
Qualitatively we would like to increase the user’s ease of reaching out to customer service should an issue or question arise there in reducing anxiety and increasing overall satisfaction. Quantitatively we would like to decrease the amount of user error generated by aimless button presses or incorrect button presses. Our application is a redesign on the current NordVPN Update application. The target users are currently subscribed end-users of the NordVPN Update application. The interface redesign needs to do a better job at providing clearer information to the end-user during the update process. The interface should make transitions to external applications necessary for completion more streamlined and obvious by placing clear instructional alerts for the end users. More information can be provided to assist the user throughout the update process in an easily seen and accessed manner. We propose to evaluate the redesign for NordVPN Update application by using the tool Prototype through the InvisionApp website https://login.invisionapp.com/
Platform:
NordVPN Update Application for Desktop PC
Prototyping Development:
Done via InvisionApp and the Prototype tool with hotspot creation for live embedding.
Testing:
As an HCI analysis and redesign we would perform the following on the end-users:
- needs assessment (what enhancements are needed including background research/theoretical foundations)
- low fidelity prototyping (pngs gathered as screens from original app, edited via pencil and scanned into this document appendix)
- formative evaluations (design and methods evaluations)
- high fidelity prototyping (Created through Prototype via InvisionApp by assembling group members edited Pngs from NordVPN Update application)
- a summative evaluation (final evaluation in summary on what the team did, how the design was made and if we accomplished the objectives)
Prototyping Implementation:
Through user testing on high-fidelity prototypes at Prototype tool through InvisionApp. https://invis.io/BJ107N4ISKHU/
Summative Design Evaluation:
Our summary on the design rationale, needs assessment of users, accomplishment of objectives and significance on the population the redesign was meant to address.
Background:
- Previous approaches
Virtual Private Networks, better known as VPNs initially started as a way for high level corporate employees and governmental officials to securely and remotely access data from the corporate office network while traveling, from home and even from outside of the US.
As access to the internet started to grow in the early 2000s, the need and growth of commercial VPNs were no longer limited to executives in the C-Suite, IT network engineers, and programmers. Wikileaks and Edward Snowden showed the world how much our government, known as ‘Big Brother’, was gathering metadata on the average internet user. Censorship and governmental spying increased the need for privacy. So, for the first time in modern history, many average internet users could see, and perhaps verify, just how intrusive the government and other 3rd parties were interested in our data. As a result, the need for privacy became a top-level priority. For example, China is still today known for censoring the internet ever since 1997 as well as Russia, the Middle East, and other southeast Asian countries. Using VPNs made it easy to get around the censorship, government spying and other privacy issues. VPNs are also used for bypassing steaming platform blocks, booking travel arrangements at better prices, and securing vulnerable or open Wi-Fi such as found in Airports, coffee shops and other public locations.
VPN timelines history is as follows from 1995 to Present:
1995 PPTP & IPSec
PPTP (Point-to-Point Tunneling Protocol)
IPSec (Internet Protocol Security)
1998 – IKE
2000 – L2TP
2001 – OpenVPN
2005 – IKEv2
2008 – SSTP
2012 – NordVPN is established
2014 – SoftEther & Chameleon
2019 – WireGuard
• Description of the general application domain
The application domain is the NordVPN desktop software. We will test the redesigned software in the domain to verify the improved functionality and also get user feedback in both Windows and Mac.
- What else has been done
Recent developments in VPN technology include the following:
Split Tunneling – Split tunneling allows the routing of traffic through a specific VPN tunnel. This allows the ability to bypass foreign and local control over content.
Kill Switch – This will turn off the internet connection if the VPN connection goes down and reactivate it when the VPN is alive again. This ensures a secure connection.
Obfuscation – This is a feature that masks the VPN’s own data packets.
Enhanced Encryption – This can use RSA, AES and other encryption algorithms with bigger encryption keys like 128-256bit.
Double VPN/VPN Chains – Two VPNs can be used simultaneously and NordVPN offers this service.
DNS Leak Protection – This is an issue that can allow your local Internet Service Provider (ISP) to discover your requests from your Domain Name Server (DNS) and actually discover what website one may be visiting.
Tor Over VPN – This is an enhanced feature that allows anonymous communications thru the Tor network uptop or overlaid with VPN.
- What the context of thinking and making things is in which your work is situated.
The context is re-imagining the NordVPN desktop application to have a better Human Computer Interaction (HCI) with the end user. A better HCI experience will facilitate more people using the NordVPN services, which will in return improve feedback and allow for continuous development of the application.
- Literature review.
Features of UX Design VPN Applications
VPN is not only an important application, but it’s UX design is extremely important as well. It is clear that not all VPN service providers care about their users. Therefore it is essential that the UX design doesn’t cause problems for the end user. User feedback can provide a lot of information that must be analyzed from the end user to improve the UX design, so the design is more of a liaison between the software designer and the end user. - Network Design Scenario #3: Remote Access VPN Design
Another consideration in designing VPN with respect to the UI/UX is the use of 2 factor authentication or 2FA. After logging into the VPN, it can be a good security practice to allow authentication tokens from SMS or email, however a more modern approach would be to use applications such as Okta, RSA or even DUO. This can improve the UI and security of the VPN Application.
BeyondCorp: The User Experience
This literature is specific from the to the user experience from the point of view of the employee. New hires are given a seamless experience including access to the corporate VPN.
The UX from employee view is that there is a streamline system for new hires to receive access to the corporate VPN. The new user must go through an orientation first and then must request access to the VPN. This process improves the UX.
Conclusion
The reviewed literature emphasized the need for a proper UI/UX experience for the end user. It is common for many VPN applications to be designed from the software perspective and not giving much thought to the end user experience. Additionally since VPNs encrypt your data thru a secure server., this use of a modern-day VPN is essential. Protecting from cybercrime, bypassing geo-locations restrictions as well as firewalls and network restrictions and just some of the reasons for a VPN. The primary reason is ultimately the protection of one’s personal privacy. However it is essential to add to this an excellent UI/UX that is crafted thru customer feedback and continuously updated to provide the best end user experience thru the user interface design.
Description Of Users
In order to discover the task needs associated with the current design of NordVPN, we had to do some research into who the target demographic and audience of this product is. As mentioned previously, VPNs aim to protect user data by encrypting information when accessing the internet. This narrows the target user base to those who have privacy concerns and often use the internet. A study done by PC Magazine discovered that the primary use case of VPNs is to access restricted entertainment content, this means accessing geo-locked media on streaming services, while accessing social networks and news services comes in second. While the VPN sector accounts for $20.6 billion of the software industry, roughly 25% of users on the internet use a VPN. These users tend to be majority male and between the age group of sixteen to twenty-four years of age. Most of these users are accessing the VPN on a mobile device daily while using it more on a desktop machine at a lower frequency. Indonesia, India, Turkey and China are among the top countries with VPN usage (Griffith 2018). McAfee conducted a study worldwide in which it was found that “43% of people globally feel that they lack control over their personal information” while the Pew Research Center found that “61% of Americans say they would like to do more to protect their privacy” (Vojinovic, 2021). In 2020 alone there were more than 4.9 billion fraud attacks (ThreatMetrix) so while accessing region-based content may be a user’s main concern when using a VPN, they’re getting added protection in parallel.
Through our own research, our conclusions matched those of national research; that being that most users are male who use their VPN when they remember but not on a daily basis. Our survey participants also expressed that they were satisfied with their VPN and the added data protection they receive when using it but dislike the chore of downloading, paying and updating the software. When it came to the discussion around updates, about 25% of our survey participants answered that their VPN update was not fully automatic. Out of those who had used a VPN with a manual update, 17% said they would prefer more support and information during the update process while 17% said it wouldn’t provide any benefit. In addition, the most used VPN
Survey and Survey Responses
User Interface & User Experience Design:
Conceptual design
The NordVPN application includes an interactive utility to perform updates on the end-user’s end-point. The updates contain important software functionality improvements and corrections, including security, anti-pirating, copyrighting and other enhancements which are critical to achieving product quality and best performance
Prototyping Development was completed via InvisionApp and the Prototype tool with hotspot creation for live embedding.
https://invis.io/NordVPN Update Prototyping/
Testing through prototyping would be completed by performing an HCI analysis and re-design based on feedback from the end-users.
Early design work and methodologies:
Low Fidelity Prototyping and High-Fidelity Prototyping
In our low fidelity prototyping we relied on a modified story-boarding design method as our medium for idea generation, testing, and gaining user feedback. Essentially, we ran the NordVPN update installation utility repeatedly through base user confirmations, each time taking note of the interface prompts by screenshoting them with the Microsoft Windows Snipping Tool, where they were then assembled under a local device directory before uploading into the InvisionApp and into the protocol tool (where later high-fidelity prototyping processes would be had). This rough prototype, due to time constraints but also to make user feedback gathering as efficient as possible, was built through cutting and pasting the thirteen window prompts represented by the equal number PNG screenshot files individually into a Microsoft Word document. The document was then delivered to end-users for testing and seeking feedback on their desired enhancements. End-users were selected for user sketches based on their individual responses gathered and tabulated through answering a questionnaire, titled “VPN Survey: Gathering demographic information as well as customer satisfaction and knowledge of VPNs” placed through a public Facebook Ad Campaign and distributed to a private email group of University of Cincinnati graduate students via the following Google Drive link:
By stating where and how physical enhancements to the interface should be made, drawing by pencil and re-scanning the document or by use of a graphics editor, such as Microsoft Paint, if chosen, respondents completed the survey *It should be noted that 100% of respondents chose to complete sketches by hybrid use of printed screenshots and pen or pencil etching. Specifically, the questionnaire and selected questions were designed to elicit responses on the following:
Were there difficult areas to understand the required steps to perform?
Were you drawn specifically to any part of the interface?
Is there any area where usability can be improved?
Do you have any other relevant comments?hat you learned about how y
The survey designed method was chosen as the most pragmatic way to organize data from end-user respondents. Coupled with an interactive story board design method supported by soft-copy and hard-copy versions in the form of Facebook Ads, Google Drive Links, Microsoft Word, Snippet, and typical pen/pencil/paper writing instrumentation exchanged through email communication medicum gave our design report a decided 21st century balance. Data indicated that the survey participants expressed satisfaction with the functional benefits from using VPN for its intended purpose and reported feeling less anxious since the protection received was more than enough to meet their expectations. However, strong dislike existed for the downloading, paying and updating of VPN software. When it came to the discussion around updates, about 25% of our survey participants answered that their VPN update was not fully automatic. Out of those who had used a VPN with a manual update, just under 20% of users at 17% (or 0.85 out of every 6 users responding) of the population represented said they would prefer more support and information during the update process. From this point, we formed our user requirements and ascertain our primary objective for our application redesign. Thus, to better enhance the support and information access during the process in the hopes of alleviating anxiety and lessening overall dislike, the following three end users were asked to sketch their respective recommendations for the interface redesign which represented 50% of the total respondents who favored enhancements from our survey. So began the mapping for our user experience. See Appendix I for Storyboarding Design Screenshots and User Sketches. At first, the group used Microsoft Excel to formulate a basic mapping with boxes and other shapes in a diagram but due to complexities in making these diagrams stick to cells within the Excel application, a simple interaction chart was devised instead, then arranged with Microsoft Snippet into this document. In the following interaction chart, there is a noticeable lack for interaction with the NordVPN support team for help, support, account clarification or otherwise. Ultimately, survey responses over the update utility interaction would set forward user requirements the design team attempted to apply in practical modification in the high-fidelity prototypes. The anxiety created through losing control in the manual process in the current utility’s design was made apparent through examining respondents’ sketches and their suggestions for enhancing the support options, account help, and rating the app for feedback. The driving force behind the application redesign proved to be resolving the user’s internal conflict which resulted from an inability to have more interactive functions with NordVPN external support and account care thus establishing our enhanced user requirements.
User Interaction Design Map
The users were able to interact with members of this design report and relay their suggestions and recommendations by one of two means: through scanning in printed, edited PNGcopies of the VPN update utility sketches made individually; or editing the PNGs via a free graphics editor, Microsoft Paint. In the case of each of the users responding, the former was preferred, as each returned penciled in sketching with recommendations on the improvements they would like to have in the application interface redesign. See Appendix I for Low-Fidelity Prototype Screenshots and their counterparts High-fidelity prototype Screenshots. The surveys were conducted anonymously to protect the rights of respondents as well as to lessen any bias that may have been associated with knowing the participants and their respective responses. To this end, the three respondents were named “User Persona #1 , 2, and 3” respectively and are referred to as such in this report document. The following are selected screenshots with respective recommendations by the respondents individually. To see the complete listing for each respondents low-fidelity prototype recommendations, see Appendix I .
User Persona #1 Feedback Review “Update Time” Screenshot #1
Feedback sample from User Persona #1 above showing recommendations for design improvement to allow for My Account Help and Get Help options for tech support during the “Update Time” module, edited with pen/pencil on printed PNG files, scanned into document via a Canon OfficeJet Pro 9015 scanning device with Win 10 compatible drivers. Respondent comments include in hand-writing, here taken in context and paraphrased for brevity, “I get worried about my account security and… subscription price”; a reference to the anxiety the user felt during the update utility process as first found in the survey results. (Nearly 1 in 5 users expressed anxiety or worry over proceeding through the manual update process for their VPN)
User Persona #2 Feedback Review “One more step” Screenshot #5
Feedback sample from User Persona #2 above showing recommendations for design improvement to allow for functions to click links or buttons which allow for viewing and changing account settings during the “One More Step” module, edited with pen/pencil on printed PNG files, scanned into document via a Canon OfficeJet Pro 9015 scanning device with Win 10 compatible drivers. Respondent comments include in hand-writing, here taken in context and paraphrased for brevity, “I get worried about my account security and… subscription price”; a reference to the anxiety the user felt during the update utility process as first found in the survey results. (Nearly 1 in 5 users expressed anxiety or worry over proceeding through the manual update process for their VPN)
User Persona # 3 Feedback Review “Log In” Screenshot #9
Feedback sample from User Persona #3 above showing recommendations for design improvement to allow for cancelling the current progress,view and change settings, and an option button to see more application info during the “Log In” module, edited with pen/pencil on printed PNG files, scanned into document via a Canon OfficeJet Pro 9015 scanning device with Win 10 compatible drivers. Respondent comments include in hand-writing, here taken in context and paraphrased for brevity, “add an option to cancel and\or… get app info button(s)”; a reference to the anxiety the user felt during the update utility process as first found in the survey results. (Nearly 1 in 5 users expressed anxiety or worry over proceeding through the manual update process for their VPN)
Evaluation plan:
To achieve our qualitative and quantitative goals of increasing overall ease of use and decreasing the amount of incorrect buttons pressed in the app, we surveyed users prior to our prototyping phase to gather preliminary feedback on the goals and usage of the current NordVPN update app. With the results of those surveys we generated a summative evaluation that pointed to the general changes that users would like to see in place and how those suggestions aligned with the team’s previous ideas. From there the team proceeded to Low-Fidelity prototyping and presenting those prototypes to a group of users chosen based on the data from the initial user survey. After Low-Fidelity prototyping and our formative evaluations were in place, the next step would be to present High-fidelity prototypes to groups of prospective end-users. We would target these user groups based on survey feedback sent to the general student population. (See survey questions and related data in Appendix)
We would bring test subjects into a computer lab environment and provide them with minimal instructions. The user would be given only the information needed to complete the task and nothing further. The user would then be instructed to update the NordVPN app on the desktop machine they were seated at. The user would proceed through the High-Fidelity prototype with this goal in mind. Our team would observe all user interaction with the system. Notes would be taken on user methods, such as mouse clicks and key presses. These notes would be input into an excel document to calculate the rate of error relating to button presses to proceed through the process. We would compare these rates to rates established by the industry in general. Special notes would be taken of slides where the user was confused or felt that something was missing or needed added. Where possible, we would gather screenshots of any errors or issues that arose during testing.
At the conclusion of the app update, the user would be presented with a questionnaire via a tablet relating to their experience with the prototype. Questions would be derived from the Needs assessment and Summative evaluations done previously. We would evaluate the effectiveness of our proposed design based on the questionnaire results and the error rates after the redesign. From there we would discuss the merits of making further changes to the design or concluding progress. (See Appendix for example user questions)
Discussion and Conclusion:
The solution we have provided is an improvement over the current available functions of the NordVPN utility, specifically the utility’s update process. Our goal was to enhance user access to NordVPN’s customer service support teams and to individual NordVPN user restricted account areas and settings while in affect decreasing end-user anxiety. Secondary to customer service support, we provided an additional feedback rating function via an embedded hyperlink to assist future application redesigns and their enhancements. The areas of concern focused mostly on the lack of apparent customer service communication option buttons or links, the absence of buttons, links, or menus providing access to user’s account information, functional cosmetics such as font size and thickness, and finally, the location of said program interaction buttons within the application interface. Feedback was gathered on non-functions such as scheme, color, ease-of-visibility, and interaction design through user experience evaluation and surveying. While the group is unaware of any attempts by NordVPN or others to enhance the client, it shouldn’t be assumed ongoing evaluation or redesign may be in the works..
Once Low-Fidelity prototyping is completed and formative evaluations made, the next step could be to present High-fidelity prototypes to groups of prospective end-users.These groups may be targeted based on data originating from survey feedback sent to the general student population or to a more general population such as through Facebook or Google advertising platforms. Evaluating the data gathered through feedback could formalize our objectives for meeting user requirements. Prospective feedback could lead to more insight into future redesign and help to ascertain our objective of greater satisfaction, presumably from an inherent lower proclivity to produce unwanted stress or anxiety on the end-user as implied in our first prototyping and user experience design evaluation survey feedback results while in a more specific sense, act as a precursor to UI/UX user requirement defining. On the note of research, more disciplined research could be in order into the mood and affect of current VPN software users who pay for subscription service and must assume the responsibility for maintaining the functioning aspects of the VPN software, including the update utility itself. Further introspection into the formative grounds for end-user anxiety and worry could be considered, as well, supplementing the user experience through enhanced user interfaces.
In being interaction designers on this project, we learned how to better structure our user experience testing and designing. Our concepts of low-fidelity prototyping were much more clarified as we at first heavily depended on digital solutions such as Microsoft Word and Paint applications for user feedback before introducing pencil and paper low-fidelity prototyping in the user experience group. It is important to know that software developers do not consider the intricacies and importance of UI/UX, and this emphasizes the need for why a proper UI/UX design interface is so important for the end user and the long term success of the application.
Appendix I
(PNGS gathered as screens from the original application): These PNGs were created through Microsoft Snippet directly from NordVPN application version 6.34.4. Delivered to end-users for editing their suggestions via email through Microsoft Word attachments, assembled on the InvisionApp website for prototyping with a personal computer brand name ASUSTek Computer GL552VW specifications: x64-based PC Intel Core i5-6300HQ CPU on Windows 10 Platform running Mozilla Firefox Web Browser with latest version as of February 2021.
Low-Fidelity Prototype Screenshot #1
High-fidelity prototype example screenshots:Feedback Screenshot #1
Low-Fidelity Prototype Screenshot #5 User Feedback Sketch
High-fidelity prototype examples screenshots:Feedback Screenshot #5
Low-Fidelity Prototype Screenshot #9 User Feedback Sketch
High Fidelity Prototype Screenshot Example #9
Low-Fidelity Prototype Screenshot Feedback User Sketch #10
High–Fidelity Prototype Screenshot Feedback #10
Low-Fidelity Prototype Screenshot Feedback User Sketch #11
High-Fidelity Screenshot Feedback # 11
Low-Fidelity Prototype Screenshot Feedback #13
High–Fidelity Prototype Screenshot Feedback #13
Example post-update survey questions
References
Ahmed A. Jaha, F. B. (2008, September 16th-19th). Proper Virtual Private Network (VPN) Solution. Retrieved from IEEE Xplore: https://ieeexplore.ieee.org/abstract/document/4756450
Bahar, Z. (2021, January 15th). Do I need a VPN? A detailed look at the world’s essential privacy tool. Retrieved from NordVPN: https://nordvpn.com/blog/do-i-need-a-vpn/
Kuwar Kuldeep V. V. Singh, H. G. (2016, March). A New Approach for the Security of VPN. Retrieved from ACM Digital Library: https://dl.acm.org/doi/abs/10.1145/2905055.2905219
Mocan, S.-V. (2020, February 4th). VPN History – Everything You Need to Know About VPN Development Over the Past 25 Years (And a Quick Glimpse of the Future). Retrieved from TechNadu: https://www.technadu.com/vpn-history-over-the-years/89703/
Mohammad Taha Khan, J. D.-R. (2018, October). An Empirical Analysis of the Commercial VPN Ecosystem. Retrieved from ACM Digital Library: https://dl.acm.org/doi/abs/10.1145/3278532.3278570
Griffith, E. (2018, November 21). Half of VPN Use Is for Accessing Restricted Movies and TV. PC Magazine. Retrieved April 14, 2021, from https://www.pcmag.com/news/half-of-vpn-use-is-for-accessing-restricted-movies-and-tv
Vojinovic, I. (2021, March 21). VPN Statistics for 2021 – Keeping Your Browsing Habits Private. Data Prot. Retrieved April 14, 2021, from https://dataprot.net/statistics/vpn-statistics/
AppsGeyser. (2021, February 5th). Features of UX Design VPN Applications. Retrieved from AppsGeyser : https://appsgeyser.com/blog/ux-design-vpn-applications/
Hitzel, B. (2020, April 1st). Network Design Scenario #3: Remote Access VPN Design. Retrieved from Network Design Blog: https://www.networkdefenseblog.com/post/network-vpn-design
Victor Manuel Escobedo, F. Z. (2017). BeyondCorp: The User Experience. Retrieved from Research Google: https://research.google/pubs/pub46366/
