Case #1
Improving the Conversion Rate in the NearVPN app

NearVPN is a cross-platform app for VPN connections. This case focuses on the Android version.

The goals were to increase average check and conversion rates without deep re-engineering, and my personal goal was to practice my design skills. 🛝 👾 🎮

The goals were to increase conversion rates and average check, and my personal goal was to practice my design skills. 🛝 👾 🎮

My role was a part-time product designer. My team included a part-time Android developer, a part-time back-end developer, and the founder.

My role was as a part-time product designer. My team included a part-time Android developer, a part-time back-end developer, and the founder.

Inputs:

  • Low conversion rates to payment and average check,

  • Sufficient organic traffic in the store to test ideas one by one,

  • Limited development resources.

The process included research, ideate and design.

The process involved analyzing data, defining business and user problems, and moving to high-fidelity design and implementation.

Outputs: Mockups and prototype created in Figma.

Prototype on conditional variables.
Wait a sec to load it.

NearVPN main screen

For More Details, Welcome to My Workshop 🛝 👷🏻‍♂️

Research

Analyze User Feedback and Inputs

NearVPN regularly receives feedback from users stating that the connection is poor or doesn’t work at all.

NearVPN regularly receives feedback from users stating that the connection is poor or doesn’t work at all.

The connections are regularly tested by automated tests, which show that the app is unable to provide quality connections across all countries. The best result is an 76% success rate, while the worst is 47%.

The connections are regularly tested by automated tests, which show that the app is unable to provide quality connections across all countries. The best result is an 76% success rate, while the worst is 47%.

The app infrastructure is simplified and requires investment to provide reliable connections, which is not feasible because the product does not demonstrate economic growth.

The app infrastructure is simplified and requires investment to provide reliable connections, which is not feasible because the product does not demonstrate economic growth.

From time to time, we receive requests from the government regarding user actions related to illegal activities.

From time to time, we receive requests from the government regarding user actions related to illegal activities.

The app has a Monthly Active User (MAU) count in the range of 10,000 to 100,000 (the exact number cannot be disclosed due to a NDA-thing).

The app has a Monthly Active User (MAU) count in the range of 10,000 to 100,000 (the exact number cannot be disclosed due to a NDA-thing).

The app uses Material Design 2 to simplify development.

Define the Target Audience and Their Needs

Define the Target Audience and Their Needs

The app is designed for consumers without extensive technical requirements.

Privacy-Conscious Users

Secure encryption, anonymous browsing, protection on public Wi-Fi.

Remote Workers and Digital Nomads

Reliable, fast connections; access to region-restricted services; protection of sensitive corporate information.

Users in Censored or Restricted Areas

High anonymity, access to unrestricted regions, user-friendly interface.

Frequent Travelers

Protection on public Wi-Fi, access to home services securely while abroad.

Define the Product Value

Access to Global Content

Enable users to bypass geo-restrictions and censorship, providing access to global websites, streaming platforms, and services.

Speed and Performance

Provide fast, stable, and low-latency connections to ensure a seamless experience for streaming, gaming, and working remotely.

Privacy and Security

Protect user data and ensure anonymity through encryption and secure connections, even on public Wi-Fi networks.

Conduct Competitor Research

Conduct Competitor Research

To gain a better understanding of the competitive landscape, design patterns, functionality, and pricing, I conducted competitor research on several apps across mobile, desktop, and Chrome extensions, including one professional-grade VPN services for corporate users.

Competitive Landscape in FigJam

Competitor Analysis Notes

Conclusions

The app does not provide feedback on connection quality, making it difficult for users to assess whether the connection is good or bad, which can lead to unmet expectations.

The app does not provide feedback on connection quality, making it difficult for users to assess whether the connection is good or bad, which can lead to unmet expectations.

The lack of feedback does not motivate users to purchase a better plan for accessing additional locations.

The lack of feedback does not motivate users to purchase a better plan for accessing additional locations.

The pricing in the app is the lowest among competitors which affects the average check.

The pricing in the app is the lowest among competitors which affects the average check.

My hypothesis is that absence of a feedback and low pricing leads to a weak app economy.

My hypothesis is that absence of a feedback and low pricing leads to a weak app economy.

Ideate

Sketching Ideas

The key question is: 'How can we provide maximum value without extensive engineering to improve user experience and app economics?' The ideas are:

  • The default connection must be the best available option for the user's environment, regardless of whether the user has a free or paid plan, or their location.

  • The default connection must be the best available option for the user's environment, regardless of whether the user has a free or paid plan, or their location.

  • Provide users with feedback on connection quality to clearly indicate whether it is good or not.

  • Provide users with feedback on connection quality to clearly indicate whether it is good or not.

  • Update the paywall to communicate why users need to upgrade.

  • Update the paywall to communicate why users need to upgrade.

  • Implement a mandatory registration flow to comply with legal requirements.

  • Implement a mandatory registration flow to comply with legal requirements.

  • Conduct a step-by-step test of the pricing model until it aligns with competitors' levels.

Prioritize Ideas

The simplest changes first, progressing to more complex adjustments that require greater investment from the development side.

  1. Paywall

  2. Start testing the pricing model

  3. Change the registration flow

  4. Add feedback on connection quality in the list of connections and on the main screen

  5. Display the best connections on the main screen

Let's Design

Paywall Spotlighting Clear Value, Old Vs. New

Paywall Featuring Value

User Registration Flow

The registration flow includes a splash screen with the Terms of Service (ToS), informing users that on the free plan, their devices will be used as nodes for other users and may work in the background. The Play Store required to show that clearly for users.

Old

New

Connection Quality Feedback

Connection Quality Feedback

To define connection quality, I chose to display connection latency, as it is the simplest solution based on our current infrastructure. Showing users bandwidth speed requires significantly more investment, which is not feasible at this time. Old from the left Vs. New from the right.

Best Connection

The logic for default connections is set to shift from a hardcoded location to an adaptive system that selects the best available server for users.

This approach aims to improve connection quality based on users' locations, eliminating the need for them to make a selection while still providing the option to do so if desired.

Old Select Location from the Left Vs. New Best Connection from the right.

Wireframing and Prototyping

Wireframing and Prototyping

To minimize the size of the prototype, I applied conditional variables and components.

Mockups on Components

Mockups are based on custom-made components, styles, and components from Material Design 2. Links to Mockups and prototype in Figma.

Learnings From The Case

Learnings From The Case

The main takeaway from this project was practicing Figma as a designer: wireframing, designing, utilizing styles, components, UI kits, auto-layout, creating prototypes, and iterating extensively before delivering to a developer for implementation.

The main takeaway from this project was practicing Figma as a designer: wireframing, designing, utilizing styles, components, UI kits, auto-layout, creating prototypes, and iterating extensively before delivering to a developer for implementation.

While working on the case, I also learned how to use Framer and went through many iterations on typography, layout, and how to present my findings to the reader.

While working on the case, I also learned how to use Framer and went through many iterations on typography, layout, and how to present my findings to the reader.

Thank you for reading the case. Have a great day, and feel free to ask me anything!

That's it, so easy. 🎨 👨🏼‍🎨 🖼️

Let’s Chat About Your Case!

Book a Call or Connect on LinkedIn

Let’s Chat About Your Case!

Book a Call or Connect on LinkedIn

Let’s Chat About Your Case!

Book a Call or Connect on LinkedIn

Legal Address: Georgia 🇬🇪

Made on Framer in 2024

Legal Address: Georgia 🇬🇪

Made on Framer in 2024

Legal Address: Georgia 🇬🇪

Made on Framer in 2024