Кейс Совобр: как мы пересобрали сайт поставщика школьного оборудования

Прежний сайт работал на готовом решении Aspro: Next. Снаружи это был аккуратный магазин. Внутри мы нашли пять проблем.

Линейный каталог. Категории шли плоским списком. Логики перехода с уровня на уровень не было, фильтры работали непоследовательно. Чтобы собрать кабинет химии, пользователь искал позиции по десятку разных разделов.

Мелкий интерфейс. Текст и превью товаров были на грани читаемости. Кликабельные зоны не отличались от некликабельных. Контраста не хватало.

Карточка не продавала. Чтобы собрать картину товара, приходилось скроллить страницу и переключать вкладки. Добавить товар в корзину из каталога было нельзя. При подборе 50 позиций это превращалось в долгую механическую работу.

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

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

Оценка и прототипирование

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

Мы разобрали каждую гипотезу отдельно. Часть идей вошла в финальную структуру без правок. Часть переработали после анализа. От части отказались и объяснили почему.

Новая логика каталога

Дерево категорий описывает склад. Наш пользователь мыслит помещением.

На входе в каталог мы поставили изометрическую модель школы с переключением этажей. Пользователь выбирает этаж и наводит курсор на помещение. Всплывает подсказка: «Кабинет астрономии», «Агрокласс», «Наградная атрибутика». Клик ведет в подборку для этого кабинета — мебель, лабораторные комплекты, техника, пособия.

Единственным входом модель мы делать не стали. Постоянные клиенты уже привыкли к обычному каталогу, и прогонять их через интерактив значит отнимать время. Входов получилось три:

1. Изометрическая школа. Для новых пользователей и тех, кто оснащает помещение целиком.

2. Плитка типовых кабинетов под моделью. Для тех, кто точно знает, что ему нужно.

3. Классический каталог с деревом разделов, фильтрами и сортировкой. Для постоянных клиентов.

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

Типографика оказалась главной работой

Самое полезное решение проекта не интерактив, а читаемость. Что мы сделали:

• подняли кегель по всей иерархии: заголовки, названия товаров, цены, подписи;

• упростили сетку и добавили воздух вокруг блоков;

• усилили контраст текста и фона;

• сделали кнопку «В корзину» сплошной и во всю ширину карточки товара.

Интерфейс стал плотнее по информации и спокойнее по виду. Внимание ведет иерархия, а не яркие заливки.

Свои иллюстрации вместо стоковых иконок

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

• пак изображений для всех разделов каталога, у каждого кабинета и категории своя предметная иллюстрация;

• систему мягких акцентов, где синий работает как цвет действия, а не как украшение;

• единый стиль иллюстраций в связке с айдентикой клиента.

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

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

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

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

Мы вынесли на первый экран:

• характеристики и цену;

• наличие и сроки поставки;

• фото и галерею 360°, если она есть;

• кнопки «В корзину», «Запросить КП», «Добавить в смету»;

• блок с реализованными проектами.

Примеры проектов стоят рядом с кнопкой, а не в конце страницы. Для закупщика чужой опыт работает как аргумент.

Табличный режим для тех, кто закупает десятками

Плитка удобна, когда выбираешь глазами. Снабженцу с 40 позициями она мешает.

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

Блоки в CMS вместо ручной верстки страниц

На старом сайте каждую страницу собирали руками. Одни и те же тексты дублировались, правку вносили в десятки мест.

Мы разложили контентные страницы на переиспользуемые инфоблоки. «О компании», «Преимущества», «Гарантии», «Доставка», «Проекты», «Производство», «Вакансии» стали независимыми модулями. Их можно обновлять, изменения автоматически подхватываются на всех страницах.

Что это дает:

• новая страница собирается из готовых блоков;

• стиль не расходится по сайту;

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

Так дизайн-система доехала до CMS. Контент-менеджер клиента соберет страницу только из тех блоков, которые мы нарисовали.

Корзина и оформление заказа на одном экране

На старом сайте люди чаще всего терялись именно здесь. Лишние шаги, переходы между страницами, повторные формы.

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

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

Рядом с обычным заказом работают кнопки «Запросить КП» и «Добавить в смету». Не каждая школьная закупка заканчивается оплатой картой.

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

• интерфейс читается аудиторией 45+;

• карточка показывает все на первом экране;

• оформление заказа занимает один экран;

• у сайта появились свои иллюстрации, система акцентов и места под маскота;

• контентные страницы работают на библиотеке блоков.