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

1. Вводная задача от заказчика, проблематика, цели

Мы перепроектировали сайт группы компаний «Современное образование». Компания оснащает школы: от парт до цифровых лабораторий и планетариев. Главная перемена — каталог построен не по категориям товаров, а по кабинетам школы. Ниже рассказываем, почему выбрали такую логику, что сделали с типографикой под аудиторию 45+ и как собрали карточку, корзину и контентные страницы.

Клиент

Компания работает 17 лет. За это время она оснастила 2785 школ в 74 регионах. У нее собственное производство мебели.

Продажи идут двумя путями: прямые заказы через сайт и госзакупки по 44-ФЗ и 223-ФЗ. Поэтому сайт живет не по законам обычного e-commerce:

• решение принимают неделями, а не за одну сессию;
• перед заказом нужна консультация и подбор под кабинет и ФГОС;
• рядом с кнопкой «В корзину» нужны «Запросить КП» и «Добавить в смету»;
• документы, гарантии и прошлые проекты влияют на выбор не меньше цены.

Целевая аудитория:

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

Руководители отделов закупок — ориентируются на спецификации, сроки, сервис и юридическую корректность документов.

Представители министерства образования.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Что мешало старому сайту

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• подняли кегель по всей иерархии: заголовки, названия товаров, цены, подписи;
• упростили сетку и добавили воздух вокруг блоков;
• усилили контраст текста и фона;
• сделали кнопку «В корзину» сплошной и во всю ширину карточки товара.

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

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

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

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

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

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

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

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

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

• характеристики и цену;
• наличие и сроки поставки;
• фото и галерею 360°, если она есть;
• кнопки «В корзину», «Запросить КП», «Добавить в смету»;
• блок с реализованными проектами.

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

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

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

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

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

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

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

Что это дает:

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

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

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

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

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

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

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

3. Результаты сотрудничества

Мы собрали новую архитектуру сайта целиком — от логики каталога до визуальной системы:

• каталог собран вокруг задачи пользователя, а не вокруг структуры склада;
• интерфейс читается аудиторией 45+;
• карточка показывает все на первом экране;
• оформление заказа занимает один экран;
• у сайта появились свои иллюстрации, система акцентов и места под маскота;
• контентные страницы работают на библиотеке блоков.

Дмитрий Сергеевич Неткачев

Генеральный директор, ГК «Современное образование

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

KISLOROD подошел нам по нескольким причинам: сильная экспертиза в интерфейсах и B2B-e-commerce; умение работать с нестандартной логикой каталога и большим ассортиментом; готовность включаться в диалог и дорабатывать наши идеи, а не выполнять задачу формально.

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