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

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

Редизайн интернет магазина Sport Discount

Sport Discount — это крупный интернет-магазин спортивных товаров от мировых брендов. Первый дизайн магазина мы презентовали клиенту в 2017 году. С тех пор показатели бизнеса значительно выросли, и функционал сайта нужно было подтягивать под новые объемы продаж и стратегию развития.

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

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

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

Помимо этого, на редизайн сайта повлияли еще и такие факторы: 

  • масштабирование бизнеса

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

  • спрос на mobile-версию

К 2020 году количество mobile-пользователей значительно увеличилось, по сравнению с 2017 годом. Сейчас практически 76% пользователей на сайте оформляют заказы через мобильные устройства, поэтому нужна была эффективная оптимизация ресурса.

  • появление новых паттернов поведения пользователей

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

  • анализ существующего взаимодействия с сайтом

Чтобы грамотно оптимизировать сайт и учесть максимальное количество потребностей пользователей мы провели юзабилити аудит и проанализировали тепловые карты с помощью сервисов Яндекс вебвизор и Plerdy, а также — пути взаимодействия с сайтом через Google Analytics.

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

 

  • Десктоп 

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

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

До

После

 

Также мы увеличили количество слайдеров с товарами — для быстрого доступа поисковых роботов и пользователей. 

 

До

 

После

 

Уменьшили высоту подвала и убрали оттуда дублирующиеся ссылки. Оставили только самую нужную для пользователей информацию.  

 

До

дизайн подвала сайта до редизайна

 

После

редизайн подвала интенрет магазина sport discount

 

  • Мобильная версия 

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

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

 

Карточка товара

  • Декстоп

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

До

старый дизайн картчоки товара интернет магазина спортивных товаров

 

После

дизайн картчоки товара интернет магазина после редизайна

 

  • Мобильная версия

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

До / После

старый дизайн картчоки товара интернет магазина спортивных товаров дизайн картчоки товара интернет магазина после редизайна

 

Корзина 

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

До

дизайн страницы корзины до редизайна

 

После

дизайн страницы корзины после редизайна

 

Оформление заказа

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

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

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

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

До

 

После

 

 

старый дизайн картчоки товара интернет магазина спортивных товаров дизайн картчоки товара интернет магазина после редизайна

 

 

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