Кейсы

Кейс | Разработка личного кабинета для интернет-магазина косметики

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

Всем привет! На связи веб-студия Migas — мы занимаемся продуктовым дизайном и no-code разработкой уже 3 года. Сегодня мы покажем наш последний кейс по разработке личного кабинета для интернет-магазина на Tilda и расскажем, как no-code разработка меняет правила игры, делая клиентский сервис более доступным и эффективным для бизнеса.

О клиенте

«Все разные» — бренд салонов красоты в Екатеринбурге, а также крупный интернет-магазин косметики и средств для ухода за телом. Магазин предлагает уникальный ассортимент товаров и работает с брендами косметика класса — LUXE.

Задачи

Наша команда разработала интернет-магазин «Все разные» на Tilda с полным каталогом товаров. После старта онлайн-продаж и подтверждения спроса на продукцию, заказчица решила расширить функциональность сайта. Она хотела упростить оформление заказов и повысить LTV, поэтому обратилась к нам за разработкой личного кабинета. Это должно было не просто облегчить оформление покупок, а устранить «разрыв» на карте пользовательского пути и дать понимание, на каком этапе у потенциальных клиентов возникают трудности.

Почему улучшение пользовательского опыта важно для бизнеса?

Правильно выстроив стратегию управления клиентским опытом и оптимизировав процессы взаимодействия с покупателями, вы получите ряд преимуществ:
  • повышение LTV — прибыли, которую компания получает за все время взаимодействия с конкретным покупателем;
  • снижение Churn Rate — оттока пользователей;
  • повышение лояльности к бренду;
  • снижение затрат на обслуживание и маркетинг.
Это подтверждают многие исследования:
  • 86% покупателей готовы платить больше за хороший клиентский опыт. Например, в сегменте товаров класса люкс и сфере развлекательных услуг клиенты готовы платить на 13–18% больше изначальной стоимости.
  • Customer Experience влияет на импульсивные покупки — 49% клиентов совершают их после получения более персонализированного покупательского опыта.
  • Увеличение уровня удержания клиентов всего лишь на 5% может увеличить прибыль компании на 60–100%.
  • 75% потребителей с большей вероятностью совершат покупку в компании, которая знает их имя и историю покупок и рекомендует продукты на основе их предпочтений.
После детального обсуждения задач с клиентом мы выделили ключевые функции, которые нужно реализовать в личном кабинете:
  • вход + регистрация + восстановление пароля;
  • встроенный каталог товаров в личном кабинете;
  • история заказов;
  • бонусная система (списание и начисление бонусов);
  • профиль клиента;
  • редактирование профиля.

Когда важны и скорость, и качество

Заказчице было важно как можно быстрее внедрить личный кабинет в интернет-магазин, чтобы клиенты получили комфортную среду для покупок.
Наша команда предложила Express-разработку платформы за 12 дней. За этот срок мы разрабатываем и утверждаем дизайн-концепцию проекта, реализуем основной функционал и создаем документацию для передачи готового проекта заказчику. Использование наработок и бизнес-логики из предыдущих проектов позволяет снизить стоимость разработки в десятки раз и получить результат всего за пару недель.
Однако не все задачи можно решить таким быстрым способом. Если после изучения проблем и целей заказчика мы понимаем, что готовые решения не подойдут или не принесут ему прибыль, то предлагаем кастомную разработку. Подробнее об Express-разработке можно узнать у меня в Telegram – @mirowdav

Решение задачи

Выбор дизайн-концепции

Мы взяли за основу дизайн-проект интернет-магазина «Все разные», чтобы пользователь находился визуально в одном пространстве. Разработали интерактивный UX/UI-дизайн интерфейса в Figma и подготовили дизайн-проект для передачи в верстку.
Дизайн-проект в Figma

Стек для no-code разработки

  • Tilda.cc — CMS-система для разработки клиентской стороны личного кабинета.
  • AirTable.com — база данных для хранения информации о клиентах, товарах, заказах и т. д.
  • Make.com — сервис для построения бизнес-логики и передачи данных из Tilda в базу данных AirTable.
  • Collabza.ru — сервис для передачи динамического контента из AirTable на клиентскую сторону личного кабинета.

Frontend-разработка

Сверстали семь страниц интерфейсов на Tilda с адаптацией под разные разрешения: 320×480, 480×960, 960×1200, 1200×1920. Подключили восемь модификаций и внедрили более 1000 строк JavaScript, HTML и CSS кода для стилизации элементов и увеличения функциональности платформы.
Страницы платформы созданные на Tilda

Backend-разработка

Описали и настроили структуру баз данных в AirTable, чтобы эффективно и структурировано хранить данные о клиентах, заказах и бонусах. Разработали бизнес-логику и автоматизацию событий в Make при передаче данных из Tilda в нашу базу данных.
База данных AirTable – таблица «Пользователи»
Бизнес-логика платформы в сервисе Make

Подключение интеграций

Подключили плавную передачу динамических данных из AirTable в личный кабинет пользователя с помощью шести интеграций в сервисе Collabza.
Интеграция базы данных с личным кабинетом в сервисе Collabza

Тестирование и передача проекта

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

Результаты

Мы реализовали полный список функционала личного кабинета за 72 часа. Теперь клиенты с доступом к личному кабинету могут:
— забыть о постоянном вводе личных данных в корзине, их запомнит система;
— получить преимущества программы лояльности: приветственный бонус, накопление + списание бонусных баллов с каждой покупки;
— отслеживать информацию о своих заказах и статусе доставки;
— управлять профилем и своими данными на сайте;

Также пользователю необязательно создавать профиль вручную: если оформить заказ на сайте — личный кабинет создастся автоматически;
Каталог товаров
История заказов


Команда Migas.Studio может разработать личный кабинет, сайт, интернет-магазин или другой проект для вашего бизнеса с помощью nо-code решений. Если хотите проконсультироваться или задать вопросы, пишите в Telegram — Давид Миров
Главная / Блог / Кейс | Разработка личного кабинета для интернет-магазина косметики
2024-04-21 00:38