Задача: помочь покупателям с выбором техники для отопления дома

Решение: компания «Мир Тепла» занимается продажей и монтажом оборудования и бесплатно проектирует системы отопления и водоснабжения для любого здания. В студии разработали сайт с каталогом и возможностью заказать выбранный товар. На сайте добавлены схемы типовых решений отопления, есть калькулятор с точной стоимостью монтажа оборудования.

Точную стоимость монтажа оборудования, можно посчитать на калькуляторе

Знакомим пользователей с организацией, показываем сотрудников

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

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

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

Решаем, что товары важнее схем, выносим их вниз.

Показываем макет заказчику: «Скучновато как-то. Тут еще монтаж не заметен, а мы его наравне с товарами можем продавать».

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

Презентация макета арт директору: «Все неплохо, только вверху разделы в один текст слились». Разбиваем верхнее меню по колонкам.

Макет утвержден.

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

Заказчик: «Мне все нравится, только неплохо было бы логотипы брендов добавить».

Добавляем.

Утверждено!

Приступаем к дизайну страницы товара. Слева изображение товара, справа описание с комментариями. Цена товара разделяется на цену с монтажом и без.
Добавляем баннер с проектированием. Внизу страницы предлагаем товары, которые покупают в комплекте и похожие товары.

Презентация макета артдиректору: «Баннер с проектированием нужно растянуть на всю страницу. Слева в блоках с товарами пустует полезное место».

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

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

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

Клиенту не нравится баннер: «Слишком простой». Готовим несколько видов баннеров: акционные, о товарах и самой компании.

Особое внимание уделяем схемам. Перерисовываем в общем стиле, делаем максимально большими, добавляем пояснительные надписи к основным элементам.

Заказчику нравится. Отправляем макеты в работу.