Продуктовый дизайн / CASE STUDY

All in One

Telegram Mini App для покупки абонементов в спортзалы: полное управление занятиями, записью и подпиской

Моя рольДизайн представленных экранов

TOOLS / PRACTICEUX/UI · Telegram Mini App · UI Kit · CJM · User Flow

Формат кейсаСценарии · экраны · UI kit

INTERFACE DESIGN

Спроектировал интерфейс

Мой вклад — дизайн представленных экранов и сценариев.

01UX02UI03SYSTEM

В этом проекте

Сценарии
Экраны
Визуальный язык

Разобрать дизайн ↓

All in One / Продуктовый дизайн

Задача

Клиент хотел создать аналог 1fit — платформу для покупки абонементов в спортзалы — но с принципиально другим каналом: не отдельное приложение, а Telegram Mini App.

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

Экраны отражают мой вклад в проект. Другие части действующего продукта могли быть созданы командой.

01 / MEMBERSHIP

Абонемент начинается с понятного выбора

После исследования были выстроены CJM и User Flow. В интерфейсе путь начинается с выбора тарифа, затем пользователь отмечает залы в пределах пакета. Счётчик «Выбрано 1 из 4» делает ограничение видимым прямо в момент выбора.

02 / PAYMENT

Сумма и способ оплаты — до подтверждения

Банковская карта и Kaspi представлены отдельными действиями. Промокод включается переключателем; скидка и итог показываются отдельными строками. Экран связывает выбранный абонемент с конкретной суммой к оплате.

03 / DAILY USE

После покупки — ежедневный инструмент

На главном экране статус абонемента и срок действия находятся над каталогом залов. Рядом доступны код, поиск, категории и закладки. Кейс охватывает не только оплату: в исходном проекте проработаны запись, перенос, отмена и управление абонементом.

04 / UI KIT

Компоненты для мобильного продукта

Поля ввода и варианты кнопок собраны в UI kit. Для Telegram Mini App это помогает поддерживать последовательность на компактных экранах: один язык действий, состояний и форм. Ниже показаны исходные компоненты файла.