Разработка корпоративного сайта для продажи франшиз федеральной сети кофеен

Кейс рассказывает о том, как при создании сайта для b2b-сегмента веб-интегратору «Компот» удалось найти компромисс между деловым стилем, простотой и оригинальными дизайнерскими решениями.

Особенности проекта: сайт создавался на языке программирования PHP на базе системы «1С-Битрикс».

Информация о заказчике: One Price Coffee является одной из наиболее динамично развивающихся сетей федеральных кофеен в сегменте «все по фиксированной цене». На момент публикации кейса, она включала в себя 150+ кофеен.

Задачи проекта:

Разработать лендинг с уникальным дизайном, основанным на корпоративной палитре цветов, используемых при оформлении объектов, относящихся к One Price Coffee.
Чтобы внешний вид сайта полностью совпадал с утвержденными макетами, специалистам «Компота» необходимо было сделать верстку с использованием методики pixel perfect.
Запрограммировать функционал создаваемого сайта с использованием административной панели «1С-Битрикс».

Сайт проекта: onepricecoffee.com

Изображение предоставлено веб-интегратором «Компот» с сайта https://kompot.bz/

Решение задач, поставленных заказчиком

Специалисты «Компота» создавали не просто уникальный дизайн. Они анимировали элементы, которые позволяют почувствовать неповторимую атмосферу кофеен. Это потребовало нестандартного подхода к реализации верстки.

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

Стилизованные пиктограммы

Для оформления сайта дизайнеры разработали пиктограммы различных объектов, стилизованные под неоновые вывески в кафе. Неон в тренде последние 2-3 года, однако его применение на корпоративном сайте стало довольно смелым решением. Благодаря тому, что дизайнеры подобрали для неона “умеренный” оттенок зеленого, пиктограммы отлично вписались в строгий деловой стиль.

Калькулятор

Специалистами «Компота» был разработан и запрограммирован калькулятор. Он позволяет рассчитать основные финансово-экономические показатели франшизы:

– выручку,

– чистую прибыль,

– срок окупаемости.

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

Анимированный слайдер

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

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

“Вкусная” статистика

Статистические данные повышают уровень доверия, а также дают наглядное представление о масштабе бизнеса. Правда иногда они могут показаться недостаточно увлекательными. Поэтому дизайнеры «Компота» использовали для блока ключевых показателей компании gif-анимацию. Ожившие яркие цифры придают стандартному блоку со статистикой дополнительный объем и сохраняют простоту для восприятия данных.

Удобная карта кофеен

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

Показ кофеен на карте.

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

Сайт с адаптивным дизайном

Поскольку клиенты довольно часто выбирают кофейни с помощью мобильных устройств, специалисты «Компота» позаботились об адаптивности сайта.Заказчик может быть уверен, что ресурс корректно отображается на любых типах устройств:

– персональных компьютерах,

– ноутбуках,

– смартфонах,

– планшетах,

– Retina-дисплеях.

Заключение

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