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

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

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

Slimeok — магазин материалов для изготовления слаймов. В ассортименте компании базовые компоненты, декоративные добавки, блестки, ароматизаторы, активаторы и другие товары для творчества.

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

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

• Каталог с понятной структурой. Клиент легко находит материалы: клей, активаторы, блестки, ароматизаторы и другие товары.

• Фильтры и сортировка. Сокращают путь к покупке и помогают не теряться в ассортименте.

• Карточки товаров с подробной информацией. Упрощают выбор и снижают количество дополнительных вопросов.

• Корзина и оформление заказа. Делают покупку понятной и удобной для розничных клиентов.

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

• Личный кабинет. Дает клиентам доступ к истории заказов и повышает удобство повторных покупок.

• Раздел с акциями. Помогает продвигать специальные предложения и стимулировать дополнительные продажи.

• Базовая SEO-оптимизация. Готовит сайт к продвижению и росту органического трафика.

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

Перед проектированием мы собрали информацию по методологии 3К: Компания, Клиенты, Конкуренты.

• Провели интервью с заказчиком. Поняли бизнес-задачи, особенности ассортимента и ожидания от интернет-магазина.

• Изучили маркетинговые материалы. Выделили сильные стороны бренда и товарных категорий.

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

• Изучили потребности целевой аудитории. В фокусе были родители, дети 4+, творческие студии и розничные магазины.

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

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

• Создали 5 аватаров клиента.

• Изучили 10 сайтов конкурентов. Посмотрели, как устроены каталоги, карточки товаров, акции и оформление заказа.

• Собрали 35 идей для проекта. Отобрали решения, которые помогут сделать магазин удобнее и сильнее в своей нише.

• 5 аватаров клиента

• анализ 10 конкурентов

• 35 идей для реализации

• сформирована основа для проектирования интернет-магазина: портреты аудиторий, сценарии покупки, список важных функций и понимание, как сайт должен помогать продавать.

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

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

• Главная страница. Быстро знакомит с магазином, ассортиментом, акциями и преимуществами.

• Каталог товаров. Помогает перейти к нужной категории без лишних действий.

• Карточка товара. Дает информацию для выбора и добавления товара в корзину.

• Корзина. Позволяет проверить заказ и применить промокод.

• Оформление заказа. Включает выбор доставки и оплаты.

• Личный кабинет. Делает повторные покупки удобнее.

• Раздел с акциями. Помогает выделять специальные предложения.

• Фильтры по категориям и свойствам. Ускоряют поиск нужных товаров.

• Сортировка. Помогает выбирать товары по удобным параметрам.

• Промокоды. Дают возможность запускать акции и стимулировать покупки.

• Оплата и доставка. Переводят заказ в понятный онлайн-сценарий.

• Интеграция с Битрикс24. Помогает не терять заявки и быстрее брать их в работу.

Сложные функции мы описали в техническом задании (ТЗ). ТЗ сделали лаконичным, без повторов и лишней информации.

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

• документ ТЗ

• готовый сценарий работы интернет-магазина: от первого перехода в каталог и выбора нужного товара до добавления в корзину и завершения заказа.

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

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

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

• Проработали каталог и карточки товаров. Покупателю проще ориентироваться в ассортименте и сравнивать позиции.

• Продумали UX корзины и оформления заказа. Убрали лишние шаги, чтобы не усложнять покупку.

• Подготовили адаптивные макеты. Сайт удобно использовать со смартфона и планшета.

• Подобрали фотоконтент. Товары и примеры готовых слаймов помогают лучше представить результат покупки.

• дизайн-макеты всех страниц

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

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

После согласования дизайна подготовили адаптивную верстку страниц.

• Сверстали основные экраны сайта. Макеты были перенесены в HTML, CSS и JavaScript.

• Адаптировали сайт под разные устройства. Покупатель может пользоваться магазином с телефона, планшета и компьютера.

• Оптимизировали изображения. Это помогает страницам загружаться быстрее.

• Проверили отображение в браузерах. Сайт должен стабильно работать у разных пользователей.

• готовые HTML-страницы сайта

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

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

На этапе разработки собрали техническую основу интернет-магазина на 1С-Битрикс, подключили ключевые модули и связали сайт с бизнес-процессами компании.

Интегрировали ЮKassa для онлайн-оплаты. Покупатели могут оплачивать заказы прямо на сайте удобным способом.

Подключили доставку через СДЭК и Почту России. Клиенты могут выбрать подходящий вариант получения заказа при оформлении покупки.