«История заказов, бонусная система и профиль» — как мы улучшили сайт интернет-магазина на Tilda

Всем привет! На связи Давид — специалист по разработке личных кабинетов на Tilda. Сегодня покажу мой свежий проект и расскажу, как с помощью no-code можно прокачать функционал интернет-магазина.

«История заказов, бонусная система и профиль» — как мы улучшили сайт интернет-магазина на Tilda

О клиенте

Silky Drum — компания по обжарке кофе, специализирующаяся на зернах премиального качества. Команда лично отбирает зерно на фермах в Гондурасе, Колумбии и Эфиопии, выстраивая прямое сотрудничество с фермерами. Все процессы — от закупки до обжарки и упаковки — находятся под их контролем, что обеспечивает стабильное качество и прозрачность происхождения продукта.

Задача

Я провел общий созвон с основателями магазина, на котором обсудил текущие трудности и их ожидания от личного кабинета. После встречи я подготовил и отправил три варианта функционала, каждый из которых решал поставленные задачи. Совместно с клиентом мы выбрали оптимальное решение и перешли к проработке технического задания.

На этом этапе я учел технические особенности сайта и описал подробную логику работы личного кабинета. От первого касания до подписания договора прошло всего 10 дней.

В процессе разработки я тесно работал с дизайнером компании, чтобы создать уникальный UX/UI дизайн, органично сочетающийся с фирменным стилем бренда.

<i>Дизайн-проект в Figma</i>
Дизайн-проект в Figma

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

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

Итоговый результат

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

«История заказов, бонусная система и профиль» — как мы улучшили сайт интернет-магазина на Tilda

Регистрация

«История заказов, бонусная система и профиль» — как мы улучшили сайт интернет-магазина на Tilda

Мои заказы

Раздел показывает последние оформленные заказы. Каждая карточка включает в себя номер и дату заказа, фото товаров, стоимость и кнопку для перехода на страницу заказа.

«История заказов, бонусная система и профиль» — как мы улучшили сайт интернет-магазина на Tilda

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

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

«История заказов, бонусная система и профиль» — как мы улучшили сайт интернет-магазина на Tilda

Программа лояльности

Программа лояльности включает 4 уровня, на каждом из которых клиент получает персональную скидку: 0, 10, 15 или 20%. Помимо персональной скидки, клиент может получить бонусы за разные события: регистрация, день рождение и др. Бонусы сгорают автоматически через 180 дней без новых заказов.

«История заказов, бонусная система и профиль» — как мы улучшили сайт интернет-магазина на Tilda

В заказе возможно использовать только 1 вид скидки: промокод / персональная скидка / бонусы. Для активации достаточно кликнуть на нужную кнопку.

«История заказов, бонусная система и профиль» — как мы улучшили сайт интернет-магазина на Tilda

Профиль

Профиль клиента включает в себя персональные данные пользователя и кнопки управления: настройки, изменение пароля и выход из аккаунта.

«История заказов, бонусная система и профиль» — как мы улучшили сайт интернет-магазина на Tilda

Настройки профиля

«История заказов, бонусная система и профиль» — как мы улучшили сайт интернет-магазина на Tilda

Какой результат получили

С запуском личного кабинета Silky Drum смог упростить коммуникацию с клиентами и повысить лояльность к бренду — благодаря продуманной бонусной и скидочной системе.

Материал создан исключительно в образовательных целях — чтобы поделиться опытом и разобрать актуальные решения для сайтов на Tilda. Если остались вопросы или хочется обсудить — пиши в Telegram.
1
Начать дискуссию