CoffeeRent

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

Результат Процесс
<p><b>CoffeeRent предоставляют кофемашину в бесплатную аренду в обмен на купленный кофе на месяц вперёд, да ещё и сами приезжают её обслуживать. </b></p>

Задачи

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

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

Решение

<p><b>Главная страница</b></p><p>Мы предложили две версии главной страницы, содержащих в себе много воздуха: одну в спокойных пастельных тонах, другую — альтернативную, с тёмными акцентами. Клиент выбрал более светлую версию:</p>
<p>На главной мы разместили блок быстрого подбора кофемашины с делением по сферам: для офисов и салонов или для кафе и общепита. Посетитель заполняет один из критериев, указывает дополнительные параметры, и сайт подкидывает ему подходящие варианты. В этом же блоке добавили кнопку «связаться», если человек затрудняется с выбором.</p>





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


<p><b>Каталог</b></p><p>Каталог разделён на типы товаров: есть отдельная вкладка для кофемашин, сортов кофе и сопутствующих товаров. Для кофемашин задаётся минимум важных параметров: тип нагрузки (офис или общепит), тип (рожковая или автоматическая) и объём воды.</p>
<p><b>Страница кофемашины</b></p><p>Если зайти на страницу конкретной кофемашины, появится импровизированная столешница, на которой стоит аппарат. Рядом вся ключевая информация — рекомендуемая нагрузка в расчёте на количество чашек в день, иконки с параметрами (подключение к водопроводу, автоматический капучинатор или бесплатное обслуживание), а также кнопка «арендовать» для быстрого перехода к форме заявки.</p>
<p><b>Лаконичная «О компании»</b></p>
<p><b>FAQ</b></p><p>В качестве подложек используются цветные плашки, а поверх них — импровизированные кофейные зернышки, которые тоже анимированы — их мы рисовали на <nobr>Canvas-е</nobr> для большей производительности.</p>
<p><b>Адаптив</b></p><p>Сайт имеет версию для телефонов и планшетов, чтобы пользователи могли заказать услуги в любом месте в любое время:</p>

Результат

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

Готовый сайт:

coffeerent.ru