by Teyca
Олег Михайлов
UX + UI Дизайн
Контекст
Бизнесу нужен был способ быстро запускать программы лояльности без отдельного приложения. Решение должно работать прямо в Telegram и быть максимально простым для пользователя, с возможностью гибкой настройки со стороны клиента.
Что я сделал
Разобрал типовые сценарии пользователя: как получить карту, воспользоваться бонусами, оставить отзыв, пригласить друга
Сформировал структуру интерфейса, которая не ломает привычную логику Telegram (меню вверху, профиль сразу после входа, отзывы — встроены в поток)
Структура
Вход всегда начинается с карты лояльности, ведь пользователь в первую очередь пользуется приложением, чтобы списать бонусы с карты или показать ее кассиру, чтобы бонусы начислить.
После покупки появляется раздел с отзывами, чтобы на момент появления опции и пользователя уже был опыт, которым он готов поделиться.
Приглашение друга встроено как продолжение взаимодействия и бонусы за реферала отображаются прямо в профиле.
Заказ товаров, это отдельный сценарий, доступный не во всех проектах. Он запускается из раздела меню
Интерфейс визуально адаптируется под бизнес, а настройка внешнего вида осуществляется в личном кабинете Тейка
Осознанно отказался от сложных паттернов: весь функционал разместил в один экран глубины, без перегрузки
Исследования
Контекст и поведение пользователей
Интервью и опросы не проводились — был чёткий бриф и понимание, что пользователь уже находится в Telegram. Он не будет разбираться, если интерфейс перегружен всё должно быть доступно на первом экране или за одно действие.
Конкуренты
Аналоги были перегружены, с неадаптивным под клиента дизайном и странной логикой. Это стало ориентиром, от чего оттолкнуться. Хотелось сделать проще, чище и понятнее.
Чаще всего повторялись одни и те же проблемы:
Сложная логика навигации, не совпадающая с тем, как человек привык пользоваться Telegram. Меню внизу, скрытые кнопки, странные переходы — это ломает привычный опыт.
Неадаптивный интерфейс, ощущение, будто это временное решение: без визуальной иерархии, с перегруженными карточками, нечитабельными текстами.
Попытки встроить мессенджер в мессенджер — например, поддержка через чат внутри WebApp вместо использования обычного Telegram-чата. Это запутывает и создаёт конфликт сценариев.
Отсутствие кастомизации — или она есть только визуально, но не влияет на структуру и поведение интерфейса.
Что в итоге
Получилось универсальное мини-приложение, которое можно адаптировать под любой бизнес. Всё управляется из личного кабинета клиента. Интерфейс минималистичный, но функциональный, работает прямо в Telegram — без регистрации, загрузок и лишних шагов.
В кейсе ниже — полный скринкаст интерфейса.
Что в итоге
Экранов
Большая часть скрыта по NDA — Некоторые разделы не могут быть показаны публично по условиям соглашения с клиентом, но можно посмотреть уже готовый продукт:
User Interface
Дизайн в стиле Apple Wallet и Google Pay, но под Telegram
Детали
Меню разделов расположено сверху – аналогично папкам в Telegram
Заголовок виджета берётся из названия бота и настраивается в личном кабинете Тейка
Навигация продолжает логику Telegram
Я сознательно не стал выдумывать свою логику навигации и разместил его сверху, как в Telegram-папках. Все экраны находятся на одной глубине без вложенных вложений, которые Telegram всё равно не поддерживает.
Простые, но логичные иконки
понятные кнопки
Из этих деталей складывается универсальное приложение, которое способно адаптироваться под любой бизнес:
Строгий / Нежный / Недоступный / Бюджетный / Яркий / Зловещий / Для детей / Для взрослых
Сфера деятельности
не имеет значения —
важно только то, что с таким инструментом клиент этого бизнеса получает позитивный опыт, который владелец бизнеса или маркетолог может контролировать.
Как опыт пользователя контролируется бизнесом?
В личном кабинете Тейка имеется раздел с настройкой прилолжения и Телеграм-бота
Можно настроить внешний вид, основной язык приложения, текстовые сообщения, мотивацию, систему вознаграждений за различные действия пользователя, отображение товаров в меню, какая информация отображается на карте лояльности и т.д.