Herbariasoap: безопасное обновление CS-Cart, новый дизайн и современный UX
Herbariasoap — американский бренд натуральной косметики ручной работы из Сент-Луиса. Все продукты созданы на растительной основе без синтетических отдушек. В ассортименте уход за телом и волосами, мыло, шампуни, свечи и репелленты.
Сфера: натуральная косметика Страна: США Сайт: Herbariasoap
Проблема клиента
Клиент обратился с запросом обновить свой онлайн-магазин до версии CS-Cart 4.18. Во время анализа стало понятно, что в магазине использовались устаревшие шаблоны и UI/UX-решения. Техническая поддержка существующего внешнего вида не только требовала значительных затрат, но и не позволяла магазину соответствовать современным стандартам. Дизайн выглядел архаичным и неконкурентоспособным.
В качестве решения мы предложили разработать новый, современный дизайн на базе готовой дизайн-темы последнего поколения, UniTheme2. Этот подход позволил сохранить узнаваемость бренда за счёт сохранения текущей цветовой схемы, но кардинально улучшить визуальное восприятие и пользовательский опыт. Преимуществом этого решения стали уже встроенные в дизайн-тему дополнительные функции, которые повышают функциональность и удобство магазина без значительных доработок.
Основные задачи
Обновить магазин до актуальной версии
Разработать современный адаптивный дизайн на базе UniTheme2
Адаптировать текущие бизнес-механики магазина под обновленный интерфейс
Добавить актуальные UX-решения
Что мы сделали
Обновили магазин до версии CS-Cart 4.18
Так как в прошлом у клиента были проблемы с обновлениями, его беспокоила возможность протестировать магазин перед запуском.
Для обеспечения безопасности и стабильности при переходе на новую версию платформы, мы предложили детальный план тестирования, направленный на исключение проблем, с которыми он сталкивался при прошлых обновлениях.
Чтобы клиент чувствовал себя спокойно, была проведена двойная проверка перед релизом:
Предварительный доступ
Обновлённая версия магазина разворачивается на нашем тестовом сервере (dev-среде). Клиенту предоставляются все необходимые доступы для самостоятельного и всестороннего изучения работы магазина перед его переносом в продакшен.
Усиленный контроль качества
Улучшенная внутренняя процедура QA, которая уже доказала свою эффективность, существенно снизив количество инцидентов после запуска и повысив удовлетворённость клиентов.
Что входило в обновление
- анализ архитектуры и подготовка к обновлению;
- создание резервных копий;
- адаптация кастомных правок в ядре CS-Cart;
- обновление существующих модулей (аддонов);
- настройка новых модулей;
- перенос данных (товары, заказы, пользователи, отзывы, натройки);
- тестирование;
- актуализация базы данных и выход в продакшен.
Создали новый современный дизайн
Клиент предоставил несколько референсов для общего понимания его предпочтений по дизайну. Особое условие от клиента: никаких всплывающих окон. На главной странице широкие фотографии и прокрутка.
Добавлен блок Лента летних предложений с удобной горизонтальной прокруткой и возможностью сразу (не переходя на страницу товара) выбрать необходимое количество и добавить товар в корзину. Это позволяет компактно презентовать большой ассортимент акционных товаров.
Действующая акция «Купи 6 и получи 7-й бесплатно» была важным элементом для лояльной аудитории. Мы спроектировали её интеграцию как на главную страницу, так и на страницу товара. Работающая бизнес-механика была бережно внедрена в новый UI.
Прямоугольный формат миниатюр был использован для того, чтобы идеально вписать в галерею существующие фотографии товаров, сохранив их исходные пропорции и размеры.
Выстроили логичную цепочку социального доказательства, следующую за шагами пользователя.
На входной точке (главная страница) рейтинг и отзывы клиентов формируют общее доверие к магазину.
В каталоге интуитивный визуальный индикатор: звезда и сводный рейтинг.
На входе в карточку товара пользователь мгновенно оценивает социальное доказательство через сводный рейтинг, расположенный в зоне видимости. При прокрутке страницы появляется блок с развернутыми отзывами.
Добавили отдельную страницу с условиями действующих акций:
Разработали дополнительную функциональность
Изменили логику отображения страницы товара, состоящего из нескольких вариаций.
Сделали взаимодействие с товаром более интуитивным. Показали пользователю всю линейку продуктов сразу и мотивировали его к осознанному выбору перед добавлением в корзину, исключив возможность случайного заказа дефолтного варианта.
При открытии страницы показывается общее изображение для всех вариаций продукта (например, все виды мыла с люфой в одном кадре). В выпадающем списке установлена заглушка «Please select one» («Пожалуйста, выберите»).
Кнопка добавления в корзину неактивна до тех пор, пока пользователь сознательно не выберет вариацию из списка. Как только пользователь выбирает конкретную вариацию (например, «Bestsellers»), изображение товара меняется на фото выбранного продукта. Кнопка добавления в корзину становится активной.
Гибкое управление ингредиентами в вариативных товарах
Так как у клиента множество вариаций, вручную править состав для каждой вариации долго и чревато ошибками. Для удобства работы мы реализовали гибкое управление ингредиентами в вариативных товарах. Поле для ввода состава (ингредиентов) теперь доступно на вкладке Общее.
Общий состав для всей линейки:
Если все вариации товара (например, мыла) имеют одинаковый состав, вы можете включить настройку, чтобы применить изменения ко всем вариациям сразу.
Уникальный состав для конкретного мыла:
Если конкретный вид мыла отличается по составу (например, добавлены особые масла или отдушки), вы можете отключить общее обновление и сохранить ингредиенты только для выбранного продукта.
Контролируемое обновление адресов в профиле
Добавили два чекбокса «Обновить мой адрес в профиле»:
- в блок «Shipping methods» (адрес доставки)
- в блок «Bill to» (платежный адрес)
Логика работы:
- Если в профиле пользователя отсутствует соответствующий адрес (доставки или платежный), чекбокс должен быть отмечен по умолчанию.
- Если адрес в профиле существует, чекбокс по умолчанию не отмечен.
- В процессе оформления заказа адреса в профиле пользователя обновляются, только если соответствующий чекбокс отмечен.
Функциональность "Это подарок"
Добавлен чекбокс «Это подарок» рядом с блоком адреса доставки. Если он отмечен, то чекбокс «Мой платежный адрес отличается от адреса доставки» становится неактивным. Просто всегда отображаются все необходимые поля.
В рамках доработки функциональности подарков была переработана система хранения адресов доставки:
Управление подарочными адресами
Пользователи могут создавать, редактировать и удалять подарочные адреса на странице своего профиля.
Все созданные адреса сохраняются в базе данных и доступны для последующего использования.
Использование на странице оформления заказа:
Авторизованные пользователи могут создавать новые подарочные адреса или редактировать существующие непосредственно в процессе оформления заказа.
Результаты работ
- Актуальная версия: безопасно обновили магазин до CS-Cart 4.18 без потери данных и доработок. Двойное тестирование исключило ошибки при переходе.
- Современный дизайн: создали современную витрину на UniTheme2, но с сохранением фирменного стиля.
- Удобная навигация и актуальные UX-решения: поиск всегда на виду, товары можно добавлять в корзину прямо из ленты на главной.
- Сохраненные механики: адаптировали любимыя акции клиентов и работающие бизнес-механики в новом дизайне.
- Улучшили UX (пользовательский сценарий) оформления заказа: убрали лишние шаги, снизили риск ошибок при вводе данных.
Расширение функциональности, изменение логики работы, интеграции, улучшение интерфейса и разработка новых возможностей для интернет-магазина.
Разработаем современный продающий дизайн с учетом особенностей ваших бизнес-процессов и современных требований.
Найдем решения
для каждого!
Получите консультацию специалиста по вашему проекту
