Визуальная айдентика и 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 оформление заказа требовало долгого скролла.

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

После: мы разделили корзину и чекаут на два отдельных этапа. Корзина стала боковой панелью с мгновенным изменением количества и шкалой до бесплатной доставки.

Чекаут стал отдельной страницей без главной навигации и футера, с тремя понятными блоками: «Контакты», «Доставка» и «Оплата»