top of page

About PIA VPN

Private Internet Access is a VPN service that helps users secure their internet activity, protect privacy, and connect safely across devices. The app is the primary way subscribers interact with the service, handling connections, server selection, and features such as Smart Location and Dedicated IP

By 2023, the app needed more than a visual update. While it still reflected pre-2021 brand assets, it also faced usability and accessibility issues that caused hesitation in key flows. The redesign addressed these gaps, aligning the app with the refreshed brand while overhauling the experience to be clearer, more consistent, and more trustworthy.

About.png

TL;DR

Goal:

Modernize the PIA app by overhauling usability, strengthening accessibility, and aligning the product with the 2021 brand identity.

Role:

Led a team of senior and lead product designers, managing project planning and cross-department collaboration, while contributing hands-on at every stage from research through delivery.

Issues:

Outdated UX, confusing flows, accessibility gaps, missing documentation, limited scalability, and inconsistent visuals.

Recommendations:

Redesigned core flows and icons for clarity, introduced accessibility standards, created a scalable documented component library, and aligned the app with the refreshed brand identity.

Result:

  • Optimal Location adoption ↑ 32%

  • Dedicated IP usage ↑ 27%

  • Server selection time ↓ 19%

  • Accessibility compliance ↑ to 95% of WCAG 2.1 AA

  • Design QA time ↓ 40%

  • Visual consistency issues ↓ 60%

  • User satisfaction ↑ to 84% (from 62%)

Window:

  • Research & audit – 2 weeks

  • Design & validation – 5 weeks

  • Development – 5 weeks

  • Post-launch data collection – 3 weeks

Project Overview

Early feedback showed that while users could complete core actions like connecting to a server or using a Dedicated IP, the experience was hindered by friction. Icons were often unclear, interactions lacked consistency, and the app still carried a visual style predating PIA’s 2021 rebrand. Accessibility gaps, such as touch targets and contrast ratios, further compounded the issues. Together, these factors created hesitation and, over time, risked undermining trust in the product.

The redesign launched in Q1 2024 with three key aims: overhaul the app’s usability, modernize its interface to align with the updated brand identity, and prepare the product for scalability through components and documentation. It was also timed with the rollout of a re-architected Android app and roadmap updates for multi-platform consistency, making this the right moment to unify design and experience across the service.

Research & Usability Testing

We combined a short usability test with a holistic design audit. Seven participants confirmed issues such as hesitation around Optimal Location, misinterpretation of Dedicated IP, and unclear latency indicators.

The audit revealed deeper problems: inconsistent patterns, duplicated solutions, outdated visuals, and accessibility gaps. These findings highlighted the need for a consistent design system to improve usability and ensure long-term scalability.

reseach.png

Identified Pain Points

Usability gaps in key flows

Core interactions like server selection and Dedicated IP lacked clarity. Usability testing confirmed these issues, showing hesitation around Smart Location, misinterpretation of Dedicated IP, and unclear latency indicators.

Customization controls misread as connection settings

The existing interface placed personalization options in ways that confused users, with icons near the connection banner often mistaken for connection editing rather than homepage customization.

Lack of scalability

Components had been designed in isolation, leading to duplicated patterns and inconsistent states. Without a system in place, introducing new features required extra effort and risked accumulating UI debt.

Accessibility shortcomings

The audit revealed touch targets below recommended size and insufficient contrast ratios across several interface elements. These issues risked excluding users and created friction in everyday use.

Missing documentation

Component specifications and design decisions were not consistently documented, slowing iteration and making design QA and developer handoff more difficult.

Outdated and inconsistent visuals

The app still reflected pre-2021 brand elements. This visual disconnect from the refreshed marketing identity not only looked dated but also weakened trust, as users expected a unified experience across all PIA touchpoints.

Pain points.png

Results

User Outcomes:

 

  • Optimal Location adoption ↑ 32%

  • Dedicated IP usage ↑ 27%

  • Server selection time ↓ 19%

  • User satisfaction ↑ to 84% (from 62%)

System outcomes:

 

  • Accessibility compliance ↑ to 95% of WCAG 2.1 AA

  • QA time ↓ 40% through documented components and checklists

  • Visual consistency issues ↓ 60% across platforms

Conclusion

The redesign transformed the PIA app into a modern, scalable, and trustworthy product. By addressing usability gaps, introducing accessibility standards, and building a documented component library, we improved daily interactions and reduced design debt.

Beyond immediate gains, the new design system ensured brand consistency across platforms and created a foundation for faster, more confident iteration. It also established a repeatable framework for future audits and redesigns across the product suite.

Implemented Solutions

Usability gaps in key flows
  • Smart Location: Replaced the icon with a lightning mark and clear label “Optimal Location”, and surfaced it in Quick Connect for faster access.

  • Dedicated IP: Retired the map-pin, introduced a text based icon, and added short explanatory text during onboarding to improve recognition.

  • Latency: Sorted servers from fastest to slowest by default, standardized the green → yellow → red scale, and kept numeric values for precision.

S-1.png
Accessibility shortcomings
  • Expanded touch targets, improved contrast in both themes, and added support for dynamic text scaling to meet accessibility standards.

S-2.png
Customization controls misread as connection settings
  • The customization icon remained in the same location but was redesigned to be more intuitive.

  • The pencil was replaced with a clearer “Customize Home” symbol, making the function distinct from connection editing.

  • A first-time tooltip was added to explain that users could rearrange shortcuts and personalize the homescreen.

S-3.png
Missing documentation
  • Redesigned components were documented in Figma with states, variants, and accessibility notes, supported by a centralized component library guide. This single source of truth streamlined QA and developer handoff.

S-4.png
Lack of scalability
  • Introduced a scalable component library in Figma, built with auto-layout, variants, and design tokens for consistent behavior across platforms.

  • Key UI patterns such as lists, buttons, and navigation were rebuilt as flexible components that could support all variations without duplication.

  • A component QA checklist was established, covering states, constraints, localization, and accessibility, ensuring each element could adapt reliably to future features.

S-5.png
Outdated and inconsistent visuals
  • Updated typography, color palette, and iconography to align with PIA’s 2021 brand, unifying the visual language across the app.

  • Unified the look and feel across screens, eliminating inconsistencies between flows and ensuring cohesion with marketing and web experiences.

  • Introduced subtle motion in key transitions to modernize the interface and reinforce a sense of trust without impacting performance.

S-6.png

Redesigning the PIA VPN App

bottom of page