Разработали дизайн-концепцию для интернет-магазина KINGSTORE

Как сделать удобный интернет-магазин для техники премиум-класса, если у вас сотни городов и тысячи товаров?

Всем привет! Меня зовут Саша, и последние 12 лет моя жизнь — это дизайн. Сегодня я руковожу дизайн-командой в KISLOROD, а в прошлом — помогал крупным брендам и миллионным сервисам обрести их уникальный голос и форму.

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

Если хотите быть в курсе трендов в UX/UI- дизайне, подписывайтесь на наш Telegram-канал.

О клиенте

KINGSTORE — это крупная розничная сеть, специализирующаяся на продаже оригинальной техники Apple. Бренд представлен более чем в сотне городов России и обеспечивает доставку заказов по всей территории страны.

Цель проекта

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

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

Задачи проекта

• Создать современный, технологичный визуальный стиль сайта.

• Сделать навигацию по обширному каталогу более простой и понятной.

• Улучшить карточку товара для комфортного выбора.

• Повысить привлекательность товарной витрины.

• Оптимизировать пользовательский путь от поиска на сайте до оформления заказа.

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

Решение

Главная страница

Главная страница стала ключевой точкой входа и одновременно витриной ассортимента.

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

Структура страницы выстроена по логике постепенного знакомства с ассортиментом:

• популярные категории;

• бестселлеры;

• новинки;

• акции и спецпредложения.

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

Также добавлены блоки с преимуществами компании: условия доставки, гарантии и сервис. Это усиливает доверие и снижает сомнения перед покупкой.

Каталог товаров

Каталог является одним из самых важных разделов, поэтому особое внимание уделили удобству работы с ним.

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

Карточки товаров в списке содержат ключевую информацию:

• изображение;

• название модели;

• стоимость;

• рейтинг.

Благодаря этому пользователь может быстро сравнить несколько вариантов.

Фильтрация

Для упрощения поиска была внедрена система фильтров.

Пользователь может настраивать выборку по различным параметрам:

• бренд;

• ценовой диапазон;

• объём памяти;

• цвет;

• дополнительные характеристики.

Фильтры работают мгновенно и позволяют оперативно обновлять список товаров, сокращая время поиска.

Карточка товара

Карточка товара — центральный элемент, где принимается решение о покупке.

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

Пользователь может выбрать нужные параметры (например, память или цвет), при этом интерфейс автоматически обновляет данные.

Также на странице представлены:

• подробные характеристики;

• описание продукта;

• информация о доставке и покупке.

Дополнительно добавили блоки рекомендаций — похожие товары и аксессуары, что способствует увеличению среднего чека.

Результат

В результате был создан современный и удобный интерфейс интернет-магазина с продуманной структурой.

Обновленный дизайн:

• делает ассортимент более понятным и визуально привлекательным;

• упрощает поиск товаров;

• помогает пользователю быстрее принять решение и оформить покупку.

А как вы решаете проблему навигации в больших каталогах? Делитесь опытом в комментариях.