CoffeeRent
Разработали интернет-магазин для сервиса, который предлагает бесплатную аренду кофемашины в обмен на покупку кофе
![<p><b>CoffeeRent предоставляют кофемашину в бесплатную аренду в обмен на купленный кофе на месяц вперёд, да ещё и сами приезжают её обслуживать. </b></p>](https://s29805.cdn.ngenix.net/wp-content/2017-11-14-coffeerent/01.png)
Задачи
Проект объединяет в себе
- Выделить компанию на фоне конкурентов с типично кофейным дизайном сайтов.
- Сделать акцент на бесплатной дегустации,
тест-драйве и бесплатном обслуживании — у конкурентов такого нет. - Облегчить работу менеджеров, сделав удобный функционал для подбора кофемашины на сайте.
- Показать разницу между моделями кофемашин и помочь посетителю с выбором при помощи интуитивно понятной фильтрации.
- Продумать легкий функционал для оформления заказа.
Решение
![<p><b>Главная страница</b></p><p>Мы предложили две версии главной страницы, содержащих в себе много воздуха: одну в спокойных пастельных тонах, другую — альтернативную, с тёмными акцентами. Клиент выбрал более светлую версию:</p>](https://s29805.cdn.ngenix.net/wp-content/2017-11-14-coffeerent/home.png)
![<p>На главной мы разместили блок быстрого подбора кофемашины с делением по сферам: для офисов и салонов или для кафе и общепита. Посетитель заполняет один из критериев, указывает дополнительные параметры, и сайт подкидывает ему подходящие варианты. В этом же блоке добавили кнопку «связаться», если человек затрудняется с выбором.</p>](https://s29805.cdn.ngenix.net/wp-content/2017-11-14-coffeerent/03.gif)
![<p><b>Отзывы</b></p><p>Чтобы снять сомнения у потребителей, мы добавили на главной блок с отзывами. Он, помимо классических фото и текста, также включает ссылку, за которой прячется официальный бланк с текстом отзыва — это внушает доверие.</p>](https://s29805.cdn.ngenix.net/wp-content/2017-11-14-coffeerent/04.png)
![<p><b>Каталог</b></p><p>Каталог разделён на типы товаров: есть отдельная вкладка для кофемашин, сортов кофе и сопутствующих товаров. Для кофемашин задаётся минимум важных параметров: тип нагрузки (офис или общепит), тип (рожковая или автоматическая) и объём воды.</p>](https://s29805.cdn.ngenix.net/wp-content/2017-11-14-coffeerent/xCoffeeRent_items_list.png.pagespeed.ic.i7JgG1_kt8.png)
![<p><b>Страница кофемашины</b></p><p>Если зайти на страницу конкретной кофемашины, появится импровизированная столешница, на которой стоит аппарат. Рядом вся ключевая информация — рекомендуемая нагрузка в расчёте на количество чашек в день, иконки с параметрами (подключение к водопроводу, автоматический капучинатор или бесплатное обслуживание), а также кнопка «арендовать» для быстрого перехода к форме заявки.</p>](https://s29805.cdn.ngenix.net/wp-content/2017-11-14-coffeerent/CoffeeRent_machine_card.png)
![<p><b>Лаконичная «О компании»</b></p>](https://s29805.cdn.ngenix.net/wp-content/2017-11-14-coffeerent/xabout-coff.jpg.pagespeed.ic.jKr-YCRLhQ.jpg)
![<p><b>FAQ</b></p><p>В качестве подложек используются цветные плашки, а поверх них — импровизированные кофейные зернышки, которые тоже анимированы — их мы рисовали на <nobr>Canvas-е</nobr> для большей производительности.</p>](https://s29805.cdn.ngenix.net/wp-content/2017-11-14-coffeerent/xCoffeeRent_FAQ.png.pagespeed.ic.X-6Xc8gI_u.png)
![<p><b>Адаптив</b></p><p>Сайт имеет версию для телефонов и планшетов, чтобы пользователи могли заказать услуги в любом месте в любое время:</p>](https://s29805.cdn.ngenix.net/wp-content/2017-11-14-coffeerent/x08.jpg.pagespeed.ic.WL9Avue_zE.jpg)
Результат
В проекте много приятной анимации, спрятанной в мелочах: это и «живая» кофейная кружечка в блоке дегустации, и крутящиеся крестики при разворачивании блоков, и подпрыгивающие товары в каталоге. Чтобы обнаружить все эффекты, по сайту нужно основательно прогуляться :)