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

CoffeeRent разом решают эти проблемы: во-первых, предоставляют кофемашину в бесплатную аренду в обмен на купленный кофе на месяц вперёд (а что, так можно было?!), да ещё и сами приезжают её обслуживать, чтобы офисные жители не превращались в умельцев при любой неисправности и не наломали дров во время планового ТО.

Намечается мероприятие с кофебрейком, а подавать высокопоставленным гостям пакетики 3 в 1 не комильфо? И тут есть решение, ведь CoffeeRent предлагает аренду оборудования и на короткий срок. А ещё в списке услуг есть бесплатный тест-драйв — вы можете взять на день конкретную кофемашину (её привезут прямо к вам в офис), оценить удобство использования и вкус получившегося кофе, а после решить для себя, хотите ли вы встречать каждое утро чашечкой свежесваренного напитка.

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

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

Нам хотелось уйти от штампов, связанных с кофе: сайты конкурентов залиты 50-ю оттенками коричневого и напичканы бессмысленными украшательствами (типа чашечек, выложенных из кофейных зёрен).

На этапе мудборда заказчик принимал активное участие и комментировал, что ему нравится, а что не очень. Он отметил две гаммы: коричнево-зелёную, близкую к цветам старого сайта (12), и более яркую с синими и коричнево-оранжевыми тонами (10). Также понравились референсы с чередованием тёмных и светлых цветов на страницах.

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

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

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

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

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

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

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

Если зайти на страницу конкретной кофемашины, появится импровизированная столешница, на которой стоит аппарат. Рядом вся ключевая информация — рекомендуемая нагрузка в расчёте на количество чашек в день, иконки с параметрами (подключение к водопроводу, автоматический капучинатор или бесплатное обслуживание), а также кнопка «арендовать» для быстрого перехода к форме заявки.

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

Каталог разделён на типы товаров: есть отдельная вкладка для кофемашин, сортов кофе и сопутствующих товаров. Для кофемашин задаётся минимум важных параметров: тип нагрузки (офис или общепит), тип (рожковая или автоматическая) и объём воды.

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

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

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

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

На 404 странице есть скрытая анимация, которую сразу не так легко обнаружить (даже заказчик о ней не знал):

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

Упростить процедуру заказа с сайта — одна из ключевых задач проекта.

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

Больше никаких километровых полей для заполнения: пользователю достаточно кликнуть на кнопку «арендовать» на карточке соответствующей кофемашины, ввести имя, телефон или email — всё! Далее администратор получит автоматическое оповещение о заказе (с указанием конкретной машины), а клиенту придёт оповещение о том, что его заказ получен и что с ним свяжутся в ближайшее время.

Интеграция с CRM-системой помогает менеджеру видеть весь процесс продажи, а также собирать статистику, формировать отчёты и настраивать автоматизацию для событий (например, запланировать напоминание о необходимости ТО арендованной клиентом кофемашины).

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

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

Корзина у CoffeeRent нестандартная — обычно для этого создаётся отдельная страница, но здесь это поп-ап, доступный с любой страницы на сайте по клику на иконку в шапке.

В планах проекта — запуск блога: