Задача:
Александр — основатель компании Salon de THÉ, написал мне в Telegram для консультации и подбора функционала, который улучшит их бизнес-процессы. Мы обсудили множество функций и сосредоточились на тех, которые решат 2 ключевые задачи:
Задача 1: Удобный и гибкий процесс оформления заказов. Ранее покупатели получали скидку 5% после первого заказа, но для её применения приходилось указывать карту лояльности, а затем ждать ссылку для оплаты на почту. Мы предложили автоматизировать этот процесс: скидка будет применяться в корзине автоматически, если клиент авторизован. Помимо этого решили внедрить функцию сохранения адресов доставки, чтобы клиентам не приходилось вводить адрес каждый раз заново.
Задача 2: Персонализированный кабинет покупателя. Профиль и история заказов давно стали неотъемлемой частью каждого интернет-магазина. Такие решения помогают бизнесу создать более комфортную атмосферу для общения покупателя с брендом.
Что было сделано:
- Разработали интерактивный UX/UI Дизайн в Figma и собрали UI-Kit;
- Сверстали дизайн-проект на Tilda с адаптацией (320px — 1920px) и подключили модификации от Nolim + написали кастомные JavaScript коды;
- Разработали базу данных в Airtable и подключили интеграции Collabza для передачи данных в личный кабинет на Tilda;
- Собрали сценарий в Make для регистрации, настройки профиля, управления адресами и оформления покупок;
- Протестировали формы приёма данных и корректность отображения данных в кабинете.
Результат:
Вход в аккаунт:
![](https://static.tildacdn.com/tild3364-3734-4031-a331-623239646562/Frame_630.png)
Регистрация:
![](https://static.tildacdn.com/tild6535-3038-4137-b537-383266653230/Frame_631.png)
Восстановление пароля:
![](https://static.tildacdn.com/tild6562-3166-4233-b965-316339343563/Frame_632.png)
Раздел «Профиль»:
Главная страница личного кабинета включает в себя личную информацию о клиенте, список его адресов доставки, количество заказов и настройки профиля.
![](https://static.tildacdn.com/tild3533-3834-4535-a662-336431306236/Frame_633.png)
Персональная скидка 5% на всю корзину применяется клиенту по количеству заказов. Если при регистрации у клиента 0 заказов, то будет одно уведомление. Если 1 заказ и более, то другое.
![](https://static.tildacdn.com/tild6566-3332-4030-b364-656465623830/Frame_633_1.png)
Управление адреса работает за счет 3 функциональных форм: Добавить, Редактировать и Удалить адрес. Все формы имеют обработичики ошибок и окна успеха, что дает клиентам бесшовный опыт пользования ЛК.
![](https://static.tildacdn.com/tild3530-6266-4363-b934-366630386665/image_603.png)
Раздел «Настройки профиля»:
В специальном Pop-up окне клиент может изменить личные данные, которые сразу обновятся в профиле. Здесь же расположена кнопка для смены пароля, чтобы управление аккаунтом было максимально удобным и находилось в одном месте.
![](https://static.tildacdn.com/tild3130-6531-4761-b862-663564633039/Frame_632_1.png)
Раздел «Мои заказы»:
Раздел показывает клиентам ключевую информацию по заказу, однако мы решили пойти дальше и сделали информативное Pop-up окно, которое будет динамически показывать всю информацию по заказу. Это позволит клиенту переключаться между заказами в 2 клика, не переходя на другие страницы.
![](https://static.tildacdn.com/tild6562-3662-4365-a265-393731376464/Frame_632_2.png)
Информация по заказу:
![](https://static.tildacdn.com/tild6266-3562-4433-a330-653837303734/Frame_631_1.png)
Контакты:
![](https://static.tildacdn.com/tild3233-6439-4832-b238-316331663236/Frame_571.png)