или заполните форму
Компания-поставщик школьного оборудования обратилась с задачей повысить эффективность онлайн-продаж. Совместно с командой клиента мы провели полное переосмысление UX: перестроили каталог под реальные сценарии закупки, упростили оформление заказа и усилили визуальную идентичность бренда.
Клиент
Компания поставляет оборудование и мебель для школ — от базовой мебели и лабораторных комплектов до полного оснащения всей школы под ключ. В ассортимент входят комплексные решения для кабинетов информатики, физики, химии, технологии, начальной школы и других специализированных дисциплин.
Продажи идут по двум каналам: прямые заказы через сайт и участие в закупках/тендерах. Цикл принятия решения длиннее, чем в классическом e-commerce: требуется консультация, подбор под кабинет, сопроводительные документы.
Целевая аудитория:
Продажи идут по двум каналам: прямые заказы через сайт и участие в закупках/тендерах. Цикл принятия решения длиннее, чем в классическом e-commerce: требуется консультация, подбор под кабинет, сопроводительные документы.
Целевая аудитория:
- Администраторы школ, завхозы, бухгалтеры — пользователи среднего и старшего возраста чаще работают с десктопа, ожидают крупные шрифты, понятную навигацию и минимум украшений.
- Руководители отделов закупок — ориентируются на спецификации, сроки, сервис и юридическую корректность документов.
- Представители министерства образования.
Задача
Прежний сайт на готовом решении Aspro: Next не работал так, как ожидал клиент и пользователи. Внешне интернет-магазин выглядел аккуратно, но внутри не решал ключевых задач бизнеса: не помогал быстро найти нужное оборудование, не подталкивал к заказу и не вызывал доверия.
Разбор структуры, визуала и пользовательских сценариев показал несколько системных проблем, которые тормозили рост и конверсию проекта:
Разбор структуры, визуала и пользовательских сценариев показал несколько системных проблем, которые тормозили рост и конверсию проекта:
Все эти проблемы показывали простую вещь: старый сайт перестал соответствовать потребностям бизнеса и поведениям пользователей. Клиенту был нужен не просто новый дизайн, а интерфейс, который помогает выделиться среди конкурентов и упрощает путь специалиста по закупкам.
Так появились ключевые цели проекта: выстроить каталог вокруг логики закупщиков образовательных учреждений, сократить число шагов на пути пользователя, вернуть бренду узнаваемый визуальный стиль, подтянуть конверсию до уровня конкурентов.
Так появились ключевые цели проекта: выстроить каталог вокруг логики закупщиков образовательных учреждений, сократить число шагов на пути пользователя, вернуть бренду узнаваемый визуальный стиль, подтянуть конверсию до уровня конкурентов.
Решение
1. Оценка и прототипирование
Клиент пришел с собственными набросками страниц и четким пониманием структуры сайта. Несмотря на неформатный вид прототипов, они показывали, как заказчик видит путь пользователя и где ожидает улучшений. Мы сразу заметили, что за идеей стоит практический опыт — клиент сам анализировал поведение аудитории и сайты конкурентов.
Изначально клиент искал подрядчика с опытом разработки на 1С-Битрикс, экспертизой в UX для разновозрастной аудитории и четким чувством визуального баланса. Эти требования определили вектор нашей работы: минимум шаблонности, максимум логики и визуальной чистоты интерфейса с четкой иерархией элементов.
В процессе уточнения задач мы сохранили открытый диалог: часть идей клиента вошла в финальную структуру без изменений, часть была переработана после UX-анализа. Так проект сразу стал совместной экспертизой — где клиент хорошо понимал свою аудиторию, а мы обеспечили системное воплощение этой логики в интерфейсе.
Изначально клиент искал подрядчика с опытом разработки на 1С-Битрикс, экспертизой в UX для разновозрастной аудитории и четким чувством визуального баланса. Эти требования определили вектор нашей работы: минимум шаблонности, максимум логики и визуальной чистоты интерфейса с четкой иерархией элементов.
В процессе уточнения задач мы сохранили открытый диалог: часть идей клиента вошла в финальную структуру без изменений, часть была переработана после UX-анализа. Так проект сразу стал совместной экспертизой — где клиент хорошо понимал свою аудиторию, а мы обеспечили системное воплощение этой логики в интерфейсе.
- Дмитрий Сергеевич НеткачевГенеральный директор группы компаний «Современное образование»«Мы искали команду, которая сможет выстроить удобный и понятный цифровой продукт под нашу аудиторию. Важно было совместить глубокую UX-проработку, знание e-commerce и опыт работы со сложными каталогами.
KISLOROD подошел нам по нескольким причинам:- сильная экспертиза в интерфейсах и B2B-e-commerce;
- умение работать с нестандартной логикой каталога и большим ассортиментом;
- готовность включаться в диалог и дорабатывать наши идеи, а не выполнять задачу формально.
2. Новая логика каталога
Вместо классического дерева категорий, где пользователь выбирает из десятков однотипных пунктов, мы выстроили структуру вокруг оснащения конкретного кабинета. В основе новой архитектуры — интерактивная 3D-модель школы. Пользователь заходит на сайт, видит здание, выбирает этаж и кабинет, а система показывает оборудование, соответствующее этому помещению. Например, при переходе в раздел «Кабинет физики» отображается подборка мебели, лабораторных комплектов и техники для предмета.
Такой подход меняет сам сценарий взаимодействия. Пользователь больше не тратит время на поиск по категориям — он сразу видит контекст, знакомый из офлайна. Это понятный сценарий для целевой аудитории. Чтобы сохранить привычный опыт для постоянных клиентов, мы добавили два дополнительных сценария: прямой выбор кабинета из списка типовых локаций и классический каталог с фильтрами, сортировкой и двумя представлениями — плиточным и табличным.
С технической стороны каталог построен на новой сущностной модели: локация → кабинет → категория → товар. Это упростило работу с данными и позволило использовать одну систему для интерактива и стандартных списков.
С технической стороны каталог построен на новой сущностной модели: локация → кабинет → категория → товар. Это упростило работу с данными и позволило использовать одну систему для интерактива и стандартных списков.
3. Работа с визуалом
Основная аудитория — пользователи, которые редко сидят за мобильными устройствами и чаще работают на больших экранах. Поэтому первым шагом стала работа с типографикой и визуальным контрастом.
Мы увеличили кегель шрифтов, упростили сетку, задали чистые зоны вокруг элементов и убрали визуальный шум. Интерфейс стал структурнее — за счет акцентов и продуманного порядка элементов внимание пользователя теперь распределяется естественно.
Следующий шаг — придание уникальности. Старый дизайн не запоминался: пользователи прямо говорили на кастдевах, что сайт выглядит как многие другие. Чтобы вернуть узнаваемость, команда предложила собственный визуальный язык.
Создали:
Дополнительно клиент инициировал разработку анимированного маскота, который будет появляться в интерфейсе и помогать пользователю. Его задача — визуально подсказывать сценарии, не мешая основной задаче. Мы заложили в дизайн точки появления и правила поведения персонажа, чтобы его можно было подключить без перестройки интерфейса.
Все визуальные элементы прошли проверку на читаемость и совместимость с контентом: при отключении эффектов сайт все равно остается функциональным и чистым.
Мы увеличили кегель шрифтов, упростили сетку, задали чистые зоны вокруг элементов и убрали визуальный шум. Интерфейс стал структурнее — за счет акцентов и продуманного порядка элементов внимание пользователя теперь распределяется естественно.
Следующий шаг — придание уникальности. Старый дизайн не запоминался: пользователи прямо говорили на кастдевах, что сайт выглядит как многие другие. Чтобы вернуть узнаваемость, команда предложила собственный визуальный язык.
Создали:
- пак уникальных изображений для всех разделов каталога;
- систему контрастных, но мягких акцентов вместо ярких заливок;
- единый стиль иллюстраций, интегрированный с фирменной айдентикой клиента.
Дополнительно клиент инициировал разработку анимированного маскота, который будет появляться в интерфейсе и помогать пользователю. Его задача — визуально подсказывать сценарии, не мешая основной задаче. Мы заложили в дизайн точки появления и правила поведения персонажа, чтобы его можно было подключить без перестройки интерфейса.
Все визуальные элементы прошли проверку на читаемость и совместимость с контентом: при отключении эффектов сайт все равно остается функциональным и чистым.
4. Работа с карточкой товара
Клиент с самого начала настаивал: карточка должна быть максимально информативной с первого экрана. В старом варианте многие важные блоки — описание, документы, гарантии, фото и примеры проектов — прятались ниже сгиба. Пользователь терял контекст и уходил, не дойдя до кнопки «Купить».
В новой версии карточки собрали на первом экране все основные данные:
В новой версии карточки собрали на первом экране все основные данные:
- ключевые характеристики и цена;
- наличие и сроки поставки;
- фото товара и галерея 360° (если есть);
- кнопки быстрого действия: «В корзину», «Запросить КП», «Добавить в смету»;
- блок с примерами реализованных проектов.
Также мы предусмотрели два варианта представления каталога:
Во втором варианте товары можно добавлять в корзину прямо из каталога, без перехода в карточку. Это удобно для снабженцев и бухгалтеров, которые работают с десятками позиций подряд.
- Плитка — для визуального восприятия и быстрого обзора.
- Список (табличный режим) — для тех, кто закупает большими объемами.
Во втором варианте товары можно добавлять в корзину прямо из каталога, без перехода в карточку. Это удобно для снабженцев и бухгалтеров, которые работают с десятками позиций подряд.
Большинство клиентов работает с десктоп-устройств, поэтому в дизайне мы сделали акцент на крупной типографике, плотной информации, без скролла и избыточных декоративных элементов.
5. Контентная структура и переиспользуемые блоки.
Одно из требований проекта — ускорить разработку и упростить поддержку контента. На старом сайте каждый раздел создавался вручную: одни и те же тексты и элементы дублировались, а любое изменение приходилось вносить отдельно в десятки страниц.
Чтобы этого избежать, мы внедрили систему переиспользуемых инфоблоков — гибких модулей, которые можно подключать к любой странице без переписывания кода и дизайна.
Чтобы этого избежать, мы внедрили систему переиспользуемых инфоблоков — гибких модулей, которые можно подключать к любой странице без переписывания кода и дизайна.
Теперь блоки «О компании», «Преимущества», «Гарантии», «Доставка», «Проекты» – независимые компоненты. Их можно обновлять, изменения автоматически подхватываются на всех страницах.
Такой подход решает сразу три задачи:
С технической стороны это стало основой для дизайн-системы на уровне CMS: единая библиотека блоков помогает масштабировать сайт без пересборки интерфейсов.
Такой подход решает сразу три задачи:
- Скорость разработки. Новые страницы собираются быстрее, потому что большая часть контента уже готова.
- Единообразие. Визуальный и текстовый стиль сохраняется по всему сайту, без расхождений.
- Гибкость. Один и тот же блок можно адаптировать под разные разделы, меняя только контекст или наполнение.
С технической стороны это стало основой для дизайн-системы на уровне CMS: единая библиотека блоков помогает масштабировать сайт без пересборки интерфейсов.
6. Оформление заказа
На старом сайте именно на этом этапе пользователи чаще всего терялись: лишние шаги, переходы между страницами и дублирующиеся формы приводили к отказам.
Клиент хотел, чтобы новая версия убрала этот барьер и позволила пользователю завершить покупку без перегрузки.
Мы отказались от многоступенчатой схемы и спроектировали единый чекаут, где корзина и оформление объединены на одной странице. Это сократило количество шагов и позволило завершить покупку без перегрузки интерфейса.
Клиент хотел, чтобы новая версия убрала этот барьер и позволила пользователю завершить покупку без перегрузки.
Мы отказались от многоступенчатой схемы и спроектировали единый чекаут, где корзина и оформление объединены на одной странице. Это сократило количество шагов и позволило завершить покупку без перегрузки интерфейса.
Мы учли, что в B2B-сценариях корзина может содержать десятки и даже сотни позиций. Чтобы сохранить удобство работы, видимую область корзины ограничили шестью товарами и добавили внутренний скролл. В результате даже большие заказы занимают компактную область и остаются удобными для управления.
Теперь пользователь может:
Такое решение экономит время и снижает вероятность ошибки. Для корпоративных клиентов добавлены сценарии «Запросить КП» и «Добавить в смету», чтобы упростить закупочные процессы.
Теперь пользователь может:
- изменить количество и состав товаров прямо в корзине;
- сразу увидеть сумму и применить скидки;
- выбрать способ оплаты и доставки, не переходя на новый экран.
Такое решение экономит время и снижает вероятность ошибки. Для корпоративных клиентов добавлены сценарии «Запросить КП» и «Добавить в смету», чтобы упростить закупочные процессы.
Результаты
К моменту завершения работы команда сформировала полностью новую архитектуру сайта — от логики каталога до визуальной системы.
Главные изменения:
Теперь сайт помогает школам выбирать оборудование проще, быстрее и увереннее, а компании — говорить с клиентом на языке, который он действительно понимает.
Хотите, чтобы ваш сайт тоже работал как инструмент продаж, а не витрина? Свяжитесь с нами, мы перестроим ваш UX под задачи бизнеса.
Главные изменения:
- каталог перестроен от структуры товаров к структуре действий пользователя;
- интерфейс стал читабельным, масштабируемым и понятным для целевой аудитории;
- карточка товара теперь продает с первого экрана;
- чекаут сокращает путь до заказа;
- визуальный язык сайта стал узнаваемым: собственные иконки, анимации, подготовленные зоны под маскота и интерактивную 3D-школу.
Теперь сайт помогает школам выбирать оборудование проще, быстрее и увереннее, а компании — говорить с клиентом на языке, который он действительно понимает.
Хотите, чтобы ваш сайт тоже работал как инструмент продаж, а не витрина? Свяжитесь с нами, мы перестроим ваш UX под задачи бизнеса.
Другие кейсы
Оставьте заявку, чтобы обсудить проект и задачи
*
*
*