Кейс: редизайн інтернет-магазину «Літопис»
Час не стоїть на місці, і жоден сайт не може залишатися актуальним, цікавим та привабливим без постійної роботи над зовнішнім виглядом, юзабіліті, функціональністю та адаптивністю. І одного разу в історії практично будь-якого проекту настає момент, коли локальними правками вже не обійтися, – потрібен редизайн. Саме таке завдання, а також його вирішення, ми розглянемо в сьогоднішньому кейсі про редизайн інтернет-магазину “Літопис” на платформі Бітрікс.
Про проект
Редизайн інтернет-магазину на Бітрікс крок за кроком
Замовник вирішив суттєво оновити та переробити весь дизайн: змінено колірну схему, геометрію блоків, ширину сайту, додано нові набори іконок тощо. Глибокі зміни зачіпають практично кожну сторінку і кожен блок сайту, при цьому суттєвому доопрацюванню підданий і функціонал.
Роботи проводились на основі макетів, підготовлених дизайнером, а також технічного завдання від замовника у довільній формі.
Для початку розберемо кілька елементів-блоків, які відображаються на кожній сторінці даного ресурсу – “шапка” (header), меню та “підвал” (footer).
Шапка сайту
Як ви бачите, ми істотно скоротили цей елемент, прибрали зайве “повітря”, повністю переробили відображення, зробивши шапку компактнішою, але зберігши при цьому всю необхідну інформацію. Про великі кнопки каталогу читайте нижче.
При прокручуванні вниз з’являється дуже зручна панель скролл, на якій виїдені всі необхідні значки-посилання. Панель доступна на всіх сторінках цього сайту.
Що стосується функціоналу, то на сайт ми додали сторінку обраного та зробили лічильники відображення товарів у кошику та обраному.
Бокове меню
Істотно переробили ліве меню для навігації за каталогом, яке є на всіх сторінках сайту. Зробили окремі підкатегорії для Авторів та видавництв, прибравши їх із бічної панелі.
До редизайну у нас не було підменю, що розкриваються, а зараз кожне підменю каталогу можна розгорнути і перейти безпосередньо в потрібну підкатегорію.
Загалом бічна панель стала менш навантаженою інформацією, але більш функціональною та практичною.
Футер сайту
Структура футера залишилася колишньою. У ньому переробили посилання та додали кілька нових, зробили відображення більш простим, не відволікаючим від основного контенту сторінки.
Головна сторінка
Особою кожного сайту є його головна сторінка, і саме їй ми приділили особливу увагу. Угорі розташували великий гарний та адаптивний банер, який привертає увагу, ілюструючи актуальні знижки та акції. Далі блок переваг компанії.
Родзинкою цієї сторінки є великий блок із добірками продукції. У ньому розташовані кілька вкладок із найбільш актуальними, популярними, рекомендованими товарами, які одразу можна додати до кошика. Також товари можна переглянути та/або перейти у відповідний розділ каталогу.
Сторінка каталогу
Не менш значущі сторінки сайту – сторінки розділів каталогу. Ми не вносили кардинальних змін до структури відображення товарів, їх також можна відобразити і плиткою і списком, проте зараз на кожному товарі виведено набагато більше інформації. Це дуже зручно: у картці видно кількість фото та відгуків, більше відомостей про ціну та знижки, доданий функціонал “Обраного”.
Над картками товарів додали короткий опис даного розділу, що повністю змінили сортування під новий дизайн.
Сторінка товару
Чи не вирішальне значення для конверсії в інтернет-магазині має сторінка товару. Тут зміни функціоналу дуже суттєві:
- додали корисні кнопки «Попередній товар» та «Наступний товар» для швидкої навігації по розділу;
- додали вкладки «Опис» та «Зміст» для структурування опису товару, а також вкладку відгуків, де покупець може залишити відгук про цей товар;
- прямо зі сторінки товару клієнт може поділитися цими товарами в будь-яких соцмережах.
Слайдер зображень
Окремої згадки на сторінці товару заслуговує на принципово новий слайдер зображень. Тепер при натисканні фото товару розгортаються на повний екран з можливістю перегортання та зручного перегляду всіх картинок.
Більш практичним (і адаптивним!) стало перегортання товарів у картці товару.
Особистий кабінет
Особистий кабінет – сторінка на якій клієнт може отримати всю необхідну інформацію на замовлення, авторизації, змінити пароль, переглянути кошик та умови оплати. Функціонально ЛК змінився мало, проте став більш доброзичливим для користувача, у бічному меню з’явилося більш інформативних посилань.
Умови доставки
Як Ви вже встигли помітити, у шапці сайту з’явився блок вибору міста, який працює автоматично, але покупець може вибрати своє місто вручну.
При переході на сторінку «Умови доставки» покупець отримує інформацію щодо умов доставки для вибраного міста. Тут же за потреби можна поміняти обраний населений пункт і подивитися способи/ціни/терміни доставки для будь-якої точки РФ в реальному часі.
Інші статичні сторінки
Усі інформаційні статичні сторінки інтернет-магазину зазнали косметичного редизайну. Змінився стиль заголовків, кольору, вигляд кнопок, розмір шрифтів тощо.
Також ми додали кілька нових сторінок. Наприклад, «Відгуки», де покупці можуть переглянути всі відгуки про інтернет-магазин з оцінками, а також поділитися своєю думкою.
Кошик
Помітно змінився і кошик. Її дизайн став більш дружелюбним та інтуїтивно зрозумілим, з’явилися дані про залишки обраного товару на складі, детальна інформація про знижки та їх обмеження.
Адаптивність
На сьогоднішній день чи не більшість візитів на сайти здійснюється за допомогою смартфонів. Отже адаптивність сайту, зручність відображення на мобільних пристроях, є дуже важливою складовою успіху сайту.
На даний момент інтернет-магазин “Літопис” повністю оптимізований під будь-яку роздільну здатність екрана від 320 до 2540 пікселів. Не дивно, що сайт успішно пройшов перевірку на адаптивність у Google:
https://search.google.com/test/mobile-friendly
Адаптивність шапки інтернет-магазину
Адаптивність каталогу інтернет-магазину
Кнопки в каталозі під час відображення плиткою та списком – великі, що робить інтерфейс зручнішим для натискання пальцем на смартфоні. Скролл-панель також кріпиться до верху екрану та допомагає у навігації по сайту.
Резюме
Даний кейс про редизайн інтернет-магазину для нас є далеко не першим, але одним з найбільших, адже змінам зазнав не тільки зовнішній вигляд, але й функціональність сайту. Над проектом з нашого боку одночасно працювали дизайнери, верстальники та Бітрікс-програмісти.
Важливо відзначити, що під час робіт інтернет-магазин залишався на 100% робочим, а перехід зайняв не більше години. Зазвичай такі дії ми робимо в нічний час, щоб знизити кількість відмов і не втратити жодного Вашого клієнта. Перед перенесенням ми ретельно перевірили працездатність усіх функцій, кросбраузерність та адаптивність.
Комментарии