Расскажем как мы создали интернет‑магазин для поставщика итальянской стоковой пряжи: проработали сложную структуру ассортимента, настроили автоматизацию учета и продаж, вывели ресурс в топ поисковых систем по ключевым запросам ниши. 

• Сделать умный каталог с фильтрами (состав, метраж, цвет, тип пряжи, и т. д.)

• Сделать быстрый и удобный процесс заказа товаров на сайте

• Интегрировать платежную систему (paymaster) и систему доставки

• Сделать простой и удобный личный кабинет

• Позволить легко совершать повторные покупки

Этап 1. Маркетинг

• провели интервью с клиентом

• проанализировали маркетинговые и рекламные материалы

• составили карту пользовательских сценариев (например, «рукодельница ищет пряжу для нового изделия», «оптовый покупатель хочет заказать пряжу для своего магазина»)

• выявили ключевое преимущество — прямые контракты с итальянскими фабриками и стабильные остатки

• изучили более 10 сайтов конкурентов и то, как они привлекают внимание к своим продуктам

• выявили их слабые места — неудобные фильтры, слабая визуализация свойств пряжи

• составили список из 27 идей 

• исследование ЦА

• исследование компании

• заложили основу для сайта, который закроет страхи клиентов и подчеркнет преимущества оригинальной итальянской пряжи

Этап 2. Проектирование

На основе аналитики спроектировали структуру интернет-магазина и ключевые функции, чтобы клиенту было удобно выбирать товары, а бизнесу — получать заказы без лишних потерь на пути пользователя.

• Главная страница.

• Каталог товаров: фильтры, сортировка.

• Страница категории товара (например, «пряжа с шелком»).

• Страница поиска по категориям с удобными фильтрами по типу пряжи.

• Карточка весового товара с удобным выбором веса в граммах.

• Карточка штучного товара с описанием.

• Корзина, в которой можно ввести код купона для получения скидки.

• Избранное — товары, которые пользователь добавил при просмотре каталога.

• Личный кабинет: данные клиента, история заказов, текущие заказы.

• О магазине.

• Контакты: адрес, телефон и email компании, карта с указанием местоположения.

• фильтрация товаров по свойствам

• оформление заказа с удобной формой для введения адреса доставки и выбором подходящей службы доставки (СДЭК, Почта России)

• интеграция системы оплаты

• интеграция системы доставки

• прототипы страниц

• документ ТЗ

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

Этап 3. Дизайн 

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

• разработали  дизайн с обязательным учетом результатов маркетингового этапа

• создали адаптивные макеты для планшета и смартфона;

• проработали UX‑элементы: фильтры товаров, корзину

• подобрали фотоконтент (профессиональные снимки продукции, процессов ухода)

• согласовали визуальную концепцию: корпоративные цвета, шрифты, стиль подачи технической информации

• дизайн-макеты всех страниц
• визуальная подача стала коммерчески понятной для клиента и удобной для выбора товаров

Этап 4. Верстка

• сверстали макеты с использованием HTML, CSS и JavaScript;
• оптимизировали скорость загрузки (сжатие изображений, кеширование, отложенная загрузка контента);
• обеспечили адаптивность для различных браузеров и устройств;
• добавили анимацию там, где это уместно.

• готовые HTML страницы сайта
• сайт стал быстрым, стабильным и удобным для пользователей на разных устройствах

Этап 5. Разработка (back-end)

• альфа-версия сайта
• настроены важные дополнительные функции сайта