UX/UI

Как мы разработали интернет-магазин детской одежды на готовом решении «Аспро: Максимум»: кейс Mimilav

Главная
/
Блог

Максим Жуков

Сооснователь ecommerce-агентства KISLOROD

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

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

Как мы разработали интернет-магазин детской одежды на готовом решении «Аспро: Максимум»: кейс Mimilav

Задача

Бренд Mimilav продает детскую одежду от 0 до 7 лет с широким ассортиментом: платьев, комбинезонов, костюмов и верхней одежды.

Целевая аудитория — молодые мамы, поэтому важны визуальная эстетика, удобная навигация и простота покупки. Старая версия сайта морально и визуально устарела: неудобная навигация, перегруженный интерфейс, неприспособленность под современный e-commerce.

Заказчик хотел:

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

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

Решение

На старте проекта мы рассмотрели несколько вариантов:

кастомная разработка;
готовые решения.

С учетом задач, бюджета и сроков оптимальным вариантом оказался шаблон Аспро: Максимум — гибкое и проверенное решение, с которым мы работаем не первый год.

Почему выбрали его:

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

Главный плюс: быстрый старт без потерь в качестве. Именно это и требовалось клиенту.

Этапы работы над проектом

Мы делали сайт поэтапно — подключили отдельные блоки, тестировали и дорабатывали под задачи бизнеса. С таким подходом мы гибко корректировали решение под приоритеты заказчицы:

1. Аналитика и подготовка.

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

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

Интеграции. Выявили, что основной бизнес-процесс клиента завязан на 1С:УНФ. Раньше данные подтягивались с ошибками, часть заказов терялась. Мы сразу зафиксировали доработки, чтобы новые интеграции были стабильными: синхронизация каталога, остатков и заказов в обе стороны.

2. Техническое задание.

Подробная документация. После утверждения мы оформили развернутое ТЗ. В него вошли: структура сайта, требования к стилистике, пользовательские сценарии и список интеграций. Такой документ стал «дорожной картой» для всех участников проекта: клиент понимал, что получит на выходе, а команда — какие задачи и сроки стоят перед ними.

Интеграция с 1С:УНФ 3.0. Особое внимание уделили обмену данными: каталог и остатки должны были подтягиваться из 1С, а заказы — уходить обратно без задержек и ошибок. Мы разработали техническую спецификацию именно под бизнес-процессы клиента, чтобы коды товаров из 1С без ошибок подтягивались в каталог сайта, правильно связывались остатки и не пропадали скидки.

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

3. Интеграции.

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

Службы доставки

Клиент заранее заключил договоры с операторами доставки и передал нам данные для подключения.

СДЭК — установили и настроили модуль «Интеграция со СДЭК». На этапе оформления заказа покупателю доступны варианты доставки: ПВЗ, курьерская служба и постаматы. Заказы автоматически выгружаются в систему СДЭК после оплаты, а трек-номер подтягивается в заказ и синхронизируется с 1С. Ошибки при отгрузке заказчик обрабатывает вручную и может повторно отправить заявку.

Почта России — настроили модуль «Интеграция с Почтой России». Доступны два вида доставки: ПВЗ и курьер. Автоматическая выгрузка заявок и трек-номеров работает по аналогии с СДЭК. Дополнительно реализовали кастомизацию модуля: теперь статусы заказов автоматически обновляются по информации из Почты России.

DADATA

Для удобства покупателей мы внедрили сервис DADATA, который автодополняет адрес при оформлении заказа:

система подсказывает корректный адрес по первым символам;
индекс автоматически подставляется в скрытое поле;
настройка выполнена строго по документации разработчиков.

4. Кастомизация дизайна и настройка UX.

При работе с шаблоном «Аспро: Максимум» мы не ограничились технической настройкой параметров. Команда подошла к задаче как к UX-проработке: цель была сделать сайт визуально чистым, быстрым и удобным для аудитории бренда.

Фокус на простоту. Из множества встроенных блоков мы оставили только те, что реально помогают конверсии: крупные баннеры и акции. Остальные элементы — отзывы, новости, блог, бренды, «товар дня» и пр. — были отключены. Это избавило главную страницу от визуального перегруза — так пользователь быстрее переходит к каталогу.

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

Визуальные акценты. Сайт оформлен в светлой гамме с контрастными черными акцентами. Такой прием поддерживает фирменный стиль, но при этом не перегружает восприятие. Шрифт Montserrat 15 px обеспечивает читаемость на мобильных устройствах.

Карточка товара как точка продаж. Мы убрали лишние «табы» и сделали описание товара открытым блоком, чтобы покупатель сразу видел всю информацию. Галерея работает через всплывающее окно, миниатюры расположены горизонтально — знакомый для пользователей сценарий. Для длинных текстов предусмотрено автосворачивание: экран не «ломается», но подробности доступны по клику.

Карточка товара интернет-магазина детской одежды на готовом решения

Корзина и оформление заказа. Корзина всегда на виду в шапке, а уведомление о добавлении товара появляется сразу — пользователь уверен, что действие прошло успешно. При этом оформление заказа сведено к минимуму лишних блоков: все, что отвлекает от покупки, мы выключили.

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

5. Доработки по функционалу.

Усилили стандартное решение: переработали ключевые элементы интерфейса (шапку, подвал, каталог и карточку товара), чтобы сайт стал интуитивнее и удобнее для покупателей.

Структурировали контент: добавили новые разделы и страницы — раздел «Мальчики», условия оплаты и доставки, возврат, опт. Это упростило навигацию и снизило нагрузку на поддержку.

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

6. Финальная проверка и запуск.

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

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

Поддержка и обучение

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

Результат

Что получилось в итоге:

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

Если вы запускаете интернет-магазин и хотите:

сэкономить на разработке,
быстро запуститься в работу,
уже на старте иметь отличный UX и важный функционал

Готовое решение «Аспро: Максимум» — это сильная база. А мы поможем адаптировать его под ваш бренд, подключить нужные сервисы и сохранить удобство как для покупателей, так и для администраторов сайта.

Готовы обсудить проект? Напишите нам — расскажем, с чего начать.

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

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