DIGITAL SECTOR

VEKA RUS. Разработка лучшего* сайта для потребителей

Проблема

Старый сайт компании Века неудобен для пользователей, что затрудняло взаимодействие с  онлайн-ресурсом .

К нам обратилась немецкая оконная компания, которая хотела запустить редизайн веб-платформы для покупателей оконных систем. Целью было создание интуитивно понятной среды для посетителей при взаимодействии с контентом.

Задачи:

На основе анализа метрик:

  1. Улучшение взаимодействия с пользователями
  2. Выявление ключевых проблем аудитории
  3. Позиционирование среди конкурентов
  4. Оптимизация навигации
  5. Выделение ключевых разделов сайта
  6. Разработка дизайна для передачи ценностей компании
Решение

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

  • калькулятора,
  • каталога продукции,
  • личного кабинета.

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

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

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

Аудит

На основе анализа данных Яндекс Метрики, тепловых карт:

  • выявили основные разделы, интересные пользователям;
  • отследили навигационные цепочки посетителей сайта;
  • приняли решение реорганизовать навигацию по сайту для упрощения взаимодействия.
2. User-flow клиента

Результат помог окончательно определиться со структурой будущего сайта.

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

3. Какими приемами пользовались
Использование рекомендаций и результатов SEO аудитов
  • Интеграция советов и выводов специалистов по поисковой оптимизации, что способствовало улучшению видимости сайта.
Выделение основных характеристик продукции
  • Подчеркнутые ключевые характеристики продукции, обеспечивающие более ясное представление о предлагаемых товарах.
Разнообразное наполнение посадочных страниц
  • Разработка страниц с контентом в удобном формате.
Акцент на продукте с внедрением 3D модели в карточке товара
  • Внедрение 3D модели для наглядного ознакомления с конструкцией продукции потенциальных клиентов.
Составление user-flow для связывания страниц по смыслу и приоритету
  • Создание структурированного user-flow, обеспечивающего логическое и приоритетное взаимодействие между страницами сайта.

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

4. Прототипы страниц

В результате анализа всех данных спроектировали прототипы страниц каталога и карточки товара.

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

5. Логика выстраивания блоков
  1. Архитектура сайта построена исходя из анализа поведения пользователей на сайте. Путем выявления основных запросов построена логически последовательная структура, отражающая потребности и предпочтения.
  2. В процессе разработки дизайна использовали рекомендации и результаты аудитов SEO–специалистов.
  3. Внедрили удобную навигацию для упрощения пользовательского опыта.
6. Дизайн

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

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

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

7. Особое внимание уделили мобильной версии сайта

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

8. Разработка
  1. Фронт перенесен на Next.js. Это ускорило работу сайта в 5 раз
  2. При редизайне были убраны старые/нерабочие ссылки
  3. Обновлен дизайн и функционал сайта
  • Были обновлены компоненты сайта (переписано всё с использованием orm и нового ядра d7)
  • Обновлена структура базы данных, убраны лишние инфоблоки и неиспользуемые свойства в оставшихся инфоблоках
  • API для работы сайта было реализовано на современных инструментах последних версий ядра Битрикс
  • Усовершенствована и унифицирована обработка данных со всех форм на сайте.
Результат

Результаты редизайна сайта компании Века — важный этап совершенствования опыта онлайн-взаимодействия с ресурсом.

Мы решили все вопросы:

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

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

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

В 2022 году наша компания стала призером престижного конкурса «Золотой сайт» за проект «VEKA RUS» в номинации *«Лучший сайт для потребителей (b2c) (народное голосование).

Ссылка на проект:

https://www.veka.ru/

Стек технологий

1С-Битрикс
Next.js
React.js
Figma
Согласен