SaaS & Cloud Platforms - 2023–2025

Bayria VPN

A VPN sold on being the fastest, designed as one connect button and the plan, billing and device screens around it - repeated, unchanged, across iOS, macOS and the web.

Role
UX/UI & product design
Platform
iOS, macOS, tvOS, SaaS, web
Scope
Cross-platform UI/UX design
Year
2023–2025
Bayria VPN main app screen with a large tap-to-disconnect control, the active server Los Angeles - 1 shown with a green status dot, and a banner about the service renewal date
The whole app in one screen: a single shape to tap for connect and disconnect, the active server with a live status dot, and the account's renewal date sitting directly underneath - not in a settings menu.

The problem

Selling speed on a product with nothing to look at

A VPN's whole job happens where you can't see it: connected or not, routed through which country, actually private or not. Bayria's pitch was speed on top of that - a claim that's even harder to show on a screen than "secure" is.

The brief covered five surfaces at once - the iOS app, a desktop client, a macOS panel, a SaaS dashboard and the marketing site - and all of them had to answer the same question the same way: is it on, and can I trust that it's on.

Bayria marketing website homepage with hero headline, a row of supported device icons, a feature checklist and a pricing tier
The public site: hero pitch, one row of every supported device, a feature checklist and a pricing tier - the same orange system as the app, just in a browser.
In-app Downloads screen listing the recommended client for the current device plus tabs for Mobile, Desktop, Browser and TV platforms
The same list, from inside the account: the client recommended for the device you're on, then everything else, sorted into Mobile, Desktop, Browser and TV tabs.

Approach

One card, reused every time money changes hands

Instead of designing three separate purchase flows, I built a single plan → duration → payment pattern and shipped it unchanged on iOS, on macOS and on the desktop dashboard. Orange stayed the one accent color across every surface - a status dot, a warning banner, a subscribe button - so it always meant the same thing: this is the part that needs your attention.

The same three steps everywhere plan, duration, pay - never redesigned twice.

iOS plan selection screen with Plus, Pro and Premium+ tiers, a 1, 6 or 12 month duration toggle, Apple Pay as payment method, and a subscribe button
The iOS plan screen - Plus, Pro and Premium+ tiers from $3.99 to $16.99, a duration toggle, and Apple Pay set as the default payment method.

Billing

Managing money without leaving the dashboard

On desktop, the same logic runs the other direction: the current plan and its price sit at the top, the card on file next to it, a paid-invoice history below, and changing plans opens a dialog that puts the two tiers side by side by what each one actually includes - seats and data, not just price.

Desktop billing screen showing the current subscription plan, payment method on file, a table of paid invoices, and a change-plan dialog comparing two pricing tiers
Desktop billing: current plan, payment method, invoice history, and the change-plan dialog comparing Basic against Business by seats and data limits, not just monthly price.

Process

From market research to five shipped surfaces

  1. Research

    Studied VPN market requirements and what cross-platform security products need to get right.

  2. System

    Built one visual language - orange accent, shared components - meant to repeat across every platform.

  3. Platforms

    Adapted the same connect, plan and billing structure to iOS, macOS, desktop and the web.

  4. Ship

    Delivered the app, desktop client, macOS panel and marketing site as one consistent product.

Design decisions

Three choices that mattered more than polish

macOS Bayria panel showing the same Plans screen as a floating panel over the desktop, ending in a 7 day free trial button instead of an immediate charge
The same Plans screen, a third time, on macOS - opened as a panel over the desktop rather than a full window, ending in a 7-day free trial instead of an immediate charge.

Outcome

The same VPN, wherever it's opened

The app, the desktop client, the macOS panel and the marketing site ended up sharing one connect-plan-billing pattern and one accent color doing one job everywhere. A subscriber moving from phone to laptop to browser extension isn't relearning an interface each time - it's the same three or four shapes, in a different frame.