Редизайн и улучшение UI/UX интернет-магазина «Четыре глаза»

Онлайн-проект компании Levenhuk

Редизайн и улучшение UI/UX интернет-магазина «Четыре глаза»

Онлайн-проект компании Levenhuk
4glaza.ru — интернет-магазин, принадлежащий ПАО «Левенгук». В каталоге представлен огромный выбор товаров: любительские и профессиональные микроскопы, телескопы всех известных оптических схем для новичков и опытных астрономов, бинокли, приборы ночного видения и прицелы, лупы, лазерные дальномеры и зрительные трубы. В магазине есть отдельная линейка измерительных приборов под брендом Ermenrich о котором мы рассказывали в одном из наших кейсов.

«Четыре глаза» — это международная сеть магазинов, существующая с 2002 года. В Европе она имеет собственное имя «Zoom'n'Joy». Магазины расположены в России, странах СНГ, Европе, Азии и Северной Америке. Оптическая техника бренда Levenhuk также представлена на крупнейших торговых интернет-площадках.
4glaza smartfone
Интернет-магазин работает с 2002 года. С тех пор развитие интернет-технологий и e-com шагнуло далеко вперед. В ритейле выросла конкуренция, поисковые системы и покупатели стали более требовательными к качеству контента и дизайну. Последние всё чаще используют мобильные устройства для поиска, сравнения и покупок.

Проведенные исследования подтверждают, что получение негативного пользовательского опыта (UX), как и неудовлетворённость пользовательским интерфейсом (UI) сайта, для подавляющего большинства является весомым аргументом, чтобы перестать его посещать.
Цифры говорят сами за себя.
  • 70%
    Доля населения, имеющая мобильный телефон
  • 62%
    Доля мобильного трафика
    на e-com платформы
  • 78%
    Доля пользователей, совершающих онлайн-покупки с мобильных устройств
  • 80%
    Уровень отказов от покупок с мобильных устройств из-за недостаточной адаптации сайтов под мобильные экраны
  • 67%
    Пользователей уходят с платформы, если «кнопки и ссылки слишком маленькие»
  • 44%
    Доля пользователей, сравнивающих товары и цены на мобильных устройствах перед покупкой
UI
UX
Маркетинговые метрики и финансовые результаты иногда дают повод проверить то, как воспринимают сайт его посетители, ведь UX/UI оказывает влияние на настроение человека и его способность принимать решение о покупке.

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

Эффективный B2C-сайт, наоборот, должен вызывать у посетителя эмоциональный отклик. Он должен видеть, как будет решена его задача и каким будет желаемый результат.
«Четыре глаза» до редизайна
Так выглядела мобильная версия интернет-магазина.
Для своего времени это был отличный дизайн.
Не только дизайн ограничивал возможности команды, которая управляла онлайн-магазином. Администрирование веб-проектов обычно строится на базе какой-либо из CMS-систем, а у «Четырех глаз» её не было. Обмен шёл на php-скриптах, которые выгружали товары и цены из 1С на сайт, загружали обратно заказы, синхронизировали их статусы и делали много другой важной работы. Контент (описания, фотографии товаров, видео-обзоры, статьи и т.д.) готовили и загружали в БД Postgre вручную, откуда их забирала 1С и передавала на сайт при очередной синхронизации.

Это трудоемкий и затратный процесс, особенно если продажами нужно активно управлять. Поэтому внедрение CMS — хороший способ сделать такую работу проще и эффективнее. Например, для организации новой маркетинговой активности не нужно каждый раз привлекать программиста, т.к. в CMS уже есть готовые блоки которые можно настраивать, а потом использовать повторно. С ней удобно автоматизировать процессы, сокращая объемы ручного труда, обеспечивать удобство использования сайтом со всех устройств, быстрее и бюджетнее интегрировать новый функционал и сервисы.
Наша задача
Предыдущая версия интернет-магазина была создана в эпоху веб-античности. Скорость интернета и возможности HTML тогда сильно ограничивали дизайнеров и разработчиков. За более чем 20 лет компания шагнула далеко вперед, но движок и внешний вид магазина практически не изменились. Чтобы двигаться дальше, наращивать прибыль и акционерную стоимость нужно было модернизировать один из важных каналов продаж.

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

Этапы работ

1
Разработка дизайна
Дизайн не менялся с начала 2000-х, поэтому резких движений в стилистике решили не делать. Тренды важны, но магазина должен оставаться понятным широкой аудитории. Поработали над дизайном и функциональностью: разгрузили пространство, сделав его легче и прозрачнее, обновили типографику, пересмотрели структуру страниц, оптимизировали сценарии и навигацию.
2
Верстка макета
Оживить статичный макет в html — работа не сложная, но требует внимательности. Основная задача на этом шаге — обеспечить корректное отображение сайта на различных устройствах и в браузерах. Так как макет розничного магазина накладывался на структуру и функционал оптового, то возникало множество нюансов при адаптации элементов верстки, а что-то пришлось создавать с нуля.
3
Тестирование
Мало сверстать дизайн, сделать code review, прогнать через тестировщика, менеджера проекта и представителя заказчика. Нужен еще и «человек без опыта», который обратит внимание на вещи, которые дизайнеру и разработчику кажутся очевидными и рабочими, но в реальности негативно отражаются на конверсии. Благодаря ему удалось вовремя поправить более 20 разного рода недочетов на front/back и спасти конверсию.
4
Интеграция с 1С
В качестве учетной системы интернет-магазин использует значительно переработанную 1С. Интеграция предполагала частичную доработку панели администрирования, методов выгрузки контрагентов, складов, товаров, цен, заказов из 1С на сайт, методов обмена статусами, а также другие точечные доработки. Все изменения требовалось задокументировать.
5
Настройка интеграции с сервисами доставки и платежной системой
Быстрая доставка — важное преимущество любого магазина. Чтобы покупатель остался доволен покупкой процесс должен быть простым и легким. Обеспечить такую легкость не всегда просто. Нужно связать способы оплаты со способами доставки, транспортными компаниями, курьерскими службами, платежными системами, 1С, настроить рассылку уведомлений и чеков в условиях мультиязычности.
6
Перенос SEO-атрибутов
Каждая страница сайта имеет собственный URL, title, description, оптимизированный текст. Всё это предстояло проверить на ошибки и аккуратно перенести на новую версию, сохраняя микроразметку, вес страниц, редиректы и перелинковку. Иначе могли пострадать внутренние технические и контентные факторы, влияющие на ранжирование.
При проектировании макетов придерживались классических паттернов дизайна e-commerce.

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

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

Новый каталог — это удобная навигация по всем группам товарных категорий, а строка всегда на виду и умеет искать по большему количеству атрибутов.
Каталог и поисковая строка
Дизайн
Примеры страниц ДО и ПОСЛЕ
Каталог
Раньше
Сейчас
Группа номенклатуры
Раньше
Сейчас
Интернет-магазин 4 Глаза. Группы категорий.
Страница медиаконтента
Раньше
Сейчас
Маркетинговые акции
Раньше
Сейчас
Тестирование UI/UX
При разработке дизайна можно полагаться исключительно на свой опыт и проверенные временем практики, но часто этого бывает недостаточно. Индикатором, говорящим о наличии проблем с интерфейсом и работой компонентов, являются маркетинговые метрики. Например, конверсия из корзины в заказ. Если после редизайна конверсия снижается, то это может намекать на наличие причин, мешающих пользователю завершить покупку.

Посмотрите примеры ошибок, которые могли бы испортить конверсию, но у них не получилось. Звёзды — показатели критичности недочетов для поведенческих факторов и конверсии.
Административная панель 1С магазина «4 Глаза»
Чтобы сделать всё быстро и сэкономить бюджет, мы взяли механику обменов с другого (европейского) B2C-проекта Levenhuk, который делали ранее. Но так как российская бизнес-практика имеет свои особенности, то некоторые методы и процессы пришлось адаптировать. Для удобства весь обмен между сайтом и 1С вынесли на отдельную вкладку, которая управляет стандартными объектами: каталог, краткие и полные данные по товарам, контрагенты, цены и их типы, склады, остатки, заказы и т.д. Ряд нюансов, характерных для системы-донора (например, связанные с дилерами), пришлось исключить, чтобы функционал не мешал работе и код был более компактным.

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

Административная панель управления обменом в 1С
Другие улучшения и доработки
Интересной задачей стала настройка способов оплаты из-за особенностей их маппинга в 1С и на сайте.

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

Дальнейшие планы

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

Доставка и геолокация

Дорабатываем гео-данные, чтобы покупатели не переплачивали, а курьеры не уставали.
Для уменьшения времени и сложности взаимодействия пользователя с формами на сайте их желательно заполнять автоматически. Например, поле «город» можно заполнить с учетом региональной привязки пользователя. Это особенно актуально для выбора способа доставки и расчёта её стоимости. Но не всегда это бывает простой задачей. Например, коды геолокации могут не совпадать в двух системах: на сайте и у транспортной компании.

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

В «1С-Битрикс: Управление сайтом» пока не до конца решена проблема с кодами локаций: во-первых, они частично устарели, а во-вторых, есть много городов, у которых указан индекс не центра города а, к примеру, самой крайней и далекой точки, в которой стоимость доставки больше в 1,5-2 раза. Это приводило к тому, что когда мы подключили DaData для вывода подсказок и автозаполнения локации пользователей, то столкнулись с тем, что Битрикс подставляет свой индекс для расчета доставки, а не «настоящий». Из-за наличия таких нюансов менеджеры, отвечающие за работу с заказами, вынуждены тратить больше времени на уточнение и корректировку заказов.

Для решения проблемы мы в ручном режиме поправили индексы: взяли все субъекты Москвы, Московской области, Санкт-Петербурга и Ленинградской области из Битрикса, получили из DaData данные о них и записали в отдельную таблицу с которой работает сайт. Но проблема должна быть решена глобально. Мяч здесь на стороне вендора.
Cейчас официально Зеленоград — это Зеленоградский административный округ Москвы, один из 12 округов. Для таких территорий есть специальный термин — «эксклав». Для курьеров важно фактическое расположение и расстояние, а не административное деление. Поэтому в случае доставки Зеленоград обычно — область. Хотя здесь тоже встречается путаница. Например, если список каких-то объектов поделен на «Москву» и «Московскую область», то Зеленоград может оказаться в любой из них.

Цифры проекта

  • 1100+ часов
    потребовалось на запуск сайта в работу с учетом верстки, программирования логики и всех интеграций
  • 3 месяца
    длились работы по переносу дизайна из Figma в HTML/CSS/JS и программированию бекенда
  • 9 экспертов
    участвовало в создании онлайн магазина со стороны ИНТЕРВОЛГИ
  • 15000+
    количество визитов за первые 3 месяца работы магазина
  • 583%
    рост количества визитов за последний месяц

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

Нужен подрядчик, умеющий делать сайты, которые нравятся клиентам и поисковикам?

Оставьте контактные ваши данные. Мы перезвоним и обсудим задачу.
Нажимая на кнопку «Оставить заявку», вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности.
Перенос сайта c Wordpress для Завода бурового оборудования
«Завод бурового оборудования», г. Оренбург
01.

Наши проекты по редизайну и верстке

Разработка сайта для проекта компании ЕВРАЗ
Лендинг для оптовых поставок щебня
07.
Дизайн сайта для внутреннего проекта банка
Клуб клиентов Альфа•Банка
04.
Метизная группа ДОБРОГА
Обновление и доработка интернет-магазина
09.
Сеть аптек «Аптека 22», Алтай
Доработка и обновление сайта для аптечной сети
02.
Доработка и обновление сайта для бутика
Бутик швейцарских часов GENEVA
03.
Магазин рок атрибутики Castle Rock
Разработка крупного интернет-магазина тематической атрибутики
05.
Редизайн промышленного маркетплейса
Новый интерфейс STEEL RADAR
08.
Интернет-магазин Кирпич.ру
Верстка сайта поставщика строительных материалов
06.
Почему ИНТЕРВОЛГА?
ИНТЕРВОЛГА имеет опыт работы в масштабных проектах с крупными партнерами. Большие задачи — наш профиль. Доля таких проектов — более 70%.
на это есть веские причины:
Мы завершили 1000+ проектов сложных внедрений и интеграций под ключ для производственных компаний и предприятий сферы услуг.
Умеем управлять разработкой, поэтому нам доверяют решать критичные для бизнеса задачи: миграция, кастомная интеграция, проектирование архитектуры IT-систем, развитие ранее «замороженных» проектов, доработка и поддержка «неудачных» решений менее опытных команд.
Если перед вами стоит задача внедрения, замены, доработки или интеграции корпоративных систем — опишите ваши потребности.
Мы предложим решение.
20+ лет
на ИТ-рынке
1000+
успешных проектов
10 000
часов разработки в месяц
150+
штатных сотрудников
100+
разработчиков Битрикс, Битрикс24, 1С
14
производственных команд

Бесплатная консультация эксперта по разработке порталов на Битрикс24

Заполните форму, чтобы мы смогли перезвонить и запланировать встречу.
Нажимая на кнопку «Оставить заявку», вы даете согласие на обработку персональных данных и соглашаетесь c Политикой конфиденциальности.
Хотите получать лучшие статьи от INTERVOLGA раз в месяц?
Подпишитесь на рассылку — спамить не будем