«Best For Friend» — интернет-магазин, предлагающий натуральное питание для собак и кошек. Компания производит продукцию из натуральных ингредиентов под собственным брендом.
Яна — сооснователь бренда «Best For Friend» написала нам с таким сообщением 👇🏼
ЗАДАЧА
Мы провели 1 созвон с основателями магазина, обсудили с какими трудностями они сталкиваются, что они хотят от личного кабинета и какие решения им предлагали другие студии. Мы предложили использовать подход no-code разработки, чтобы получить тот же самый функционал и UX/UI, вместо классической разработки / на сложных фреймворках. Мы выделили самые интересные и эффективные функции, которые влияют на повторные покупки, средний чек заказа, лояльность к бренду и успешный пользовательский опыт.
ЧТО БЫЛО СДЕЛАНО
Отрисовали эскзиз прототипа и создали интерактивный дизайн в Figma. Подготовили дизайн-проект для передачи в разработку;
Сверстали дизайн-проект на Tilda с адаптацией (320 — 1920px), подключили модификации Nolim и написали дополнительный HTML, CSS, JS код для улучшения работы платформы;
Разработали структуру базы данных в Airtable и подключили интеграции Collabza для передачи данных из базы в личный кабинет на Tilda;
Собрали сценарий в Make для регистрации, редактирования профиля, покупки, создания / редактирования / удаления адреса;
Протестировали формы приёма и корректность отображения данных в ЛК.
Результат
Вход в аккаунт
Регистрация
Восстановление пароля
Профиль
Главная страница личного кабинета включает в себя личную информацию клиента, список его адресов доставки, количество заказов и настройки профиля.
Раздел «Мои заказы»
Список заказов выглядит как небольшое превью, где есть № Заказа, Дата, Первый товар, количество товаров в заказе, стоимость и кнопки «Повторить заказ» и «Подробнее».
Функция «Повторить заказ» добавит все товары автоматически в корзину, учитывая:
Название
Фото
Количество
Опции
Остаток
Цена.
Если товар недоступен на складе, то система исключит этот товар и не даст добавить его в корзину.
Если заказов еще нет, то отображается блок заглушка:
Страница заказа
Клиент видит подробную информацию о своем заказе:
№ Заказа
Дату
Состав заказа
Стоимость заказа
Информация о доставке
Кнопки «Повторить заказ» и «Написать в поддержку»
Бонусная система
Система лояльности включает в себя 4 статуса бонусной карты. На странице можно в удобном формате увидеть всю информацию по своей карте, а именно:
ProgressBar: визуализаия на какую сумму осталось совершить покупок, для перехода на следущий статус
История списаний / начислений
Баланс
Кэшбек в %
Сгорание бонусов
Через 60 дней без заказов, система автоматически списывает весь баланс бонусов с карты клиента и отображает это в истории списаний.
Применение бонусов в корзине
Клиенты могут оплатить бонусами до 97% заказа своими бонусами. Также была сохранена возможность использовать промокод.
Ограничение повторного использования промокода
Система определяет клиента через Airtable по номеру телефона и задает доступ к стартовым промокодам. Если доступа нет, то автоматически стирает промокод и показывает ошибку.