USIZE

Ecommerce-платформа для бренда женской одежды plus size.

Роль

UX/UI Designer · Tilda / Low-code implementation

Зона ответственности

UX, UI, mobile, Tilda, интеграции, аналитика, запуск

EcommerceTildaCRM1CPaymentsAnalyticsMobile UXCatalog UX

Контекст

USIZE — бренд женской одежды plus size в ценовом сегменте выше среднего. Бренду нужен был сайт с нуля: не просто витрина, а полноценный интернет-магазин, который презентует бренд и проводит пользователя от выбора товара до покупки.

бренд

премиальная подача и доверие к продукту

каталог

быстрый вход в ассортимент и категории

размер

снятие сомнений перед покупкой

покупка

понятный путь от выбора до оплаты

CRM/1C

передача заказа в бизнес-системы

аналитика

события и данные по ecommerce-воронке

Задача

Запустить ecommerce-канал: каталог, карточки товаров, корзина, онлайн-оплата, передача заказов в Bitrix24, синхронизация с 1C, Telegram-коммуникации и аналитика ключевых действий.

каталогкарточки товаровкорзинаонлайн-оплатаBitrix241CTelegramМетрика

Как я понял задачу

Для plus size ecommerce важно не только показать красивую одежду. Пользовательнице нужно снять сомнения по размеру, посадке, наличию, оплате и возможности быстро задать вопрос. Поэтому фокус был не только на визуале, но и на карточке товара, выборе размера, состояниях интерфейса, mobile-сценарии и аналитике.

Размер и посадка

важно быстро снять сомнение перед покупкой.

Наличие

пользователь должен понимать, доступен ли товар и размер.

Mobile-покупка

основной сценарий должен работать удобно с телефона.

Быстрый вопрос

Telegram нужен как быстрый контакт без потери контекста.

Какие варианты рассматривал

Вариант 1. Самописный ecommerce-сайт

Плюс: максимальная гибкость по UX, логике каталога, карточке товара и аналитике. Минус: дольше и дороже в реализации.

Вариант 2. Стандартный Tilda-каталог

Плюс: быстро запускается. Минус: без UX/UI-доработок получается слишком базовый ecommerce-сценарий.

Выбрал третий вариант, потому что изначально рассматривался самописный подход, но в итоге был выбран более экономичный сценарий на Tilda с UX/UI-кастомизацией.

Что сделал

Спроектировал и реализовал:

структуру сайтакаталогкарточку товараmobile-сценарийвыбор размеракорзинуоплатусостояния карточки товарауведомленияTelegram как быстрый контактпередачу заказов в Bitrix24связку с 1Cцели в Яндекс МетрикеUI-kit компонентов

Состояния интерфейса

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

товар доступен

нет в наличии

размер не выбран

ошибка оформления

добавлено в избранное

добавлено в корзину

перейти в корзину

Принцип

каждое действие пользователя должно получать понятную обратную связь.

UI и Figma

Ecommerce UI

desktop-экраныmobile-экраныкаталогкарточка товара

Product actions

выбор размерауведомлениясостояния кнопокдобавление в корзину

System

UI-kitадаптивные версииcomponentsvariantsauto layoutсостояния компонентов

Figma как система

Для дальнейшего развития можно добавить variables и токены для цветов, типографики, отступов и статусов.

Как проверял

Основной ecommerce-flow

Перед запуском проверял каталог, карточку товара, выбор размера, корзину, оплату, mobile-сценарий, передачу заказа в Bitrix24, цели в Метрике и клики по Telegram.

01 catalog → product card
02 size select
03 add to cart
04 cart open
05 checkout start
06 payment
07 order to Bitrix24
08 analytics event

Edge cases

Размер и наличие

  • размер не выбран
  • товар нет в наличии
  • добавление в избранное

Заказ и CRM

  • добавление в корзину
  • передача заказа в Bitrix24
  • цели в Метрике

Контакты и каналы

  • клики по Telegram
  • mobile checkout
  • корректность статусов после оплаты

Метрики

Я отслеживал:

category_viewproduct_viewsize_selectadd_to_cartcart_opencheckout_startpurchasetelegram_clickout_of_stock_subscribepayment_errordesktop/mobile conversion

Результат

Было

у бренда не было полноценного интернет-магазина с каталогом, оплатой, CRM, 1C и аналитикой.

Стало

запущен ecommerce-канал, где пользователь может выбрать товар, размер, оформить заказ, оплатить покупку, а бизнес получает заказы и данные в свои системы.

Что бы развивал дальше · 11 | 12

анализ воронки после накопления данныхулучшение карточки товараподсказки по размеруанализ товаров с высоким просмотром и низкой покупкойA/B-тест CTAулучшение mobile checkoutперсональные рекомендации

Другие кейсы

Chat Leads

Lead management система для сайта с чат-виджетом, real-time оператором и админкой.

Подробнее

Migration Assistant Bot

Сценарный веб-чат для консультаций, заявок, покупки PDF-шаблонов и предоплаты услуг.

Подробнее