Разработка интернет-магазина тёплой одежды от производителя

Термобелье «Norveg» — это особая одежда, в которой не просто тепло в холода, она работает как климат-контроль. Компания уделяет особое внимание интернет-каналу продаж и активно развивает свой магазин.

Стилеобразующие элементы проекта

Вместо привычных «Helvetica» и «Futura» выбрали более редкий шрифт от автора «Futura» — он выглядел свежо и выделял сайт.

Цветовую схему взяли из обновлённой айдентики клиента, чтобы сохранить преемственность между сайтом и печатными материалами.

Чтобы добавить индивидуальности, разработали набор абстрактной графики для интерфейса и баннеров.  

Навигация как инструмент продаж

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

Структуру разделили по типам покупателей и видам товаров, а подборки сформировали по активностям — для пользователей, которые ещё не определились с выбором.  

• Использовали стандартную двенадцатиколоночную сетку — она удобно делится на 2, 3, 4 и 6 подколонок и позволяет гибко собирать макеты.
• В первом экране разместили стилеобразующие элементы, которые затем симметрично используются в остальных разделах и интерфейсных компонентах.
• Отдельный акцент сделали на подборках для разных аудиторий — «мама, папа, дочка, сын», чтобы каждый посетитель быстрее находил подходящий продукт.  

• Блок «Лидогенератор»: на основе аналитики клиент формирует подборки и ссылки на самые популярные разделы и акции.
• В футере или околофутера зона работы с соц. сетями. Сссылки и фиды из сетей клиента   

Фильтрация и акцент на фото товара.

Фильтрацию разделили на две части: популярные параметры (цена, размер, цвет, температура) вынесли под заголовок, а фильтр по характеристикам формируется отдельно для каждого раздела.

Эволюция карточек товаров за несколько лет показала устойчивый тренд — фотографии становятся всё крупнее. В текущей версии изображения занимают около 70% полезной площади карточки.  

Оптимизация карточки по аналитике

Карточка товара постоянно дорабатывается на основе данных аналитики. В текущей версии в первый экран обязательно попадает главное фото, при этом изображения занимают около 50% основного блока.

Вторая часть блока отведена под «SKU-параметры» — цвета, размеры и количество. Все основные действия с товаром сосредоточены здесь, а переход к отзывам осуществляется по клику с прокруткой к нужному разделу.  

• Ширина экранов позволяет разместить всю справочную информацию о товаре одной строкой в три колонки.
• Апсейл-блок. Комплектации клиент подбирает сам для увеличения общего чека.
• Большой акцент на отзывах: согласно опросам, для женской аудитории это ключевой фактор принятия решения о покупке. Плюс мотивируем писать отзывы бонусными баллами.  

Накопительная система и бонусные баллы

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

Максимальная проработка интерфейсов

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

+30% к конверсии оформления

Корзину спроектировали так, чтобы весь процесс оформления проходил на одном экране. Для пользователей, которые не хотят заполнять длинную форму, добавили «Быстрый заказ» — достаточно указать имя и номер телефона.

Такой подход позволил увеличить конверсию на 30%.  

Вспомогательные интерфейсы для разных сценариев

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

Переход на адаптивную вёрстку

Изначально, ещё в 2014 году, для проекта разрабатывали отдельную мобильную версию. Со временем такой подход уступил адаптивной вёрстке — она практичнее, потому что контент автоматически перестраивается под устройство и не требует поддержки двух отдельных наборов шаблонов.