Интернет-магазин товаров бренда Xiaomi

Заказчик

Авторизованные магазины Xiaomi в РБ mi.by. Все товары, представленные на сайте, находятся на собственных складах компании «МиБай», официально импортированы и имеют сертификаты соответствия.

Задача

Первоначальной задачей перед нами клиент поставил технический анализ сайта mi.by. Однако после выполнения предварительного анализа стало понятно, что потребуется полная переработка дизайна ресурса.

 Задачи проекта

Сделать современный сайт, с обновленным дизайном и адаптивной версткой

С помощью нового сайта повысить конверсию, интернет-магазин сделать эффективным инструментом для увеличения продаж

Суть работ

Первоначальной задачей перед нами клиент поставил технический анализ сайта mi.by. Чтобы выполнить поставленную задачу, мы провели полный технический аудит и аудит юзабилити.

Комплексный аудит и переход к редизайну

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

1. Оптимизировали файлы и структуру сайта:

• очистили шаблон сайта от мусора, убрали дубли при подключении файлов/скриптов/стилей;
• очистили место на диске от старого кэша, ресайзов и картинок, которые не контролируются Битриксом;
• удалили неиспользуемые инфоблоки каталога.

2. Оптимизировали запросы и таблицы в базах данных.

3. Настроили кеширование и сократили времени загрузки страниц, в том числе реализовав рекомендации Google PageSpeed.

4. Оптимизировали стили, скрипты и изображения.

После выполнения работ по техническому аудиту приступили к планированию работ по аудиту юзабилити. В процессе планирования поняли, что более оптимальным вариантом будет разработка нового сайта, а не корректировки на текущем. Основной причиной такого решения стало значительное количество необходимых технических доработок и обширных изменений в дизайне, которые были бы сложными и ресурсоёмкими при работе с текущим сайтом. Создание нового сайта позволило бы решить существующие проблемы эффективнее и предоставить более гибкие возможности для дальнейшего развития ресурса.

Редизайн и его особенности

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

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

Для каждой страницы был разработан единый алгоритм: 

1. Создание прототипов.
2. Разработка дизайна.
3. Согласование и внесение корректировок от клиента.
4. Верстка и интеграция верстки на тестовом сайте.
5. Тестирование и перенос.?

Что изменилось?

• Дизайн стал более современным и удобным для восприятия.
• Создали интуитивно понятную для пользователя карточку товара.
• Реализована более интуитивная навигация по сайту.
• Ускорена загрузка страниц сайта.
• Создана и оптимизирована мобильная версия сайта.
• Внесены улучшения в визуальные элементы сайта.
• Добавлены интерактивные элементы на страницах товаров.
• Оптимизирована система уведомлений для клиентов.

 Наглядные результаты выполненных работ

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

До:

После:

• Главная страница (мобильная версия).

До:

После:

• Блок с товарами на главной странице сайта.

До:

После:

• Карточки товаров.

До:

После:

• Каталог товаров.

До:

После:

• Информация о способах оплаты и доставки.

До:

После:

• Футер.

До:

После:

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

Дополнительные работы

1. Создали расширенный каталог товаров с возможностью сортировки и фильтрации.

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

2. Разработали функционал сравнения товаров.

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

3. Функционал “Предзаказ” и “Оставить заявку”.

На сайте присутствует разделение на товары “в наличии” и “не в наличии”. Товары “не в наличии” в каталоге отображаются, но к заказу недоступны. Необходимо было добавить для таких товаров дополнительные свойства “Предзаказ” и “Оставить заявку”, заполняемые вручную.

При отметке данных свойств у товара, который не в наличии, он появляется в каталоге с соответствующей кнопкой на месте кнопки “Добавить в корзину”. А пользователи могут оформить предзаказ, либо оставить заявку на этот товар.

Алгоритм работы функционала выглядит вот так:

• если отмечено только свойство “предзаказ”, то появляется кнопка “предзаказ”,
• если отмечено только свойство “оставить заявку”, то появляется кнопка “оставить заявку”,
• если ни одно из этих свойств не заполнено, а количество товара в 1С больше 0, то выводить кнопку “добавить в корзину”,
• если количество товара 0, выводить текст "нет в наличии".

В результате клиент получил нужный функционал.

4. В карточках товаров разместили дополнительный инфоблок для добавления значений свойства "стикер".

В карточках товаров добавили инфоблок, позволяющий выбрать из набора созданных стикеров те, которые будут отображаться на карточке:

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

5. Разработали личный кабинет для клиентов.

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

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

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

В разделе "Бонусы" личного кабинета пользователи могут ознакомиться с деталями Программы лояльности и проверить количество накопленных бонусных баллов, повышая их вовлеченность и удовлетворенность от использования нашего сервиса.

6. Скорректировали правила подсчета стоимости товаров.

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

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

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

Эти усовершенствования делают процесс выбора и покупки на сайте более плавным и понятным, улучшая общий опыт пользователя

7. Интеграция с 1С.

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

8. Интеграция с системами платежей.

Для расширения возможностей оплаты в интернет-магазине были успешно интегрированы две ключевые платежные системы: ЕРИП (Единая Расчетная Информационная Платежная система) и bePaid. 

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

9. Настроили почтовые события и почтовые шаблоны.

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

Выводы

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

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

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

Перейти на сайт