Designing a Telegram Mini-App and Web Application for Targeted Advertising

Designing a Telegram Mini-App and Web Application for Targeted Advertising

Designing a Telegram Mini-App and Web Application for Targeted Advertising

CHALLENGE

When I was approached to design a Telegram mini-app and a web platform for a Web3 advertising solution, the goal was clear, create an intuitive and scalable experience that allowed businesses to target Telegram users effectively while ensuring users had full control over their ad engagement.


The initial concept, had a major flaw: businesses had to go through Telegram group admins to access audiences, creating a frustrating bottleneck. To fix this, we transitioned to GramTarget, a refined version that put control directly in users' hands, eliminating the need for intermediaries.

MY ROLE

As the Product Designer on this project, I was responsible for leading the end-to-end design process, from ideation and wireframing to high-fidelity UI and developer handoff. I worked closely with the founders and engineering team to:

  • Conduct research and competitive analysis

  • Translate business goals into usable design systems

  • Prototype and iterate on user flows for both Telegram and web platforms

TIMELINE

2 months | September 2024 – November 2024

RESEARCH

Before jumping into design, I conducted research to identify the key pain points for both advertisers and users. Through stakeholder interviews and user flow analysis, I identified several critical needs:

Advertisers needed a streamlined dashboard to create, manage, and track their campaigns effortlessly.

Advertisers needed a streamlined dashboard to create, manage, and track their campaigns effortlessly.

Advertisers needed a streamlined dashboard to create, manage, and track their campaigns effortlessly.

Users wanted control over their ad experience, no forced ads, just opt-in engagement.

Users wanted control over their ad experience, no forced ads, just opt-in engagement.

Users wanted control over their ad experience, no forced ads, just opt-in engagement.

The Telegram mini-app had to be lightweight and frictionless, ensuring a seamless experience within the platform.

The Telegram mini-app had to be lightweight and frictionless, ensuring a seamless experience within the platform.

The Telegram mini-app had to be lightweight and frictionless, ensuring a seamless experience within the platform.

Competitive Analysis

I analysed similar Telegram mini-apps such as Notcoin, Hamster Kombat, and mini-app interfaces like Unibot. These products revealed key trends:

Simplicity is key, minimalist interfaces performed better within Telegram’s UI constraints

Simplicity is key, minimalist interfaces performed better within Telegram’s UI constraints

Simplicity is key, minimalist interfaces performed better within Telegram’s UI constraints

Incentive clarity and reward tracking were essential for user motivation

Incentive clarity and reward tracking were essential for user motivation

Incentive clarity and reward tracking were essential for user motivation

Onboarding drop-offs were common when initial interaction wasn't engaging or smooth


Onboarding drop-offs were common when initial interaction wasn't engaging or smooth


Onboarding drop-offs were common when initial interaction wasn't engaging or smooth


These insights helped shape the user experience strategy, ensuring that every touchpoint was designed for clarity and ease of use.

MY APPROACH TO THE DESIGN PROCESS

The project involved designing two core experiences, the Telegram mini-app for users and the web dashboard for advertisers. Here's how I approached each:

Telegram Mini-App Design

Designing inside Telegram’s mini-app constraints meant every interaction had to be purposeful. My key goals were to:

Create a frictionless onboarding experience that encouraged users to opt in, not bounce

1

Create a frictionless onboarding experience that encouraged users to opt in, not bounce

1

Create a frictionless onboarding experience that encouraged users to opt in, not bounce

1

Use card-based UI for displaying active campaigns and interests

2

Use card-based UI for displaying active campaigns and interests

2

Use card-based UI for displaying active campaigns and interests

2

Keep the interface accessible through tap-based interactions and large touch targets

3

Keep the interface accessible through tap-based interactions and large touch targets

3

Keep the interface accessible through tap-based interactions and large touch targets

3

Guide users gently with progressive disclosure, introducing only one action per screen

4

Guide users gently with progressive disclosure, introducing only one action per screen

4

Guide users gently with progressive disclosure, introducing only one action per screen

4

Web Application Design (Advertiser Portal)

The advertiser experience was designed to feel as straightforward as the user side but offer more power and insight:

A guided campaign creation wizard helps advertisers set budgets, target demographics, and define goals

1

A guided campaign creation wizard helps advertisers set budgets, target demographics, and define goals

1

A guided campaign creation wizard helps advertisers set budgets, target demographics, and define goals

1

Real-time previews show how ads will appear in the Telegram app

2

Real-time previews show how ads will appear in the Telegram app

2

Real-time previews show how ads will appear in the Telegram app

2

The analytics dashboard uses charts and cards to surface key insights like engagement and ROI

3

The analytics dashboard uses charts and cards to surface key insights like engagement and ROI

3

The analytics dashboard uses charts and cards to surface key insights like engagement and ROI

3

An integrated wallet management system allowed businesses to fund campaigns, track spending, and monitor wallet balances easily

4

An integrated wallet management system allowed businesses to fund campaigns, track spending, and monitor wallet balances easily

4

An integrated wallet management system allowed businesses to fund campaigns, track spending, and monitor wallet balances easily

4

The web app was designed using a modular system so it could scale with future features like team collaboration or audience segmentation.

OUTCOME

The Telegram mini-app successfully empowered users by letting them choose which ads to view and providing a real-time wallet to track their earnings. Meanwhile, the web platform enabled advertisers to seamlessly create targeted campaigns, monitor performance, and optimize budgets with ease.