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

«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 по номеру телефона и задает доступ к стартовым промокодам. Если доступа нет, то автоматически стирает промокод и показывает ошибку.