PIA VPN
2024
Upgrading PIA App Usability
Making connection status, server choices, and everyday actions easier to understand.
Overview
Connecting should feel straightforward
Private Internet Access is a VPN used by over 15 million subscribers. The mobile app is where they spend most of their time: connecting, picking a region, and using features like Optimal Location and Dedicated IP.
By 2023 the app hadn’t kept pace. It still used pre-2021 brand assets, and people in usability tests were getting stuck in flows that should have been simple. A planned re-architecture of the Android app, and a push for consistency across platforms, gave us the chance to fix it.
We were a two-person design team: our design lead and me. I worked hands-on on the UI redesign, the component library and the accessibility audit. The work shipped in Q1 2024 after 15 weeks.
Results
Optimal Location selection: +32%
QA time reduced by 40%, measured from Jira task and rework data
User satisfaction: from 62% to 84%
Accessibility: from failing WCAG 2.1 AA to 95% compliance
Problem
Small details created uncertainty
In usability tests, people paused on the main screen and second-guessed what the icons meant. The customize icon, a pencil, read as “edit my connection”. The Dedicated IP icon, a map pin, looked like another region option. And the “Automatic” server option left one user confused:
“I would even give it a one [lock] because I need it to be clear to me. I’m using a VPN — I need flexibility, so what is this ‘Automatic’ all about?”
Beyond the icons, the basics were failing. A contrast ratio of 2:1, against the required 4.5:1, failed every WCAG check for text, large text and graphics. Touch targets were too small. Under the surface, patterns were duplicated across screens, nothing was documented, and inconsistent states made every QA cycle expensive.
Research
Making the case before the redesign
The issues came up in a scheduled usability test. Before asking for time to fix them, we had to show they were worth it: research costs money, and adding a redesign on top of the Android re-architecture costs more.
So we built a rough prototype of the proposed flow, with the expected impact attached. That was enough to get the redesign approved alongside the re-architecture.
Design approach
Make the answer visible
Every change answered the same question: what does this control do, and what happens next? Where an icon or a colour left room for doubt, we added text.
“Automatic” became “Optimal Location”
The old name didn’t tell people why letting the app choose was a good idea. We looked at options like “Best Server” and “Recommended”, but both were too vague. “Optimal Location” says what the feature actually does.
A text label instead of a map pin for Dedicated IP
A map pin means “pick a location”, the same language the region list uses. We replaced it with a “DIP” text label, which removed the conflict. The change was carried into onboarding for new users and into the updated icons for existing ones.
Connection status in words
The old main screen had no status text, so people had to read the state from the button’s colour. The header now says “Not connected” or “Connected to VPN”, and the pencil icon was replaced with a clearer one.
A full component audit, not a patch
The Android re-architecture was a rare chance to fix the components properly. We audited the whole library instead of fixing single screens, because the conditions to do it wouldn’t come again soon.
Designs
Clearer everyday interactions
01 — Say whether the VPN is connected
The header shows “Not connected” or “Connected to VPN” next to a status icon. The selected location sits in its own card below the connection button, with the public and VPN IP addresses and a Quick Connect bar for country shortcuts.
02 — Explain the server choice
“Optimal Location” sits at the top of the region list. Colour-coded latency indicators replace plain millisecond values, so people can scan the list. Dedicated IP is marked with text instead of a location icon.
03 — Meet accessibility standards
Contrast went from 2:1 to 7.57:1, and touch targets were updated across the region list and the Quick Connect bar. A light theme was added as an option.
04 — Make consistency reusable
The component library documents buttons, text fields, search and hint bars, with their states, light and dark versions, and an accessibility scorecard for each. A component checklist came out of it, which the team used in QA.
05 — Update the visual language
Typography, colours and icons were aligned with PIA’s 2021 brand across key screens, including onboarding and system messages.
Outcome & lessons
Clearer screens, with rules behind them
What shipped: server selection that reads at a glance, with Optimal Location clearly placed and Dedicated IP identified by text. Accessibility went from failing every WCAG check to 95% AA compliance, with contrast at 7.57:1 and touch targets documented and checked throughout. The component library gave the team, and future teams, one documented source for states, variants and accessibility notes.
The main lesson for me: a familiar icon still needs context. Small labels and visible status removed most of the hesitation we saw in testing.
