Кейс по разработке сайта компании 3 Компрессора

О клиенте

Компания “3 Компрессора” специализируется на сжатом воздухе. Проектирует и поставляет компрессорное оборудование, которое осуществляет подачу сжатого воздуха на предприятиях.

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

Интернет-магазин является крупнейшим дилером по промышленному оборудованию на территории всей России и Казахстана

Цель:

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

Инструменты:

Figma
Photoshop

compressor3.ru

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

Проживающие в России мужчины среднего возраста, двух возрастных категорий 25-34 и 35-54 года, по профессии – технические специалисты, собственники малого/среднего производства, инженеры.

Задачи

Проработка каталога

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

страница товара

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

юзабилити

Разработка страниц сайта с учетом лучших практик пользовательского опыта.

реализация адаптивной верстки

Сделана адаптивная верстка сайта под мобильные устройства.

Этапы работ

сбор информации

На начальном этапе разработки мы детально изучили отрасль, описали целевую аудиторию будущего сайта и провели исследование конкурентов по данной тематике.

На основе полученных данных, мы составили схему дальнейшей работы.

Прототипирование

На следующем этапе мы составили карту переходов по сайту и составили полную карту сайта.

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

Разработка дизайна

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

На основе утвержденного дизайна мы написали спецификацию для последующей верстки сайта.

Верстка

Руководствуясь подробным техническим заданием, мы начали верстать сайт. Этот этап оказался самым продолжительным из-за наличия большого количества интерактивных элементов на сайте.

Верстка сайта кроссбраузерна и абсолютно адаптивна, из-за чего одинаково корректно отображается на всех устройствах.

Программирование

На заключительном этапе мы интегрировали сайт в систему управления контентом (CMS) Битрикс 1С и объединили верстку сайта с его функциональной частью.

Структура сайта

ГЛАВНАЯ СТРАНИЦА

структура и концепция

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

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

Прототип сайта

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

Уникальность сайта

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

Боковое меню

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

Функциональный фильтр

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

Квиз-опрос

Помощь в подборе компрессорного оборудования и комплектующих в форме квиз-опроса для получения максимальной конверсии. Квиз с пятью вопросами и формой обратной связи появляется при клике на баннер “Подобрать компрессор”. Баннер размещается на самых конверсионных страницах – в разделах каталога и на страницах товара.

Страница товара

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

Избранное и Сравнение товаров

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

ВНУТРЕННИЕ СТРАНИЦЫ

Также был разработан уникальный дизайн для 13 внутренних страниц и их вариаций:

Каталог товаров

АДАПТИВ

При разработке сайта, была детально подумана и его мобильная версия. Помимо версии для Desktop, сайт был разработан под мобильное разрешение экрана:

Мобильный телефон 320*568px

Мобильная версия

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