Сделали соответствующий статусу сайт российскому производителю красок, штукатурок и грунтовки
Результат Процесс
Farbe: сделали красоту для производителя штукатурок
Сибирикс

Farbe

Сделали соответствующий статусу сайт российскому производителю красок, штукатурок и грунтовки
Далеко-далеко (по крайне мере, от нас) в Тюмени стоит завод. Большой, светлый, чистый, автоматизированный. Современный и прогрессивный, за что «Сколково» посвятило его в свои резиденты.

На заводе том производят краску, штукатурку, грунтовку и прочие строительные прелести марки Farbe. Настолько крутые, что их даже использовали на Олимпийских объектах в Сочи. И когда руководство завода решило обновить сайт — оно выбрало соответствующего своему профессионализму заказчика. Нас, то бишь :)
Задачи
  1. Разработать сайт, соответствующий имиджу компании. Рассказать о бренде и его преимуществах. Подготовить его к дальнейшему продвижению.

  2. Увеличить количество заказов, сделанных на сайте.

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

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

Дарья
QA-менеджер
Так мы решили боль пользователей, которые знают, что им нужно, и выбирают между разными производителями. Но кроме них есть ещё большая страдающая группа — люди, которым нужно делать ремонт, но они не разбираются в строительстве. Все, что они знают — им нужна штукатурка. И хотят понять, какие виды продукции бывают и чем они различаются.
Функция сравнения товаров родилась не случайно. Я изучала форумы, и оказалось, что у многих покупателей возникает один вопрос: «Какая штукатурка лучше?». Многие бояться сделать выбор, ошибиться: акрил или силикон, если силиконовая, то какая? Поэтому на сайте всю продукцию можно сравнить, причем характеристики понятны и новичкам и профи.

Дарья
QA-менеджер
Итак, способы повысить конверсию нашли. На очереди стояла задача сделать сайт такой же крутой и современный, как сам Farbe. И её мы решали уже на дизайне.
Дизайн
Мы сразу поняли, каким будет дизайн. Что будет вау, красота, и в центре — банка с продукцией Farbe. Осталось только правильно эту идею упаковать в макете.
Продукция Farbe стоит несколько дороже, чем продукты той же категории по рынку. Соответственно, мы должны были пояснить, почему именно столько — так как вопрос бюджета для пользователя крайне важен. Поэтому на сайте мы сразу ушли в промо с детальными объяснениями по всем потребительским качествам продукта. И Сергей, представитель заказчика, нас в этой мысли поддержал.

Ирина
Руководитель проекта
Начали рисовать макет. И нарисовали! Но тут…
…у меня неожиданно сломался комп и исходник испортился. Восстановить мы его не смогли — пришлось убить кучу времени, чтобы отрисовать его вручную почти с нуля. Но в итоге макет получился даже лучше, чем первый.

У нас было несколько вариантов промоблока и некоторых внутренних страниц. И мне нравятся почти все :)

Любовь
Дизайнер
Чтобы все было по-настоящему, заказчик прислал нам баночки, в которых покупатели получают образцы продукции. Маленькие, аккуратные и очень симпатичные. Такими мы их и нарисовали.
На главной предполагался блок с видео о заводе — и ох как мы сомневались на его счет.
Видео заказчик снимал специально для сайта. Тут было немного страшно, потому что съемки шли параллельно тому, как мы рисовали дизайн. И что в этом видео в итоге получится, мы могли только гадать — хотя нас держали в курсе, и мы видели черновые варианты. Но все закончилось благополучно: ролик очень хорошо встал в дизайн, и за счет диагоналей смотрится органично.

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

Мы проводили часы в переговорах по поводу промо. Варианта было два: или делать более стандартную для ecommerce страницу с блоком «Купить» в верхней части, или же сначала долго рассказывать пользователю, чем хороша продукция, и показывать ему красивые картинки. В итоге сделали оба варианта: галочкой в админке можно вывести тот или иной блок наверх. Теперь смотрим на конверсию.

Ирина
Руководитель проекта
Какие-то страницы мы согласовывали попиксельно, долго обсуждая и поправляя. А какие-то рисовали — и заходило сразу же. Даже если мы хулиганили и креативили. Нам повезло, что заказчик был к этому готов.
Заказчик был готов к креативу — и это очень хорошо. Вон, какая 404 страница получилась!

Тамара
Дизайнер
Осторожно, опаснейшее залипалово!
Разработка
Разработчикам предстояло воплотить в жизнь все нафантазированное дизайнерами. И чтобы еще адаптивно было. И загружалось быстро. Ну, вы поняли :)

В промоблоке на главной цвета фона плавно перетекают один в другой. В изначальной концепции был бегунок, которым пользователь мог сам переключать цвета. Но на сборке от него решили отказаться — очередное доказательство, что ТЗ со временем становится неактуальным, а бэклоги рулят.
Следующий наш самый любимый блок на главной — с предложением заказать образцы продукции.
Для анимации движения предметов здесь мы использовали parralax.js. Этот плагинчик уже не раз помогал нам создавать клёвую анимацию. Например, на проектах Славкофе и Wool&Mania. Тут мы немного доработали parralax. js и «научили» не только перемещать предметы вверх и вниз, но и поворачивать их. Кстати, помимо привычного движения за курсором, на некоторых устройствах анимация предметов будет срабатывать на наклон. Магия :)

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

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

Но на самом деле этот эффект нужен, чтобы наглядно показать, что продукции Farbe любая погода нипочем.
Эту фишку мы так давно вынашивали. Когда я показала пример на Спайке (концепцию для проекта «Шинглас») — заказчик сказал: «Мне это надо». Прямо сейчас. Немедленно :)

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

Сергей
Разработчик
И, как и планировалось с самого начала, сайт сделали адаптивным. Мы долго и упорно калибровали его, чтобы он хорошо смотрелся и на широкоэкранных мониторах, и на ноутбуках, и на мобилках. Заходите, смотрите и голосуйте за Farbe на Рейтинге Рунета ;)
Готовый сайт