Telegram Mini App

Mini App

Loyalty

Card

by Teyca

Олег Михайлов

UX + UI Дизайн

Контекст

Бизнесу нужен был способ быстро запускать программы лояльности без отдельного приложения. Решение должно работать прямо в Telegram и быть максимально простым для пользователя, с возможностью гибкой настройки со стороны клиента.

Что я сделал

Разобрал типовые сценарии пользователя: как получить карту, воспользоваться бонусами, оставить отзыв, пригласить друга

Сформировал структуру интерфейса, которая не ломает привычную логику Telegram (меню — вверху, профиль — сразу после входа, отзывы — встроены в поток)

Осознанно отказался от сложных паттернов: весь функционал разместил в один экран глубины, без перегрузки

Основной UI построен по принципам Apple Wallet / Google Pay, чтобы визуально вызывать доверие и быть универсальным

Собрал интерактивный прототип, отрисовал весь UI и передал в разработку

Что в итоге

Получилось универсальное мини-приложение, которое можно адаптировать под любой бизнес. Всё управляется из личного кабинета клиента. Интерфейс минималистичный, но функциональный, работает прямо в Telegram — без регистрации, загрузок и лишних шагов.
В кейсе ниже — полный скринкаст интерфейса.

Всего 48 экранов

Но часть экранов скрыта по NDA — Некоторые разделы не могут быть показаны публично по условиям соглашения с клиентом. Ознакомьтесь с продуктом

Попробовать

UI

Дизайн в стиле Apple Wallet и Google Pay, но под Telegram

Детали

Меню разделов расположено сверху – аналогично папкам в Telegram

Заголовок виджета берётся из названия бота и настраивается в личном кабинете Тейка

Простые, но логичные иконки

Простые, но логичные иконки

понятные кнопки

Из этих деталей складывается универсальное приложение, которое способно адаптироваться под любой бизнес:

Строгий / Нежный / Недоступный / Бюджетный / Яркий / Зловещий / Для детей / Для взрослых

Сфера деятельности  не имеет значения —
важно только то, что с таким инструментом клиент этого бизнеса получает позитивный опыт, который владелец бизнеса или маркетолог может контролировать.

Как опыт пользователя контролируется бизнесом?

В личном кабинете Тейка имеется раздел с настройкой прилолжения и Телеграм-бота

Можно настроить внешний вид, основной язык приложения, текстовые сообщения, мотивацию, систему вознаграждений за различные действия пользователя, отображение товаров в меню, какая информация отображается на карте лояльности и т.д.

Карта лояльности –
Отображает бонусы, QR-код и детали.