Как создать приложение для розничной торговли
«Русский Разгуляй» — это не просто приложение для заказа продуктов. Это комплексное digital-решение, которое объединяет онлайн-витрину, систему лояльности, доставку и даже рекрутинг.

О проекте
Передо мной стояла задача разработать мобильное приложение для продуктового ритейлера, которое решало бы несколько бизнес-задач одновременно:
- Увеличить средний чек через персонализацию и программу лояльности
- Снизить нагрузку на колл-центр за счет удобного самообслуживания
- Привлечь сотрудников через встроенный рекрутинг
- Создать бесшовный опыт от выбора товара до получения заказа
Что получилось
В результате появилось приложение с полным циклом покупательского пути:
- Мультиканальная авторизация — вход через Telegram или по номеру телефона
- Умный каталог с продуманными фильтрами (особенно для винной категории)
- Геймифицированная программа лояльности «Балалайки» с кэшбеком и персональными скидками
- Гибкая система доставки с выбором временных слотов и зон
- B2B-блок — возможность устроиться на работу прямо из приложения
Роль и процесс
Я работал над проектом как продуктовый дизайнер — от исследования и CJM до финального UI и передачи в разработку. Особое внимание уделил микровзаимодействиям и состоянию ошибок (например, когда алкоголь не доставляется по закону).

Авторизация: выбор канала входа
Задача: снизить барьер входа в приложение и учесть предпочтения разной аудитории.
Решение:
- Splash-экран с фирменным паттерном в русском стиле
- Два способа входа: через Telegram (современный) и по номеру телефона (классический)
- Пошаговая инструкция для Telegram-авторизации вместо абстрактных призывов
- Поясняющий текст под каждой кнопкой для помощи в выборе
- Маска ввода телефона с автоматической цифровой клавиатурой
Вывод: Мультиканальная авторизация позволила охватить разную аудиторию — от tech-savvy до консервативных пользователей. Пошаговая инструкция снизила когнитивную нагрузку, а контекстная помощь увеличила конверсию на первом шаге.

Ввод данных: два сценария верификации
Задача: обеспечить безопасный и удобный вход в приложение через разные каналы.
Решение:
- Telegram-вход: пользователь вводит номер телефона и 4-значный код из бота — кросс-платформенная верификация
- Вход по телефону: автоматический звонок с кодом подтверждения (последние 4 цифры номера, с которого поступил звонок)
- Маска ввода телефона с форматированием +7 (999) 999-99-99
- Валидация полей в реальном времени: кнопка активируется только после заполнения
- Ссылка на альтернативный способ входа на каждом экране
- Цифровая клавиатура для быстрого ввода кода
Вывод: Два независимых сценария верификации повысили надежность системы и дали пользователю выбор. Сценарий с автозвонком оказался удобным для старшей возрастной группы — не нужно искать код в SMS, достаточно посмотреть на номер входящего.

Верификация и сбор данных: постепенное раскрытие
Задача: подтвердить номер телефона и собрать минимально необходимые данные для персонализации.
Решение:
- Прогрессивное раскрытие: разбили процесс на логические шаги — ввод телефона → подтверждение → заполнение профиля
- Инструкция перед действием: заранее объяснили, что отвечать на звонок не нужно, код — последние 4 цифры номера
- Разные состояния ввода: пустые ячейки для кода и заполненные (7-0-3-1) для наглядности
- Аварийные сценарии: таймер повторной отправки (53 сек), ссылка «Отправить снова», возможность сменить способ входа
- Прозрачность работы с данными: заголовок «Ваши данные в безопасности» снижает тревожность
- Гендерный выбор: переключатель пола с визуальными иконками (Ж/М)
- Два типа согласий: обязательное (обработка ПДн) и опциональное (уведомления) с пояснением «без спама»
Вывод: Пошаговый сценарий снизил когнитивную нагрузку — пользователь фокусируется на одном действии за раз. Четкая инструкция про автозвонок убрала страх пропустить звонок. Разделение согласий повысило доверие: пользователь понимает, на что подписывается.

Заполнение профиля и первый вход в приложение
Задача: завершить регистрацию и плавно перевести пользователя к основному функционалу.
Решение:
- Заполненная форма: предзаполненные поля (Александр Иванов, email, дата рождения) для быстрого прохождения
- Гендерный выбор: визуальные radio buttons с иконками Ж/М для персонализации предложений
- Прозрачность: два чекбокса с ясными формулировками — обязательное согласие и опциональная подписка
- Промо-баннер на главном: после регистрации пользователь сразу видит персонализированное предложение («День для себя» с пастой)
- Быстрый доступ к категориям: плитки категорий с фото на главном экране
- Блок «Лучшая цена»: выделение товаров со скидками для увеличения конверсии
- Поиск с первого экрана: строка поиска всегда доступна, при клике открывается полная клавиатура
- Навигация: 5 основных разделов (Главная, Каталог, Моя карта, Акции, Корзина) в таб-баре
Вывод: Плавный переход от регистрации к шопингу через промо-баннер снизил bounce rate. Пользователь сразу видит ценность приложения — персональные предложения и быстрый доступ к товарам. Табар с 5 ключевыми разделами упростил навигацию.

Каталог, поиск и соблюдение законодательства
Задача: обеспечить быструю навигацию по ассортименту и корректно обработать юридические ограничения на доставку алкоголя.
Решение:
- Витрина категорий: список с иконками для быстрого сканирования глазами, выделение промо-категорий («2025 Новый», «Выгодно!»).
- Поиск с подсказками: автокомплит запросов («Сырок», «Сыр творожный») и выдача результатов с фильтрами прямо в списке (Цена, Процент жира, Страна).
- Карточка товара в листинге: цена, название, метка «Лучшая цена» и крупная кнопка «В корзину» для быстрого добавления.
- Выбор магазина: отображение статуса («Открыто/Закрыто»), расстояния от пользователя и часов работы для каждого адреса.
- Комплаенс (алкоголь): модальное окно блокировки доставки алкоголя со ссылкой на ФЗ. Главное UX-решение — не просто запрещаем, а даем альтернативу (CTA «Оформить самовывоз»), чтобы не терять корзину.
Вывод: Гибкая система поиска и фильтров ускорила поиск товаров. Сценарий с ограничением доставки алкоголя реализован через альтернативу (самовывоз), что позволило соблюсти закон и не потерять конверсию в покупку.

Категория вина: глубокая фильтрация и age-gating
Задача: создать удобный каталог для сложной категории с большим количеством атрибутов (вино) и корректно работать с возрастными ограничениями.
Решение:
- Визуальная иерархия категорий: от общей категории «Вино» к подкатегориям (белые, красные, розовые, игристые, крепленые) с баннером-героем для создания настроения.
- Персистентное предупреждение 18+: красная плашка внизу экрана постоянно напоминает, что алкоголь не доставляется, с CTA «Оформить самовывоз».
- Мультипараметрическая фильтрация: три ключевых фильтра для вина — Цена, Сахар, Страна — отражают основные критерии выбора.
- Расширенный список стран: модальное окно с чекбоксами позволяет выбрать несколько стран происхождения (мультивыбор).
- Карточка товара в листинге: фото бутылки, цена, название, тип (сидр фруктовый ароматизированный), метка «Лучшая цена», кнопка «В корзину».
- Сортировка и рекомендации: блок «Разгуляй рекомендует» для персонализации выдачи.
Вывод: Глубокая фильтрация по странам и параметрам (сахар, цена) упростила выбор в сложной категории. Постоянное напоминание про age-restriction и альтернатива в виде самовывоза обеспечили комплаенс без потери продаж.

Чекаут: гибкие настройки доставки и оплата
Задача: минимизировать трение на финальном этапе и снизить тревожность перед оплатой.
Решение:
- Настройки доставки: текстовое поле для комментариев курьеру + тумблеры «Не звонить в дверь» и «Оставить у двери» для бесконтактного получения.
- Выбор оплаты: модальное окно поверх контекста заказа — пользователь не теряет из виду сумму.
- Валидация: кнопка оплаты активна только после выбора метода, чтобы избежать ошибок.
- Экран успеха: номер заказа, точный временной слот доставки и CTA «Перейти в каталог» для удержания.
Вывод: Прозрачный процесс оплаты без лишних редиректов. Опции бесконтактной доставки повысили конверсию у аудитории, заказывающей на дом. Экран успеха закрывает сделку и сразу возвращает пользователя в воронку покупок.

Платежи и программа лояльности: удержание через геймификацию
Задача: упростить привязку карт и сделать программу лояльности прозрачной и вовлекающей.
Решение:
- Интеграция со Сбербанком: готовая форма с валидацией полей (номер, срок, CVC) и логотипом банка для доверия.
- Лояльность в одном экране: QR-код для сканирования в магазине, текущая скидка (10%), баланс баллов («Балалаек»).
- История начислений: помесячная разбивка с цветовым кодированием — зелёный для начислений, красный для списаний.
- Персонализация: приветствие по имени («Рады Вас видеть, Андрей!») создаёт эмоциональную связь.
- Поддержка платёжных систем: логотипы МИР и VISA внизу формы для информирования о совместимости.
Вывод: Прозрачная история баллов и визуальное разделение начислений/списаний повысили доверие к программе лояльности. QR-код в профиле упростил использование карты в офлайн-магазинах, а персонализация усилила вовлечённость.

Программа лояльности: геймификация и прозрачность
Задача: повысить LTV через накопительную систему и максимально прозрачно объяснить пользователю правила игры.
Решение:
- Прогрессивная шкала скидок: визуализация уровней от 1% до 1% в зависимости от суммы покупок. Показываем текущий прогресс (13 450 ₽), чтобы мотивировать добить до следующего уровня.
- Динамический QR-код: обновление кода по таймеру (04:59) для безопасности списания баллов в офлайн-точках.
- Образовательный модал: всплывающее окно «Балалайки что это?» объясняет механику начисления и списания, снижая нагрузку на поддержку.
- Витрина акций: баннерная система с приоритецией — от сервисных услуг (доставка) до категорийных предложений (сыры со скидкой).
- Честные дисклеймеры: предупреждение «Скидка действует не на все товары» заранее снимает негатив на кассе.
Вывод: Прозрачная система уровней мотивирует пользователей увеличивать средний чек ради следующей ступени скидки. Динамический код обеспечил безопасность, а понятные правила программы лояльности повысили доверие к бренду.

Промо-контент и умная корзина
Задача: повысить ценность промо-предложений и корректно обработать смешанные корзины с юридическими ограничениями.
Решение:
- Образовательный контент в акциях: Страница акции содержит не только скидку, но и подробное описание (аромат, цвет, вкус). Это повышает воспринимаемую ценность товара и обосновывает покупку.
- Переключатель формата: Явный тогл «Доставка / Самовывоз» в шапке корзины с мгновенной валидацией адреса.
- Обработка ограничений (Alcohol): Если в корзине есть алкоголь, доставка блокируется. Модал объясняет причину (ФЗ) и предлагает альтернативу («Оформить самовывоз»), чтобы не потерять заказ целиком.
- Безопасное удаление: Паттерн «Safe Exit» в модальном окне очистки корзины. Кнопка «Оставить» выделена цветом, чтобы предотвратить случайное удаление всех товаров.
Вывод: Контентный подход к акциям увеличил конверсию в покупку промо-товаров. Гибкая логика корзины позволила соблюдать законодательство без потери продаж (конверсия в самовывоз вместо отказа от заказа).

Выбор адреса: валидация зоны доставки
Задача: предотвратить оформление заказа в недоступный район и упростить ввод данных для курьера.
Решение:
- Обработка ошибок: Модальное окно «Увы, в этот район не доставляем» с четким призывом изменить адрес.
- Визуализация: Карта с маркерами магазинов («P») помогает оценить расстояние до точки выдачи или склада.
- Сохраненные адреса: Список ранее введенных адресов с радио-кнопками для быстрого выбора (one-tap).
- Детальный ввод: Развернутая форма для нового адреса включает не только улицу и дом, но и подъезд, этаж, квартиру и код домофона — критично для успешной доставки «до двери».
Вывод: Ранняя валидация адреса (до чекаута) сэкономила время пользователей и снизила количество отмененных заказов из-за недоступности зоны. Детальная форма ввода минимизировала проблемы с поиском адреса курьером.

Коммуникация и пост-покупочный опыт
Задача: удержать пользователя после покупки, обеспечить прозрачность трат и упростить повторный заказ.
Решение:
- Сегментированные уведомления: Табы (Чеки, Промокоды, Акции, Новости) позволяют пользователю фильтровать информационный шум и находить нужное.
- Rich-контент в акциях: Вместо текста — визуальные баннеры с товаром и скидкой, что повышает CTR промо-материалов.
- Цифровой чек: Детализация покупки внутри приложения (НДС, сэкономлено с картой, начислено баллов). Экологично и удобно для бухгалтерии/возвратов.
- История заказов: Фильтрация по статусам (Выполняются, Полученные, Отмененные) и группировка по месяцам для быстрого сканирования.
- Быстрый доступ к данным: В карточке заказа сразу видны сумма, количество товаров, адрес и статус — не нужно проваливаться в детали.
Вывод: Прозрачность финансов (цифровые чеки с выделением выгоды) строит доверие к сервису. Удобная история заказов и сегментированные уведомления повышают Retention, стимулируя повторные покупки через персонализированные акции.

Управление заказами: повторная покупка и избранное
Задача: упростить повторные покупки и дать возможность сохранять товары для быстрого доступа.
Решение:
- Быстрый повтор заказа: Кнопка «Повторить заказ» в деталях заказа позволяет одним клипом добавить все товары из предыдущего заказа в корзину.
- Защита от ошибок: Модальные окна подтверждения для критичных действий (отмена/повтор заказа) с четкими CTA («Да»/«Нет»).
- Избранное с заметками: Возможность не только сохранять товары, но и добавлять персональные заметки («Добавить заметку» / «Посмотреть заметку») — полезно для запоминания деталей (например, «для мамы» или «на подарок»).
- Визуальная иерархия: Зачеркнутая старая цена и выделенная текущая (3399.99 ₽ вместо 3599.90 ₽) подчеркивают выгоду.
- Быстрое добавление: Кнопка «В корзину» прямо из списка избранного без провала в карточку.
Вывод: Функция повторного заказа увеличила частоту покупок у постоянных клиентов. Заметки в избранном персонализировали шопинг и упростили навигацию по сохраненным товарам. Подтверждение действий предотвратило случайные отмены заказов.

Оплата и система заметок
Задача: обеспечить прозрачный выбор способа оплаты и дать пользователям инструмент для сохранения важной информации о товарах.
Решение:
- Экран оплаты: Список методов с радио-кнопками для однозначного выбора. Отдельная группа для добавления новой карты выделена зеленым акцентом («Добавить карту»).
- Заметки в избранном: Возможность прикреплять текстовые заметки к товарам (например, юридические дисклеймеры или дегустационные заметки для вина).
- Контекст и навигация: В списке заметок есть фото товара, дата создания и ссылка «Перейти к товару» для быстрой навигации без поиска.
- Безопасность данных: Паттерн «Safe Delete» — при удалении всех заметок кнопка «Оставить» выделена как основная (красная), чтобы предотвратить случайную потерю данных.
- Редактирование: Удобный модал для просмотра и редактирования заметки без ухода со страницы избранного.
Вывод: Система заметок добавила ценность для сложной категории (вино), позволяя сохранять описание или ограничения прямо в профиле. Защитные паттерны в удалении снизили риск случайной потери пользовательского контента, а четкий экран оплаты уменьшил трение на финальном этапе.
Бизнес-результаты
- Конверсия в регистрацию: ↑ за счет мультиканальной авторизации
- Средний чек: ↑ благодаря прогрессивной системе скидок
- LTV: ↑ через программу лояльности и повторные заказы
- Нагрузка на поддержку: ↓ за счет прозрачных модалов и образовательного контента
Финальный вывод
«Русский Разгуляй» — это пример ecosystem-подхода к retail-приложению. Мы не просто сделали магазин в телефоне, а создали инструмент, который работает на удержание, лояльность и рекрутинг одновременно.
Ключевой успех проекта — в балансе между бизнес-задачами (продажи, LTV, комплаенс) и пользовательским опытом (простота, прозрачность, персонализация). Каждый экран решает конкретную задачу, а защитные паттерны предотвращают ошибки без фрустрации пользователя.
Tags In
Related Posts
Добавить комментарий Отменить ответ
Для отправки комментария вам необходимо авторизоваться.
Свежие записи
- Дизайн интернет-магазина для приложения химчистки «Диана»
- Дизайн игровой механики Heist: полный UX/UI кейс | Проектирование интерфейсов для мобильной игры
- Как создать идеальный input
- Как создать приложение для розничной торговли
- Как создать идеальную форму для сайта: разбираем на примере B2B-проекта для RDCentre.ru