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

Заказчик

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

Задача

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

О том, как мы сделали редизайн лендинга на WordPress с целью лидогенерации. Рассказываем, как обновить логотип до современного, показываем структуру продающего лендинга для разной ЦА и говорим о балансе между легкостью и строгостью в дизайне. 

Задача

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

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

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

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

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

 Решение

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

В разработке сайта мы ориентировались на основные типы клиентов:

1. корпоративные офисы;
2. логистические центры;
3. бизнес-центры;
4. склады;
5. аэропорты;
6. производственные объекты;
7. образовательные учреждения;
8. медицинские учреждения.

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

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

 Логотип

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

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

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

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

Прототип

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

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

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

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

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

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

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

Доверие выстраивали через логотипы клиентов, количество и фотографии установленных аппаратов в Москве и МО, отзывы. Фотографии решают конкретную задачу — пользователь видит реальные размеры, варианты наполнения и понимает, что подходит под его цели.

Этапы работы намеренно сократили до трех. Для клиента их по сути и есть три — всю основную работу по подбору и установке компания берет на себя.

120 обслуживаемых адресов и команда показывают, что компания справляется с большим объемом работы.

По классике добавили новости и блок «вопрос-ответ», чтобы контент индексировался и рос органический трафик.

Отдельно подошли к формам заявок. На сайте есть как кнопки «оставить заявку» и «заказать установку», так и две открытые формы с разным наполнением. Они дают менеджеру понимание, насколько заинтересован клиент еще до консультации.

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

Дизайн

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

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

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

Поэтому добавили темно-зеленый как балансирующий: он придает сдержанности и контраста, не исключая при этом посыл основного цвета. Это важно, поскольку Coffee On работает как с малым бизнесом, так и с крупным, необходимо, чтобы визуал считывался уместно для обеих аудиторий.

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

Дизайн пронизан небольшими акцентами, которые работают на разные цели:

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

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

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

После согласования, дизайнеры подготовили подробный UI-кит, в нем показали разработчикам:

• все шрифты и цвета, используемые на проекте.
• все состояния кнопок, стрелочек: неактивные, при наведении, при нажатии.
• состояния форм: неактивная, при вводе данных, куда ведет после отправки, что будет, если возникла какая-то проблема.
• как отображается благодарственные письма при клике на кнопку «отзывы», что происходит при наведении на письмо.
• как отображается страница новостей в десктопе, мобилке и контент для страницы.
• примеры того, как выглядит анимация.
• как можно закрыть pop-up окна: не только при нажатии на крестик, но и при клике в любую область вне формы.
• когда появляется кнопка «наверх» и где расположено сообщение о cookies-файлах.
• от каких элементов в мобильной версии отказываемся, чтобы сайт загружался быстрее и смотрелся чище.
• как отображается прелоадер при заливке и что пользователь видит дальше.
• адаптировали сайт под 4 дополнительных разрешения, чтобы все корректно отображалось с любых устройств, и многое другое.

Фронтенд

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

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

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

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

Бэкенд

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

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

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

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

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

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

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

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

Результат:

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

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

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

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

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

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

Перейти на сайт