Swoshs VPN
Swoshs VPN is a mobile privacy app experience that makes connecting, choosing a server and understanding connection status feel straightforward. A distinctive purple visual language brings onboarding, account access and everyday VPN controls into one recognizable interface.
The project began with an Android experience built around a white-label VPN API, with the design direction adapted for iOS, macOS and Windows. The case study follows the UX process and the supplied mobile screens, from discovery and user flows to connection feedback, settings and subscription checkout.
- Design scope
- Product design · UX/UI · Mobile VPN
- Platforms
- Android-first · Cross-platform design direction
- Tools
- Adobe XD · Photoshop
A clearer everyday VPN experience
Translate privacy concerns into understandable controls and visible system feedback.
The design challenge was to make a technical service approachable and memorable for consumers concerned about online privacy. The interface needed to communicate whether the VPN was connected, make the next action obvious and keep advanced options accessible without making them the starting point.
- Make the primary connect action easy to find and understand.
- Show connection state with clear text as well as color and animation.
- Keep location switching close to the home screen.
- Build a consistent visual language for onboarding, account access and subscription states.
Research → experience priorities
Use discovery to reduce uncertainty at the moments users need to make a decision.
Start with needs, not a feature list
The research material describes stakeholder interviews, a review of competitor strengths and weaknesses, conversations with VPN and non-VPN users, and feedback from app-store reviews and online communities. These inputs helped distinguish the service people purchase from the underlying goal: feeling informed and in control online.
Turn discovery into interface requirements
- Prioritize the information needed for connecting and checking status.
- Use plain-language labels and contextual help for technical settings.
- Support a simple daily routine while keeping detailed controls available.
- Review whether state changes are understandable across platform and appearance variants.
Map the route to a first connection
Separate the everyday connection task from account, purchase and support journeys.
The user flow starts with entry and onboarding, then branches from Home into connection and server selection, purchase, and the account menu. Server browsing includes nodes, favorites, torrent and streaming categories. The menu groups account details, settings, product information and support so secondary tasks have predictable destinations.
- Primary journey: onboarding → Home → choose a location → connect.
- Account journey: sign up or sign in → review account and plan details.
- Purchase journey: choose a plan → complete payment → confirmation.
- Supporting journeys: configure preferences, review help and contact support.
A guided first-use experience
Connect the product introduction with a focused registration flow.
Introduce the service before asking for decisions
The onboarding sequence uses illustrated screens and a clear progression to introduce the product. Each screen focuses on one idea, giving new users a short path toward the app rather than a dense introduction to every setting.
Make account creation and validation explicit
The registration screens cover empty, filled and validation states. Password feedback appears near the field so users can understand and correct input before continuing. The sign-up action stays visually consistent with the primary actions elsewhere in the app.
Return with a familiar sign-in pattern
Keep account access consistent and make input feedback easy to locate.
The sign-in screens use the same layout and action hierarchy as registration. Filled-field and validation examples show how the interface can explain an unsuccessful attempt without taking users away from the task. Keeping these states aligned makes returning to the app feel familiar.
Connect, wait, confirm
Give users visible feedback throughout the connection process.
One clear starting point
The home screen centers the connection control, supported by the selected location and a visible status label. A map provides location context, while transfer indicators and application shortcuts sit beneath the primary interaction. The layout keeps connection status ahead of secondary information.
Show the transition, not just the result
Disconnected, connecting and connected screens make the system state visible during the core task. The circular control changes its treatment alongside the text, while the connected state adds elapsed time. This combines recognizable visual feedback with a readable label; the case study presents the interface design rather than a technical verification of VPN protection.
Choose a location with confidence
Make server discovery and repeat selection part of the same daily workflow.
Server browsing moves from country lists to individual locations, with search and favorites supporting repeat use. The bottom navigation groups nodes, favorites and specialized categories. The design intent is to let users select and connect to another location with fewer steps, while keeping the active location visible on Home.
- Use country names and flags together for recognizable location entries.
- Let users search a long list instead of relying only on scrolling.
- Keep favorite locations accessible for repeated connections.
- Carry the selected location back into the primary connection view.
Keep advanced controls within reach
Give account management and configuration a predictable place outside the main connection task.
Account screens bring plan and identity information together, while settings provide a separate place for VPN behavior and preferences. The supplied user flow includes protocol selection, auto-connect, kill switch, split tunneling, shortcuts, appearance and language. These options need clear explanations so technical terminology does not become a barrier to understanding.
From plan choice to confirmation
Make the commercial journey as understandable as the connection flow.
The purchase journey combines a value presentation, plan choices and a payment step, followed by a success confirmation. The plan selector keeps subscription options close to the purchase action. Confirmation provides a distinct end state, helping users recognize that the transaction has completed before returning to the service.
- Present plan duration and price together so options can be compared.
- Make the selected plan apparent before payment.
- Distinguish the purchase action from supporting payment information.
- Confirm completion with a dedicated success state.
A recognizable interface across states
Carry the brand through connection, discovery, support and recovery moments.
Purple surfaces, cyan connection accents, rounded controls and illustration establish a distinctive visual identity. Light and dark treatments retain familiar controls, while offline, account, subscription and support screens extend the same language beyond the happy path. Status text is essential alongside expressive color and motion.
Clarity builds confidence
A memorable VPN interface still needs clear actions, understandable states and predictable journeys.
A focused usability review should ask users to connect for the first time, explain the current status, choose another server, recover from a login error and compare subscription options. Accessibility checks should cover contrast, text size, focus order and reduced-motion behavior. These are validation priorities, not measured performance claims.
- Lead with the core task: connect and understand the result.
- Pair visual expression with plain-language status and feedback.
- Keep frequent location choices close to the home screen.
- Group technical settings separately from the everyday workflow.
- Review recovery and purchase states with the same care as the main screen.