Візуальна айдентика і UI Kit: масштабована система бренду

До: логотип у формі емблеми мав багато дрібних деталей і погано працював у цифрових інтерфейсах, особливо в mobile-хедері.

Після: ми оновили логотип і зберегли початковий мотив гір. Новий знак поєднує намет як символ прихистку, гори і Полярну зірку як орієнтир. Зірка стала впізнаваним елементом сайту і позначає заголовок кожної секції.

На цій основі ми створили детальну дизайн-систему з компонентами для повторного використання і всіма їхніми станами. Вона дає Wikinggruppen чіткі правила для впровадження, а General Prepper зможе розвивати сайт без втрати візуальної цілісності й айдентики бренду.

Редизайн головної: зрозумілий старт для B2C- і B2B-покупців

До: головна відкривалася двома великими банерами, які на mobile займали перші два екрани, а далі йшли ряди товарів без заголовків секцій. Крім меню, вивчати асортимент не було як, а бізнес-клієнти могли знайти свою пропозицію лише через маленьке посилання у верхній панелі.

Після: ми перебудували головну навколо двох аудиторій компанії. Hero-блок з першого екрана дає окремі входи для B2C- і B2B-клієнтів, а підбір за сценарієм (Shop by Scenario) і короткий квіз допомагають тим, хто ще не знає, що їм потрібно.

Хіти продажів, сезонні категорії, бренди, відгуки і гайди з підготовки до надзвичайних ситуацій дають більше способів вивчити асортимент і знайти потрібні товари.

Дизайн навігації і каталогу: великий асортимент, у якому легко зорієнтуватися

До: меню займало три рядки текстових посилань, мало понад 20 пунктів без іконок, а на mobile зсувало контент сторінки нижче за весь список. На сторінках категорій перед першим товаром стояли банер, довгий опис і до 20 кнопок підкатегорій, а частина категорій мала лише фільтри «Бренд» і «Ціна».

Після: ми реорганізували каталог у 17 категорій з лінійними іконками і спростили доступ до підкатегорій на desktop і mobile.

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

Оптимізація картки товару, яка допомагає купувати

До: поруч із кнопкою «Купити» сторінка показувала три загальні рядки про безпечну оплату, підтримку електронною поштою і швидку доставку. Поживна цінність, термін зберігання і склад були одним довгим текстовим блоком нижче, а відгуків і схожих товарів на сторінці не було.

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

Закріплена панель з кнопкою покупки тримає головну дію в полі зору. Документація до товару допомагає муніципалітетам із закупівлями, а схожі товари і комплекти підтримують подальші покупки.

Редизайн чекауту: менше перешкод там, де губилися кошики

Чекаут був відправною точкою проєкту. GA4 і Microsoft Clarity показали, де користувачі відпадали: значна частина відвідувачів так і не доскролювала до кнопки замовлення, а приблизно двоє з трьох користувачів, які почали оформлення, його не завершували.

До: кошик і чекаут були однією довгою сторінкою. Щоб змінити кількість товару, сторінку треба було окремо оновлювати, оплата залишалася заблокованою, доки користувач не обере доставку, а на mobile оформлення замовлення вимагало довгого скролу.

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

Після: ми розділили кошик і чекаут на два окремі етапи. Кошик став бічною панеллю з миттєвою зміною кількості і шкалою до безкоштовної доставки.

Чекаут став окремою сторінкою без головної навігації і футера, з трьома зрозумілими блоками: «Контакти», «Доставка» і «Оплата».