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

Sport Discount: великий інтернет-магазин спортивних товарів світових брендів. Перший дизайн магазину ми презентували клієнту у 2017 році. Відтоді показники бізнесу суттєво зросли, і функціонал сайту потрібно було підтягнути під нові обсяги продажів і стратегію розвитку.

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

За чотири роки роботи сайт дуже динамічно розвивався у функціоналі та асортименті, але найчастіше відповідні зміни в інтерфейсі впроваджувалися на запит, нашвидкуруч і не завжди виважено. З часом усі ці зміни почали суттєво розмивати візуальну концепцію: з'явилися різнорідні відступи, нові шрифти та їхні розміри.

Крім того, на редизайн сайту вплинули й такі чинники:

• масштабування бізнесу

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

• попит на мобільну версію

До 2020 року кількість мобільних користувачів суттєво зросла порівняно з 2017-м. Зараз майже 76% користувачів сайту оформлюють замовлення з мобільних пристроїв, тож потрібна була ефективна оптимізація ресурсу.

• нові патерни поведінки користувачів

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

• аналіз наявної взаємодії із сайтом

Щоб грамотно оптимізувати сайт і врахувати якомога більше потреб користувачів, ми провели юзабіліті-аудит, проаналізували теплові карти за допомогою сервісів Вебвізор і Plerdy, а також шляхи взаємодії із сайтом у Google Analytics.

Головна сторінка

• Десктоп

Проаналізувавши сайт через Вебвізор і Plerdy, ми побачили реальну картину того, як користувачі взаємодіють із сайтом: куди клікають, на чому фокусують увагу, скільки часу проводять на сторінках і якою в підсумку виходить глибина прокрутки. Це дозволило підлаштувати інтерфейс під поведінку користувачів і зробити сайт максимально зручним.

Аналіз показав, що на більшість кнопок у шапці сайту клієнти просто не натискали. Тож ми оптимізували цю частину: перенесли допоміжні посилання в підвал сайту і зменшили висоту самої шапки та слайдера. Завдяки цьому вже на першому екрані з'явився блок із брендами, який одразу розповідає більше про магазин та асортимент.

До

Після

Також ми збільшили кількість слайдерів із товарами, щоб пошукові роботи й користувачі швидше діставалися до товарів.

До

Після

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

До

Після

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

До панелі швидкого доступу додали значки списку бажань і особистого кабінету.

Змінили дизайн бургер-меню: упорядкували його, оновили відповідно до загальної візуальної концепції і вмістили всю інформацію на один екран.

Картка товару

• Десктоп

Структурували інформацію на сторінці для зручного сприйняття і зафіксували блок із ціною та кнопкою «купити». Тепер навіть коли користувач гортає сторінку вниз, він може натиснути «купити», не повертаючись нагору.

До

Після

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

Картка товару в мобільній версії стала структурованішою і більше не переповнена великими інформаційними блоками. Під час прокрутки на екрані фіксується кнопка «купити в один клік», тож користувачу не треба повертатися на початок, щоб оформити замовлення.

До / Після

Кошик

Оновили дизайн сторінки відповідно до загальної візуальної концепції і розмістили інформацію ненав'язливіше.

До

Після

Оформлення замовлення

Винесли цей блок на окрему сторінку, щоб на цьому етапі ніщо не відволікало користувача від завершення покупки.

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

Додали блок для зареєстрованих користувачів, щоб вони не вводили повторно дані про себе і оформлювали замовлення швидше.

Ми реалізували концепцію з урахуванням реальних даних і проведеного аудиту. У результаті редизайну клієнт отримав оновлений робочий ресурс, який враховує поведінку та потреби покупців і виглядає сучасно та стильно.

До

Після

Щоб переконатися, чи потребує оновлення і ваш сайт, замовте юзабіліті-аудит, і ми проведемо глибокий аналіз вашого ресурсу.

Повний проєкт дивіться в кейсі Sport Discount у портфоліо, наш підхід до таких проєктів у розробці e-commerce, а те, як ми працюємо з пошуковою видимістю каталогів такого розміру, у SEO для e-commerce.