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

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

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

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

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

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

Кристина
Руководитель проекта
На главной странице мы разместили блок быстрого подбора кофемашины с делением по сферам: для офисов и салонов или для кафе и общепита. Посетитель заполняет один из критериев, указывает дополнительные параметры, и сайт подкидывает ему подходящие варианты. В этом же блоке добавили кнопку «связаться», если человек затрудняется с выбором.
Также у нас была идея сделать меню-гамбургер, которое по клику раскрывается на весь экран, на фоне появляются крупные паралаксовые объекты, а неактивные ссылки блюрятся — эффект размытости понравился заказчику на мудборде. Но в итоге акцент решили сделать на подборе кофемашин.
На этапе аналитики выяснилось, что надёжность и проверенность компании-партнёра имеет большое значение для всех целевых групп, готовых арендовать кофемашину.
Чтобы снять сомнения у потребителей, мы добавили на главной блок с отзывами. Он, помимо классических фото и текста, также включает ссылку, за которой прячется официальный бланк с текстом отзыва — это внушает доверие. Изначально была идея, чтобы к отзыву прикреплялась и миниатюрная карточка товара, но после от неё отказались — оставили только текстовую ссылку на товар из каталога, чтобы не перегружать блок визуально.
Если зайти на страницу конкретной кофемашины, появится импровизированная столешница, на которой стоит аппарат. Рядом вся ключевая информация — рекомендуемая нагрузка в расчёте на количество чашек в день, иконки с параметрами (подключение к водопроводу, автоматический капучинатор или бесплатное обслуживание), а также кнопка «арендовать» для быстрого перехода к форме заявки.
Идея родилась на штурме, и сразу всем очень понравилась. Чтобы не жертвовать этой концепцией ради фотографий с деталями или фото в интерьере, мы добавили блок ниже: там и видео при случае можно загружать.

Дарья
Дизайнер
Также при рассмотрении целевых групп мы выявили другой момент: клиенты часто опасаются, а смогут ли сотрудники сами освоить технику? Чтобы снять этот вопрос, в карточке кофемашины есть блок «документация», куда мы прикрепили ссылки на руководства по эксплуатации, схемы и мини-инструкции. Также в планах проекта здесь будут видеообзоры, где расскажут и покажут, как правильно пользоваться техникой.
Разработка
Каталог разделён на типы товаров: есть отдельная вкладка для кофемашин, сортов кофе и сопутствующих товаров. Для кофемашин задаётся минимум важных параметров: тип нагрузки (офис или общепит), тип (рожковая или автоматическая) и объём воды.
Вкус кофе варьирует от того, из какого сорта он сварен: кому-то больше нравится горчащая робуста, кто-то предпочитает смягчать её ароматной арабикой в разных пропорциях. Этот момент мы учли при разработке фильтрации: бегунком можно выбрать соотношение двух сортов.
В проекте много приятной анимации, спрятанной в мелочах: это и «живая» кофейная кружечка в блоке дегустации, и крутящиеся крестики при разворачивании блоков, и подпрыгивающие товары в каталоге. Чтобы обнаружить все эффекты, по сайту нужно основательно прогуляться:)
В качестве подложек под фото используются цветные плашки, а поверх них — импровизированные кофейные зернышки, которые тоже анимированы — их мы рисовали на Canvas-е для большей производительности.
Наливающийся кофе при первой загрузке страницы — штука больше имиджевая, но интересная: сразу даёт понять, о чём на сайте пойдёт речь :)
На 404 странице есть скрытая анимация, которую сразу не так легко обнаружить (даже заказчик о ней не знал):
Анимация присутствует в слайдере внутри карточек кофемашин и кофе — можно легко пролистать все модели каталога стрелками и выбрать подходящую, поскольку ключевая информация всегда на виду.
Листалку сделали на AJAX — пришлось потрудиться, чтобы при каждом переключении не загружалась новая страница, а менялась лишь модель машины/пачка кофе и добавлялся соответствующий контент вокруг. Дополнительной сложностью была настройка пролистывания в обе стороны — пришлось повозиться с CSS, чтобы машинки переезжали в разных направлениях.

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

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

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

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

Александр
Разработчик
Сайт имеет версию для телефонов и планшетов, чтобы пользователи могли заказать услуги в любом месте в любое время:
Корзина у CoffeeRent нестандартная — обычно для этого создаётся отдельная страница, но здесь это поп-ап, доступный с любой страницы на сайте по клику на иконку в шапке.
В планах проекта — запуск блога:
Сайт запущен недавно, а мы уже получили обратную связь от клиента — есть первые продажи. Работа над проектом продолжится: на главной появится видео от основателя компании, на детальных страницах — инструкции к кофемашинам и приготовлению напитков. В планах и продвижение с «Кинетикой»: мы уже делаем первые SEO-спринты по оптимизации и настройке целей. Также появится блог с полезными статьями и новости на сайте.

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

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

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


Иван
основатель CoffeeRent
Готовый проект