Интернет-магазин товаров бренда Xiaomi
ЗаказчикАвторизованные магазины Xiaomi в РБ mi.by. Все товары, представленные на сайте, находятся на собственных складах компании «МиБай», официально импортированы и имеют сертификаты соответствия.ЗадачаПервоначальной задачей перед нами клиент поставил технический анализ сайта mi.by. Однако после выполнения предварительного анализа стало понятно, что потребуется полная переработка дизайна ресурса.
Задачи проекта
Сделать современный сайт, с обновленным дизайном и адаптивной версткой
С помощью нового сайта повысить конверсию, интернет-магазин сделать эффективным инструментом для увеличения продаж
Суть работ
Первоначальной задачей перед нами клиент поставил технический анализ сайта mi.by. Чтобы выполнить поставленную задачу, мы провели полный технический аудит и аудит юзабилити.
Комплексный аудит и переход к редизайну
После выполнения предварительного анализа приняли решение, что сначала реализуем задачи по техническому аудиту для того, чтобы исправить ошибки в работе существующего сайта. Выполнили следующие работы:
1. Оптимизировали файлы и структуру сайта:
- очистили шаблон сайта от мусора, убрали дубли при подключении файлов/скриптов/стилей;
- очистили место на диске от старого кэша, ресайзов и картинок, которые не контролируются Битриксом;
- удалили неиспользуемые инфоблоки каталога.
2. Оптимизировали запросы и таблицы в базах данных.
3. Настроили кеширование и сократили времени загрузки страниц, в том числе реализовав рекомендации Google PageSpeed.
4. Оптимизировали стили, скрипты и изображения.
После выполнения работ по техническому аудиту приступили к планированию работ по аудиту юзабилити. В процессе планирования поняли, что более оптимальным вариантом будет разработка нового сайта, а не корректировки на текущем. Основной причиной такого решения стало значительное количество необходимых технических доработок и обширных изменений в дизайне, которые были бы сложными и ресурсоёмкими при работе с текущим сайтом. Создание нового сайта позволило бы решить существующие проблемы эффективнее и предоставить более гибкие возможности для дальнейшего развития ресурса.
Редизайн и его особенности
В процессе редизайна мы придерживались AGILE-методологии, что означало ступенчатый и параллельный ход работ. В отличие от традиционного подхода, где сначала полностью создаётся дизайн, затем он верстается и переносится на сайт, мы выбрали другой путь.
Мы работали над отдельными страницами и разделами, рисуя их поочерёдно, по одной или две за раз. Как только дизайн одной страницы был готов, мы отправляли его на утверждение, а после в реализацию нашим разработчикам и переходили к разработке следующего дизайна. Такой подход сделал нашу работу гибкой и позволил нам эффективно обновлять сайт без остановок.
Для каждой страницы был разработан единый алгоритм:
- Создание прототипов.
- Разработка дизайна.
- Согласование и внесение корректировок от клиента.
- Верстка и интеграция верстки на тестовом сайте.
- Тестирование и перенос.?
Что изменилось?
- Дизайн стал более современным и удобным для восприятия.
- Создали интуитивно понятную для пользователя карточку товара.
- Реализована более интуитивная навигация по сайту.
- Ускорена загрузка страниц сайта.
- Создана и оптимизирована мобильная версия сайта.
- Внесены улучшения в визуальные элементы сайта.
- Добавлены интерактивные элементы на страницах товаров.
- Оптимизирована система уведомлений для клиентов.
Наглядные результаты выполненных работ
- Главная страница.
До:
После:
- Главная страница (мобильная версия).
До:
После:
- Блок с товарами на главной странице сайта.
До:
После:
- Карточки товаров.
До:
После:
- Каталог товаров.
До:
После:
- Информация о способах оплаты и доставки.
До:
После:
- Футер.
До:
После:
Вместе с реализацией редизайна страниц сайта потребовалось также выполнение отдельных доработок по функционалу сайта.
Дополнительные работы
1. Создали расширенный каталог товаров с возможностью сортировки и фильтрации.
Разработали расширенный каталог товаров, внедрив функционал сортировки и фильтрации. Мы использовали AJAX-технологии для обеспечения бесшовной и быстрой работы фильтров без необходимости перезагрузки страницы. Фильтры были настроены для сортировки товаров по ключевым атрибутам, таким как цена, категория, бренд, рейтинг и доступность. Также была добавлена функция динамической загрузки товаров для улучшения пользовательского опыта.
2. Разработали функционал сравнения товаров.
Внедрили функционал сравнения товаров с использованием JavaScript и jQuery. Это позволило нам создать интерактивный и пользовательский интерфейс. Мы разработали систему, которая позволяет клиентам выбирать несколько товаров для сравнения, а затем динамически генерировать таблицу сравнения с детальными характеристиками каждого товара, включая цену, размеры, цвет, технические параметры и другие важные аспекты. Эта функциональность облегчает процесс принятия решений о покупке, предоставляя всю необходимую информацию для сравнения продуктов в удобной и понятной форме.
3. Функционал «Предзаказ» и «Оставить заявку».
На сайте присутствует разделение на товары «в наличии» и «не в наличии». Товары «не в наличии» в каталоге отображаются, но к заказу недоступны. Необходимо было добавить для таких товаров дополнительные свойства «Предзаказ» и «Оставить заявку», заполняемые вручную.
При отметке данных свойств у товара, который не в наличии, он появляется в каталоге с соответствующей кнопкой на месте кнопки «Добавить в корзину». А пользователи могут оформить предзаказ, либо оставить заявку на этот товар.
Алгоритм работы функционала выглядит вот так:
- если отмечено только свойство «предзаказ», то появляется кнопка «предзаказ»,
- если отмечено только свойство «оставить заявку», то появляется кнопка «оставить заявку»,
- если ни одно из этих свойств не заполнено, а количество товара в 1С больше 0, то выводить кнопку «добавить в корзину»,
- если количество товара 0, выводить текст «нет в наличии».
В результате клиент получил нужный функционал.
4. В карточках товаров разместили дополнительный инфоблок для добавления значений свойства «стикер».
В карточках товаров добавили инфоблок, позволяющий выбрать из набора созданных стикеров те, которые будут отображаться на карточке:
Для каждого стикера можно задать имя, цвет стикера и цвет текста (по умолчанию будет белый). Если нужно убрать какой-то стикер со всех товаров, его можно деактивировать.
5. Разработали личный кабинет для клиентов.
Мы создали с нуля персональный кабинет для клиентов, обеспечив его всеми необходимыми функциями для простоты совершения покупок и мониторинга статусов заказов.
В этом личном кабинете пользователи имеют доступ ко всем важным данным, которые используются при оформлении заказов, в том числе к контактным данным и адресу доставки. Эта информация автоматически вносится в соответствующие поля при оформлении заказа, что устраняет необходимость повторного ввода данных при каждой новой покупке.
Кроме того, мы внедрили функцию отслеживания процесса выполнения заказов прямо в личном кабинете, позволяя клиентам быть в курсе статуса их заказов без обращения в службу поддержки.
В разделе «Бонусы» личного кабинета пользователи могут ознакомиться с деталями Программы лояльности и проверить количество накопленных бонусных баллов, повышая их вовлеченность и удовлетворенность от использования нашего сервиса.
6. Скорректировали правила подсчета стоимости товаров.
Мы обновили систему расчета стоимости товаров, теперь при выборе рассрочки или карт рассрочек цена товара исчисляется по прейскуранту, а не по цене со скидкой, как это было раньше. Это позволило обеспечить большую точность и прозрачность в определении финальной стоимости покупки.
Также был внедрен новый калькулятор рассрочки и кредита, упрощающий расчет условий финансирования. Калькулятор позволяет клиентам мгновенно получить информацию о графике платежей, сумме первого взноса и итоговой сумме кредита. Расчеты основаны на точных формулах, предоставленные клиентом.
Для улучшения пользовательского опыта мы интегрировали всплывающие подсказки, информирующие о пересчете цены при изменении способа оплаты в корзине. Текст подсказок также был оптимизирован для включения списка всех доступных карт рассрочек, повышая удобство и ясность для покупателей.
Эти усовершенствования делают процесс выбора и покупки на сайте более плавным и понятным, улучшая общий опыт пользователя
7. Интеграция с 1С.
Выполнили интеграцию с системой 1С, что привело к значительной оптимизации и автоматизации процессов управления данными на сайте. Вся информация о товарах, включая их характеристики, остатки, торговые предложения, а также фотографии, автоматически синхронизируется с данными в 1С клиента. Интеграция обеспечивает актуальность и точность данных на сайте, а также упрощает процессы обновления информации о товарах.
8. Интеграция с системами платежей.
Для расширения возможностей оплаты в интернет-магазине были успешно интегрированы две ключевые платежные системы: ЕРИП (Единая Расчетная Информационная Платежная система) и bePaid.
Обе системы предоставляют покупателям разнообразие надежных способов оплаты. Это не только улучшило процесс совершения покупок, но и способствовало увеличению общего уровня удовлетворенности клиентов магазина.
9. Настроили почтовые события и почтовые шаблоны.
В рамках нашего сотрудничества мы также настроили почтовые события и шаблоны, что значительно упростило общение с клиентами интернет-магазина. Эти настройки включали автоматическое отправление информации о заказах, например, уведомлений об их статусе, персонализированных рассылок с акциями и специальными предложениями, а также напоминаний о незавершенных покупках и благодарственных писем после покупки. Эти автоматизированные коммуникации повысили эффективность клиентского обслуживания и улучшили пользовательский опыт.
Выводы
В ходе выполнения работ основной акцент делался на улучшение конверсий и увеличение продаж. В рамках проекта был проведен комплексный технический и юзабилити аудит, оптимизация структуры сайта и его файлов. Проект реализовывался с применением AGILE-методологии, что позволило достичь гибкости в процессе редизайна и разработки новых функций.
Для улучшения сайта важно постоянно следить за тем, как пользователи с ним взаимодействуют. Убедитесь, что сайт удобен для использования и хорошо работает на мобильных устройствах. Помните о важности SEO для привлечения новых клиентов и регулярно обновляйте контент. А интерактивные элементы на сайте (фильтры, сортировки, калькуляторы) могут улучшить вовлеченность пользователей и обеспечить их актуальной индивидуальной информацией.
Мы предлагаем услуги по оптимизации сайтов, включая аудит сайта, его редизайн, выполнение доработок и интеграций. Мы поможем улучшить работу вашего сайта, свяжитесь с нами для получения более подробной информации.
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
