Редизайн интернет-магазина Olymp

Заказчик

Клиент — интернет-магазин Olymp-men.ru, занимающийся продажей мужских костюмов и аксессуаров премиального качества.

Задача

Предыдущая версия сайта была разработана более 5 лет назад и уже устарела по многим параметрам. Было необходимо пересмотреть логику работы сайта, сделав акцент на удобстве использования.

Задача

Предыдущая версия сайта была разработана более 5 лет назад и уже устарела по многим параметрам. Нам необходимо было пересмотреть логику работы сайта, сделав акцент на удобстве использования. А также показать посетителям акции, доступные категории товаров, подборки товаров по направлениям, а также полезный контент по уходу и правильной покупке товаров.

Предварительная аналитика

1. Конкурентный анализ

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

2. Юзабилити анализ

Провели юзабилити анализ текущего сайта для выявления слабых сторон.

3. Поиск визуального стиля

Отобрали современные визуальные решения для нового дизайна.

Реализация

Спроектировали новый визуальный стиль сайта, отвечающий современным трендам.

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

Новый визуальный стиль сайта с улучшенным UX

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

Первый экран

• Добавили возможность выбора региона. Это позволяет персонализировать акции и упростить оформление заказа.
• В шапке вывели основные разделы. Чтобы до них добраться нужно минимум движений.
• Отобразили на главной 2 баннера. Так у пользователя будет меньше шансов пропустить интересную акцию.
• Выделили основные товарные разделы.

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

На сайте мы представили несколько блоков с товарными подборками. Сделали так, чтобы блоки отличались внешне, добавили им динамичности. Этот подход позволяет избежать однообразия и лучше удерживать внимание пользователей при изучении сайта.

Раздел «Популярное». Минималистичные карточки товара, при наведении на которые появляются характеристики товара и возможность добавить товар в Избранное.

Раздел «Не требуют глажки». Это промо-раздел, который выполняет функцию рекламного баннера.

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

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

В разделе «Модные тенденции» публикуются подборки товаров в виде готовых комплектов.

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

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

Раздел «О компании». Оставили этот раздел, так как он влияет на поисковую выдачу. Но вёрстка сделана таким образом, что структура и информация четко считываются поисковиками.

Поиск

При нажатии на строку поиска ниже появляется модальный блок с популярными товарами и категориями. Во время написания в строке поиска определенного товара отображаются результаты по категориям и по товарам.

Компоненты

Чтобы сайт можно было легко масштабировать?и придерживаться единого стиля, разработали систему компонентов.

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

Получите максимум практического контента и реальных кейсов по разработке e-commerce решений и автоматизации бизнес-процессов на нашем сайте: https://webest.ru/

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