Дизайн приложения для сети 5LB
Сеть 5LB продаёт спортивное питание и витамины. Мы разработали дизайн приложения, которое открывается прямо в Telegram: каталог, оформление заказа и бонусные карты связаны в один путь покупателя. Приложение запущено.
Связать покупку, заказ и бонусы в один путь
В ассортименте сети — спортивное питание, витамины, напитки и аксессуары многих брендов. Покупателю нужно быстро найти товар, оформить заказ и понять, что он получит за покупку.
Дизайн должен был сделать этот путь понятным на маленьком экране и дать повод вернуться в приложение за новыми покупками. Приложение работает внутри Telegram: покупателю не нужно ничего скачивать, достаточно открыть бота сети.
Приложение отвечает на четыре вопроса покупателя:
- что выбрать и где это найти?
- сколько стоит товар и что в нём?
- как получить заказ — самовывозом или доставкой?
- что я получу за покупки и как использовать бонусы?
Разложили приложение на пять разделов
Нижняя панель держит главные действия под рукой: главная, поиск, акции, корзина и профиль. Покупатель в любой момент может перейти к каталогу, посмотреть бонусы или вернуться к заказу.
5
разделов в нижней панели: главная, поиск, акции, корзина, профиль
4
шага от выбора до заказа: каталог, карточка товара, корзина, оформление
3
варианта карты лояльности в профиле
Главная
Крупные промоблоки, новости сети и подборки товаров: отсюда ведут в акции и бонусы.
Каталог и поиск
Поиск, подборки, категории и бренды на одном экране.
Карточка товара
Цена, свойства, описание и отзывы.
Корзина и заказ
Выбор товаров, промокод, самовывоз или доставка и итог.
Профиль и карты
Бонусные карты, правила их использования и приглашение друга.
Провели покупателя от каталога до заказа
Каталог начинается с поиска и подборок, ниже — категории и бренды. Из каталога покупатель открывает карточку: цена, свойства, описание и отзывы. В корзине можно отметить товары для заказа, ввести промокод и увидеть итог. При оформлении выбирает самовывоз или доставку.
Цены, акции и данные профиля на экранах — из макета.
Нажмите на экран, чтобы открыть его целиком.
Вынесли акции и бонусы в отдельные экраны
Промоакции собраны в отдельном разделе, а с главного экрана к ним ведут крупные блоки. Отдельные экраны объясняют, как работает бонусная программа и как пригласить друга.
Объяснили бонусы пятью слайдами для покупателей
Покупатель попадает в приложение через Telegram-бот сети: нажимает «Старт», затем «Открыть 5lb WebApp». Чтобы он не потерялся на первом шаге, мы оформили пять слайдов-инструкций: как получить приветственные бонусы, как показать карту на кассе и как получить бонусы после покупки.
Слайд открывает серию: четыре вопроса, на которые отвечают остальные слайды, и бот сети @pro_5lb_bot. Справа на слайде — главный экран приложения с бонусной картой.
Бот, кнопка «Открыть 5lb WebApp», вкладка «Профиль» и «Зарегистрироваться». Только имя и телефон, без паролей.
После входа вверху экрана появляется баннер «Забери подарок»: колесо разыгрывает до 10 000 приветственных бонусов.
Цифровая карта с QR-кодом и балансом бонусов, её можно добавить в Apple Wallet. Ниже в списке — магазины, история покупок, контакты, «Стать партнёром» и «Пригласи друга».
После покупки бот присылает чек и кнопку «Крутить рулетку». Колесо отдаёт до 110 % кэшбэка бонусами.
Листайте стрелками или свайпом. Нажмите на верхнюю карточку, чтобы открыть её целиком.
Показали три варианта карты лояльности
В профиле — базовая, партнёрская и карта основателя. Варианты различаются цветом и содержанием экрана: у партнёрской карты бирюзовый акцент, у остальных — оранжевый. QR-код на карте всегда на виду.
Выбрали тёмную основу и оранжевые акценты
Тёмная основа связывает каталог, корзину и профиль. Тёплые градиенты и крупные промоблоки делают приложение узнаваемым в разных сценариях.
Тёмная основа
Единый фон для каталога, корзины и профиля: товары и промоблоки читаются ярче.
Оранжевый
Выделяет действия, цены и бонусные предложения.
Бирюзовый
Отличает партнёрскую карту от остальных вариантов.
Приложение получило единый интерфейс покупок и бонусов
В проект вошёл дизайн главного экрана, каталога, карточки товара, корзины и оформления заказа, разделов акций и бонусов, приглашения друга, трёх вариантов карты лояльности и пяти слайдов-инструкций по бонусам.
Экраны связаны одним визуальным языком и показывают весь путь покупателя: от выбора товара до возврата за бонусами.
Маркетинг этой же сети — в отдельном кейсе: Кейс 5LB.
Обсудим приложение для вашей компании
Расскажите, что вы продаёте и как покупатели выбирают товар сейчас. Обсудим экраны, путь от каталога до заказа и программу лояльности. Дизайн приложения можно заказать отдельным проектом.
Статьи и инсайты
Разбираем рынок, цифры и решения: то, что мы сами применяем в проектах.
Стратегия роста и стратегия эффективности: чем они отличаютсяУ бизнеса есть два способа увеличить прибыль: принести в систему больше денег или меньше терять внутри неё.
Спрос на медицинские услуги: как его замерить и что это меняетКарта рынка вместо технической таблицы: какие услуги уже ищут и где спрос ближе к записи.
Два закона, по которым живёт маркетингПочему одни усилия дают результат, а другие не дают его никогда.
Что происходит с компанией, которая отключила системный маркетинг ради экономииКлиент работал с нами год: сайт, реклама, поиск, работа с базой. Что стало с заявками после отключения.
GEO-оптимизация: что работает в нейропоиске, а что вам продаютЧто на самом деле влияет на цитирование в ответах нейропоиска, а что просто продают как услугу.