Loading...

Mozilla VPN

Making Server Selection Easy

Learn More

Making Server Selection Easy

Early in 2023, As our customer base grew, we realized that we were starting to see a slew of support tickets related to speed and performance. The amount of support tickets resulted in a big chunk of time and money spent on support, trying to deal with these issues.

Users were saying things like “After running a speed test with my VPN on, I’m getting huge decreases in Upload and Download speeds”. Our task was to find the root cause of these issues and design an elegant solution to help our users and save the company money.

THE CHALLENGE

What do we want to accomplish?

Before getting to the discovery, we had to determine the product and business goals. After running our own tests, we found that speed and performance was actually on par or better with our competitors. So why the influx of support tickets?


High Level Goals:

  1. Find the root cause of these customer issues
  2. Give our users peace of mind that performance is not an issue
  3. Decrease the number of support tickets revolving around speed and performance to save time and money

My Role:

I led the design team for the VPN product. I worked alongside a Researcher, Content Designer, and Product Manager through the entirety of this project, from conception to launch.

The feature launched globally in 2023 on all platforms.

The approach

design thinking
EMPATHY

Why is this happening to our users?

In order to find out why this was happening to our users, I needed to understand our users current behaviours. Other than the fact we were getting these support tickets, I have no idea why this slew of complaints were coming in.


Moderated usability testing:

We tested asked 13 people about their current experience with VPN.


image

Research questions:

  1. When using a VPN, what steps do users take to select a server? Why?
  2. How do users define a server? What are their main misconceptions or questions?
  3. How often do you use a VPN? [MULTIPLE CHOICE]
  4. Why do you use a VPN? [SELECT MULTIPLE]
  5. Do you ever switch connections or countries while using your VPN?
  6. Why do you switch connections or countries? Please describe a scenario where you would do this. [VERBAL OPEN ENDED]
DEFINE

Insights & discovery

I were a bit surprised by the results, an insight that stood out to me was that there were a fair number of people who were unclear about the purpose of switching/selecting servers, and some even worried about using the feature altogether, despite the majority using a VPN everyday.

Choosing a VPN server is not a random act. The distance of the server will affect the latency and performance of your internet speed. After careful thought with our team, it was hypothesized that users were not picking servers based on geographical location, thus affecting their speed and performance results negatively.


Verification of discovery

I was able to find more information to support our hypothesis. Our support team had been getting quite a bit of support tickets related to “how to use VPN”. They recieved 2376 tickets to be exact, in the last year.


“How might we better educate users about how to use VPN so that they are able to easily select the correct server without any performance issues?”
IDEATE

Areas of opportunity


image

After mapping the current user journey for selecting server locations, I was able to identify 3 main friction points as potential areas of opportunity. These areas were:

  1. Help the user make the correct decision when they are searching for a new location
  2. Reinfore that their decision is correct when making the decision to switch
  3. Make sure there are no performance issues after the server selection is made

Target audience: Quick & ambivalent

Continuously using our target persona and marketing profile to guide our decisions, I knew I had to create a solution that would have to educate users in a way that isn’t intrusive, and is within the normal flow of the user journey. Our strategy was to:

  1. Add a list of recommended servers
  2. Add server strength signals beside each location
  3. Design a collapsable educational card to inform the users why the servers are recommended
image
image

Introducing: Server Latency Display

Quick and ambivalent users like to “set it and forget it”. They want to be able to make quick decisions without intrusive hassles, they’re not too fond of intrusive education, and they have no interest in becoming a “privacy expert”. With Server latency displays throughout the server selection journey, they will be able to feel more confident that they’re making the right choice.

image

Adding a recommended server list

Previously the user had to go into the server list with over 500 server locations and had to choose one, without any instruction.

With this change, the user will now see a recommended server list that is sorted by reliability, taking away the decision fatigue and reducing cognitive load.

Adding signal strength icons beside each server location

Previously there was only a list of countries and their respective server locations.

With this change, if a user needs to search for a specific location that is not in the recommended server list, they are able to see the strength of the server next to each location.

Designing a collapsible educational card

Quick and ambivalent users do not like to be educated intrusively, and enjoy more user control and freedom. This change allows the user to learn about why the server locations are recommended, only if they want to know why.

image
PROTOTYPE & TEST

Do these changes work?

After getting alignment on the proposed changes, the high-fidelity designs, and the wire flows, we were able to test a prototype with the same group of people. We observed them working through two main tasks.


image

First usability task:

Using the Mozilla VPN, show us how you might choose the strongest connection in the United Kingdom, so that you can hurry up and watch a show off of UK Netflix. While doing so, please describe what you are seeing on EACH page. Remember to think out loud!


Second usability task:

Using the Mozilla VPN, show us how you might find a strong connection from anywhere in the world. Make sure the connection you pick is fast and reliable.


Overall the proposed changes tested extremely well. We were able to identify the pain points, design a solution around our target audience and help them enjoy the experience without disrupting their normal user journey. Aside from some small UI tweaks we moved forward with these changes, and did not see another reason to test again.
  1. Participants understood signal strength quickly and most were easily able to select a strong connection
  2. The majority of participants found this to be very useful and would pick whatever server was recommended to them by the VPN
  3. Some participants used the description card to understand why a server was recommended
IMPLEMENT & ITERATE

Fast follow

After implementation we added a fast follow up to the feature. When first time users signed up and logged into the VPN, their location was populated with a random server. One thought we had was “What if the users never navigated to select a new location?”

Working together with the Product Manager and the Engineers, we were able to add a pretty important part to this feature. Now, when a first time user enters the application, we will quickly do a latency ping and populate the default location with the best performing server at the time.


The impact 🚀

I love to highlight this case study because it's really awesome to see how such a small and simple change can make such a HUGE impact. On the surface I didn't redesign entire screens or do anything revolutionary, but the user needs and business needs were addressed elegantly.

image
  • Observed over 2x the amount of people using the recommended server list over selecting a custom server location.
  • Support tickets related to “How to use VPN?” dropped 38%
  • Support tickets for speed and performance dropped 56%
*I recommended that we add telemetry to monitor performance

What did we do next?

With these positive results, The Pm and I continued to monitor the performance of these changes, but there’s always much more to do. This led to a much more ambitious change to help with speed and performance related complaints, the Mozilla VPN embedded speedtest…

Thank you for reading!

Mozilla: Nebula Design System