Редизайн спортивного интернет магазина Sport Discount

Денис Матвиец

Sport Discount — это крупный интернет-магазин спортивных товаров от мировых брендов. Первый дизайн магазина мы презентовали клиенту в 2017 году. С тех пор показатели бизнеса значительно выросли, и функционал сайта нужно было подтягивать под новые объемы продаж и стратегию развития.
Для оптимизации мы с клиентом выбрали ESR-подход к редизайну интернет-магазина и презентовали актуальный и рабочий ресурс.
На протяжении четырех лет работы сайт очень динамично развивался в функционале и ассортименте, но чаще всего соответствующие изменения в интерфейсе реализовывались по запросу на скорую руку и не всегда носили взвешенный характер. Со временем эти все изменения стали существенно менять визуальный концепт: появились разношерстные отступы, новые шрифты и их размеры.
Помимо этого, на редизайн сайта повлияли еще и такие факторы:
-
масштабирование бизнеса
С момента запуска интернет-магазин расширил свой ассортимент, заключил договоренности с крупными брендами и наметил цель на развитие площадки как маркетплейса.
-
спрос на mobile-версию
К 2020 году количество mobile-пользователей значительно увеличилось, по сравнению с 2017 годом. Сейчас практически 76% пользователей на сайте оформляют заказы через мобильные устройства, поэтому нужна была эффективная оптимизация ресурса.
-
появление новых паттернов поведения пользователей
Если раньше были в топе максимально информативные интерфейсы, то сейчас их заменил минимализм. Пользователи не хотят вчитываться в тонну информации и совершают покупки более интуитивно. Им не нравится, когда их отвлекают какими-то портальными блоками и хотят осуществлять свои покупки максимально быстро.
-
анализ существующего взаимодействия с сайтом
Чтобы грамотно оптимизировать сайт и учесть максимальное количество потребностей пользователей мы провели юзабилити аудит и проанализировали тепловые карты с помощью сервисов Яндекс вебвизор и Plerdy, а также — пути взаимодействия с сайтом через Google Analytics.
Главная страница
-
Десктоп
Проанализировав сайт через вебвизор Яндекса и Plerdy, мы увидели настоящую картину того, как пользователи взаимодействую с нашим сайтом. Куда кликают, на чем фокусируют внимание, сколько времени проводят на страницах и какая в итоге выходит глубина проскролла. Это позволило нам подстроить интерфейс под алгоритмы поведения пользователей и сделать сайт максимально удобным.
В результате анализа мы увидели, что на большинство кнопок на шапке сайта клиенты попросту не нажимали. Поэтому оптимизировали эту часть, убрав вспомогательные ссылки в подвал сайта, и уменьшили высоту самой шапки и слайдера, что дало нам возможность уже на первом экране показать пользователям блок с брендами — это помогает сразу рассказать больше о магазине и ассортименте.
До
После
Также мы увеличили количество слайдеров с товарами — для быстрого доступа поисковых роботов и пользователей.
До
После
Уменьшили высоту подвала и убрали оттуда дублирующиеся ссылки. Оставили только самую нужную для пользователей информацию.
До
После
-
Мобильная версия
В панель быстрого доступа добавили значок wish-листа и личного кабинета.
Изменили дизайн бургер-меню — сделали его упорядоченным и обновили, согласно общему визуальному концепту и вместили всю информацию на один экран.
Карточка товара
-
Декстоп
Структурировали информацию на странице для удобного восприятия и зафиксировали блок с ценой и кнопку “купить”. Теперь, даже когда пользователь пролистает вниз, он сможет нажать кнопку “купить”, не возвращаясь на верх страницы.
До
После
-
Мобильная версия
Карточка товара в мобильной версии стала более структурированной и не переполненной крупными информационными блоками. При скролле вниз на экране фиксируется кнопка “купить в один клик” и позволяет пользователю не возвращаться в начало для оформления заказа.
До / После
Корзина
Обновили дизайн страницы с учетом общего визуального концепта и разместили информацию в более ненавязчивом ключе.
До
После
Оформление заказа
Вынесли блок на отдельную страницу, чтобы на этом этапе пользователя уже ничего не отвлекало от завершения покупки.
Разбили информацию на смысловые блоки и подкрепили их визуальными акцентами.
Добавили блок для зарегистрированных пользователей, чтобы они могли не вводить повторно информацию о себе и оформить заказ быстрее.
Мы реализовали концепт с учетом реальных данных и проведенного аудита. В результате редизайна клиент получил обновленный рабочий ресурс, который учитывает поведение и потребности клиентов, а также выглядит актуально и стильно.
До
После
Чтобы убедиться, что и ваш сайт требует обновления, закажите услугу Юзабилити аудит, и мы проведем глубокий анализ вашего ресурса.
Читайте также
-
24. 11. 2020
7 главных трендов в UX/UI-дизайне в 2021 году
-
19. 11. 2020
10 лучших дизайнов интернет-магазинов
-
16. 11. 2020
Влияние UX / UI дизайна на бизнес
-
01. 02. 2021
Отзывы в Интернете: почему важно на них отвечать и как это правильно делать
-
13. 11. 2020
Запуск нового сайта — это всегда хорошо. Кейc Nicole
-
20. 12. 2020
Блог для интернет-магазина: зачем нужен и как его создать
-
12. 03. 2021
In-House VS Outsourcing — все, что нужно знать собственнику бизнеса
-
16. 03. 2021
-
06. 04. 2021
Как бесплатно поднять страницу компании в топ списка выдачи