Made on Collabza

Личный кабинет для интернет-магазина натурального питания для собак и кошек

Интернет-магазины Топ кейсы
«Best For Friend» — интернет-магазин, предлагающий натуральное питание для собак и кошек. Компания производит продукцию из натуральных ингредиентов под собственным брендом.
Яна — сооснователь бренда «Best For Friend» написала нам с таким сообщением 👇🏼

Задача:

Мы провели 1 созвон с основателями магазина, обсудили с какими трудностями они сталкиваются, что они хотят от личного кабинета и какие решения им предлагали другие студии. Мы предложили использовать подход no-code разработки, чтобы получить тот же самый функционал и UX/UI, вместо классической разработки / на сложных фреймворках. Мы выделили самые интересные и эффективные функции, которые влияют на повторные покупки, средний чек заказа, лояльность к бренду и успешный пользовательский опыт.

Что было сделано:

  1. Отрисовали эскзиз прототипа и создали интерактивный дизайн в Figma. Подготовили дизайн-проект для передачи в разработку;
  2. Сверстали дизайн-проект на Tilda с адаптацией (320 — 1920px), подключили модификации Nolim и написали дополнительный HTML, CSS, JS код для улучшения работы платформы;
  3. Разработали структуру базы данных в Airtable и подключили интеграции Collabza для передачи данных из базы в личный кабинет на Tilda;
  4. Собрали сценарий в Make для регистрации, редактирования профиля, покупки, создания / редактирования / удаления адреса;
  5. Протестировали формы приёма и корректность отображения данных в ЛК.

Результат.

Вход в аккаунт:

Регистрация:

Восстановление пароля:

Профиль:

Главная страница личного кабинета включает в себя личную информацию клиента, список его адресов доставки, количество заказов и настройки профиля.

Раздел «Мои заказы»:

Список заказов выглядит как небольшое превью, где есть № Заказа, Дата, Первый товар, количество товаров в заказе, стоимость и кнопки «Повторить заказ» и «Подробнее»
Функция «Повторить заказ» добавит все товары автоматически в корзину, учитывая:

  • Название
  • Фото
  • Количество
  • Опции
  • Остаток
  • Цена.

Если товар недоступен на складе, то система исключит этот товар и не даст добавить его в корзину.

Если заказов еще нет, то отображается блок заглушка:

Страница заказа:

Клиент видит подробную информацию о своем заказе:

  • № Заказа
  • Дату
  • Состав заказа
  • Стоимость заказа
  • Информация о доставке
  • Кнопки «Повторить заказ» и «Написать в поддержку»

Бонусная система:

Система лояльности включает в себя 4 статуса бонусной карты. На странице можно в удобном формате увидеть всю информацию по своей карте, а именно:

  • ProgressBar: визуализаия на какую сумму осталось совершить покупок, для перехода на следущий статус
  • История списаний / начислений
  • Баланс
  • Кэшбек в %

Сгорание бонусов:

Через 60 дней без заказов, система автоматически списывает весь баланс бонусов с карты клиента и отображает это в истории списаний.

Применение бонусов в корзине:

Клиенты могут оплатить бонусами до 97% заказа своими бонусами. Также была сохранена возможность использовать промокод.

Ограничение повторного использования промокода:

Система определяет клиента через Airtable по номеру телефона и задает доступ к стартовым промокодам. Если доступа нет, то автоматически стирает промокод и показывает ошибку.

Адреса доставки (Добавление, Редактирование, Удаление):

Сохраненный адрес в корзине:

Можно выбрать один из сохраненных адресов

Либо ввести новый адрес

Предзаполнение личных данных в корзине:

Контакты: