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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

• Десктоп 

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

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

До

После

 

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

 

До

 

После

 

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

 

До

 

После

 

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

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

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

 

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

• Декстоп

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

До

 

После

 

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

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

До / После

 

Корзина 

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

До

 

После

 

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

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

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

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

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

До

 

После

 

 

 

 

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