TELEGRAM MINIAPP

A decentralized VPN service, matter for crypto users who care about protecting their identity and wallet data.

Role UX/UI Designer
Team Solo Design
Timeline April 2024 – June 2024

Problem

Users show little willingness to install standalone VPN applications, particularly in scenarios involving infrequent use, where the value of the functionality does not justify the additional effort required for downloading, registration, and setup.

Purpose

To develop an intuitive, secure, and minimalist interface for mini-app in Telegram, adapted to the Telegram API and platform, providing a convenient user experience for VPN management that will strengthen user trust in the privacy and reliability of the service.

TELEGRAM MINIAPP

A decentralized VPN service, matter for crypto users who care about protecting their identity and wallet data.

Role UX/UI Designer
Team Solo Design
Timeline April 2024 – June 2024

Problem

Users show little willingness to install standalone VPN applications, particularly in scenarios involving infrequent use, where the value of the functionality does not justify the additional effort required for downloading, registration, and setup.

Purpose

To develop an intuitive, secure, and minimalist interface for mini-app in Telegram, adapted to the Telegram API and platform, providing a convenient user experience for VPN management that will strengthen user trust in the privacy and reliability of the service.

Challenges

  • How can a complex VPN service be adapted for the Telegram mini-app so that users don't get lost in the details and quickly get to the main goal?
  • How can you make onboarding clear if your product is technical and requires trust from the user?
  • How can I integrate payment and, if necessary, TON wallet integration without breaking the flow or looking too complicated?
  • How should we design error, loading, and confirmation states so that the service remains understandable even in non-standard scenarios?

Product and subject area analysis

During the initial phase, the following were examined:

  • product documentation;
  • service architecture;
  • user roles and scenarios;
  • Telegram guidelines and limitations;
  • data storage and inheritance principles;
  • product business goals.

The goal was to map out user scenarios and understand the product's technical limitations.


Conducted interviews with potential users

The goal of the interview is to identify the criteria for selecting a VPN, barriers to connection, and factors influencing the decision to purchase and continue using the service:

  • how users choose a VPN;
  • what factors influence the decision to connect;
  • why users stop using a VPN;
  • what influences the decision to pay for the service;
  • what expectations and concerns arise before connecting.
User flow diagram

Basic UX solutions

The product's core solution is minimizing user actions – One-tap connection. After onboarding, the user can connect in virtually a single step. This reduces friction and improves activation.


The product consists of four main sections

Home – Main screen:

  • connection status;
  • selected server;
  • connect CTA.

VPN – List of available servers

Download – List of download instructions for various platforms

Race – Section for boosting retention through gamification:

Users receive bonuses for:

  • daily logins;
  • using a VPN;
  • renewing their subscription;
  • inviting friends.
User flow screens

UI-Design

Developed a Mini App design system, taking Telegram's constraints into account:

  • a component library;
  • a state system;
  • responsive cards;
  • form patterns;
  • a notification system;
  • a set of screens for onboarding and data management.
Dashboard UI design system showcase
VPN Dashboard Interface

Results

The result was the successful development of a Telegram Mini App that translates complex digital legacy concepts and Web3 mechanics into an intuitive user experience.
The product features a structured onboarding process, transparent security setup flows, and an access management system, enabling users to complete key setup stages more quickly.

CONTACTS

You can contact me on Email Email or Telegram Telegram . I have some works on Behance Behance . My CV you can see on LinkedIn LinkedIn .

Made on
Tilda