Скриншоты
Как выглядит прототип
Материалы проекта: схемы категории, фильтра и листинга.
Спроектировали прототип интернет-магазина косметики: анализ 15 конкурентов, пересечения коммерческих факторов, карта типовых страниц и детальные схемы категории — с умным фильтром, тегами и продуманной карточкой на листинге.
Для будущего интернет-магазина косметики нужно было определить: какие страницы должны быть на сайте, какие коммерческие факторы обязательны и как устроить категорию, чтобы она и продавала, и ранжировалась.
Прототип решает это до начала дизайна: схематически фиксирует все элементы страниц. В дизайне они могут выглядеть иначе, но логика и состав сохраняются — значит, ни один конверсионный блок не потеряется по дороге.
Основой методики стал анализ ниши: без данных о том, что работает у растущих конкурентов, любое проектирование превращается в гадание.
Главный экран проекта — категория магазина: фильтр, теги, листинг.
Проанализировали 15 конкурентов, выбрали растущие сайты и выписали страницы каждого. Затем собрали пересечения коммерческих факторов, встречающихся у всех сильных игроков: логотип, телефон, «Заказать звонок», гео, слайдер, услуги, оплата, отзывы, вопрос-ответ, прайс. На основе этого выстроили структуру типовых страниц с картой вложенности и списком прототипов.
Детально проработали категорию. Первый экран: хлебные крошки, H1, блок тегов со ссылками на категории и коллекции, сортировка, выбор количества товаров, слайдер тегов. Фильтр из 11 элементов: цена «от-до» с бегунком, чекбоксы акций, фильтры по типу, показаниям и типу продукта, сворачивание, плюс ссылки на тематическую статью и советы косметолога по категории.
Карточка на листинге тоже просчитана: значок хита, избранное, фото, значок подарка при покупке, рейтинг, код и название товара в две строки — всё, что помогает выбрать, не проваливаясь в карточку.
Материалы проекта: схемы категории, фильтра и листинга.
Проект получил обоснованную структуру и детальные схемы страниц каталога: категория с умным фильтром, тегами и конверсионным листингом, где каждый элемент подтверждён практикой 15 конкурентов.
По таким схемам дизайнер и разработчик работают без догадок, а SEO-требования — от тегов до перелинковки через блоки статей — заложены в сайт с первого дня.
Вывод: сильный каталог начинается не с дизайна, а с прототипа на данных — тогда фильтры, теги и листинги работают и на покупателя, и на поисковые системы.
Оставьте адрес сайта — аудит-движок проверит его по 200 пунктам, покажем точки роста и пришлём план работ с часами, как в этом кейсе.
Получить бесплатный аудитЗаполните форму — ответим в течение рабочего часа.
Нажимая кнопку, вы соглашаетесь с политикой обработки ПДн и даёте согласие