«История заказов, бонусная система и профиль» — как мы улучшили сайт интернет-магазина на Tilda
Всем привет! На связи Давид — специалист по разработке личных кабинетов на Tilda. Сегодня покажу мой свежий проект и расскажу, как с помощью no-code можно прокачать функционал интернет-магазина.
О клиенте
Silky Drum — компания по обжарке кофе, специализирующаяся на зернах премиального качества. Команда лично отбирает зерно на фермах в Гондурасе, Колумбии и Эфиопии, выстраивая прямое сотрудничество с фермерами. Все процессы — от закупки до обжарки и упаковки — находятся под их контролем, что обеспечивает стабильное качество и прозрачность происхождения продукта.
Задача
Я провел общий созвон с основателями магазина, на котором обсудил текущие трудности и их ожидания от личного кабинета. После встречи я подготовил и отправил три варианта функционала, каждый из которых решал поставленные задачи. Совместно с клиентом мы выбрали оптимальное решение и перешли к проработке технического задания.
На этом этапе я учел технические особенности сайта и описал подробную логику работы личного кабинета. От первого касания до подписания договора прошло всего 10 дней.
В процессе разработки я тесно работал с дизайнером компании, чтобы создать уникальный UX/UI дизайн, органично сочетающийся с фирменным стилем бренда.
Что было сделано
- Разработал уникальный UX/UI дизайн в Figma с анимацией. Подготовил дизайн-проект для передачи в разработку;
- Сверстал дизайн-проект на Tilda с адаптацией (320 — 1920px), подключил модификации и написал дополнительный HTML, CSS, JS код для улучшения работы платформы;
- Разработал базу данных и подключил интеграции Collabza для передачи данных из базы в личный кабинет на Tilda;
- Собрал сценарий в Make для регистрации, редактирования профиля, покупки, списания бонусов;
- Протестировал работу кабинета и корректность отображения данных.
Итоговый результат
Вход в аккаунт
Регистрация
Мои заказы
Раздел показывает последние оформленные заказы. Каждая карточка включает в себя номер и дату заказа, фото товаров, стоимость и кнопку для перехода на страницу заказа.
Страница заказа
Страница с детальной информацией по заказу. Клиент видит все данные, что вводил при оформлении заказа в корзине: контактные данные, способ и адрес доставки, комментарий, состав и детализацию стоимости.
Программа лояльности
Программа лояльности включает 4 уровня, на каждом из которых клиент получает персональную скидку: 0, 10, 15 или 20%. Помимо персональной скидки, клиент может получить бонусы за разные события: регистрация, день рождение и др. Бонусы сгорают автоматически через 180 дней без новых заказов.
В заказе возможно использовать только 1 вид скидки: промокод / персональная скидка / бонусы. Для активации достаточно кликнуть на нужную кнопку.
Профиль
Профиль клиента включает в себя персональные данные пользователя и кнопки управления: настройки, изменение пароля и выход из аккаунта.
Настройки профиля
Какой результат получили
С запуском личного кабинета Silky Drum смог упростить коммуникацию с клиентами и повысить лояльность к бренду — благодаря продуманной бонусной и скидочной системе.
Материал создан исключительно в образовательных целях — чтобы поделиться опытом и разобрать актуальные решения для сайтов на Tilda. Если остались вопросы или хочется обсудить — пиши в Telegram.