Редизайн Coffee On: как обновили сайт, логотип и подачу под лидогенерацию

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

Coffee On более 20 лет занимается установкой кофейных аппаратов и настольных кофемашин. Компания закрывает весь цикл работы: от подбора до установки и полноценного обслуживания.

Еще 2 года назад Фёдор, основатель MIKHAILOV studio, рассказывал «Как развивать студию, делая сайты только на Tilda» в подкасте «Шевцов на Дипрофайле». Тогда мы действительно работали только с Tilda, а сейчас обросли кейсами на WordPress и Bitrix.

Кристине, управляющей Coffee On, понравился наш подход, и она зашла на редизайн сайта. Старый сайт был по-своему интересным, но именно этот креатив мешал получению заявок:

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

Компания привлекает средний и крупный бизнес, такие как РосАтом, Деловые Линии,ИНВИТРО, МОСЛИФТ, ЕвроХим и т.д. При этом балансировали между легкостью и строгостью, чтобы сайт смотрелся органично для всех сегментов аудитории.

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

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

Логотип

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

Прототип

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

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

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

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

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

Дизайн

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

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

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

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

После согласования дизайнеры подготовили подробный UI-кит для разработки. В нем зафиксировали визуальные правила проекта: шрифты, цвета, состояния кнопок и форм, поведение pop-up окон, анимации, прелоадер, дополнительные сценарии для мобильной версии и адаптацию под разные разрешения. Это помогло аккуратно перенести дизайн в разработку и сохранить целостность сайта на всех устройствах.

Фронтенд

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

При переносе макетов в разработку мы сохранили ритм страниц, контраст, анимации и состояния элементов. Еще на этапе дизайна продумали, как будут вести себя ключевые блоки сайта: первый экран, слайдер, pop-up окна, FAQ, кнопка «наверх», cookie-уведомление и формы с разными сценариями отправки. Затем все это аккуратно перенесли в рабочий интерфейс.

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

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

Бэкенд

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

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

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

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

SEO-подготовка

Параллельно с разработкой мы подготовили сайт к индексации и дальнейшему продвижению. Для страниц прописали title и description, настроили структуру заголовков H1–H3 и продумали логику страниц так, чтобы поисковым системам было проще считывать содержание сайта. Также подготовили страницу 404, чтобы пользователь в случае ошибки не терялся и мог быстро вернуться в нужный раздел.

Кроме этого, подключили Яндекс.Метрику для отслеживания поведения пользователей, заявок и ключевых действий на сайте. Для индексации добавили проект в Яндекс Вебмастер, подготовили sitemap.xml и настроили robots.txt, чтобы поисковые системы быстрее находили нужные страницы и корректно работали с техническими разделами.

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

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

На разработку лендинга на WordPress ушло около 1.5 месяцев. За это время мы прошли путь от анализа конкурентов до финальной верстки с подробным UI-китом — и на каждом этапе ориентировались на главную задачу сайта: лидогенерацию.

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

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

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

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