Farbe
Сделали соответствующий статусу сайт российскому производителю красок, штукатурок и грунтовки
Далеко-далеко (по крайне мере, от нас) в Тюмени стоит завод. Большой, светлый, чистый, автоматизированный. Современный и прогрессивный, за что «Сколково» посвятило его в свои резиденты.
На заводе том производят краску, штукатурку, грунтовку и прочие строительные прелести марки Farbe. Настолько крутые, что их даже использовали на Олимпийских объектах в Сочи. И когда руководство завода решило обновить сайт — оно выбрало соответствующего своему профессионализму заказчика. Нас, то бишь :)
На заводе том производят краску, штукатурку, грунтовку и прочие строительные прелести марки Farbe. Настолько крутые, что их даже использовали на Олимпийских объектах в Сочи. И когда руководство завода решило обновить сайт — оно выбрало соответствующего своему профессионализму заказчика. Нас, то бишь :)
Задачи
- Разработать сайт, соответствующий имиджу компании. Рассказать о бренде и его преимуществах. Подготовить его к дальнейшему продвижению.
- Увеличить количество заказов, сделанных на сайте.
- Разработать сайт, который корректно отображается на всех устройствах.
Аналитика
На этапе аналитики мы изучали статистику старого сайта, пожелания заказчиков и стейкхолдеров, прощупывали конкурентов. И думали, что бы такого изменить, чтобы на новом сайте увеличилась конверсия.
Оказалось, что хороший эффект Farbe получает от раздачи пробников. Производители уверены, что их продукт — самый лучший. И готовы всем, кто не верит, бесплатно выслать пробник продукции.
Оказалось, что хороший эффект Farbe получает от раздачи пробников. Производители уверены, что их продукт — самый лучший. И готовы всем, кто не верит, бесплатно выслать пробник продукции.
Farbe готовы отправлять образцы своей продукции всем желающим, чтобы пользователи сами убедились в качестве :) Поэтому мы решили сделать это одним из конкурентных преимуществ, и при проектировании структуры сайта сделали акцент на это на главной и даже отдельный раздел предусмотрели.
Дарья
QA-менеджер
Так мы решили боль пользователей, которые знают, что им нужно, и выбирают между разными производителями. Но кроме них есть ещё большая страдающая группа — люди, которым нужно делать ремонт, но они не разбираются в строительстве. Все, что они знают — им нужна штукатурка. И хотят понять, какие виды продукции бывают и чем они различаются.
Функция сравнения товаров родилась не случайно. Я изучала форумы, и оказалось, что у многих покупателей возникает один вопрос: «Какая штукатурка лучше?». Многие бояться сделать выбор, ошибиться: акрил или силикон, если силиконовая, то какая? Поэтому на сайте всю продукцию можно сравнить, причем характеристики понятны и новичкам и профи.
Дарья
QA-менеджер
Итак, способы повысить конверсию нашли. На очереди стояла задача сделать сайт такой же крутой и современный, как сам Farbe. И её мы решали уже на дизайне.
Дизайн
Мы сразу поняли, каким будет дизайн. Что будет вау, красота, и в центре — банка с продукцией Farbe. Осталось только правильно эту идею упаковать в макете.
Продукция Farbe стоит несколько дороже, чем продукты той же категории по рынку. Соответственно, мы должны были пояснить, почему именно столько — так как вопрос бюджета для пользователя крайне важен. Поэтому на сайте мы сразу ушли в промо с детальными объяснениями по всем потребительским качествам продукта. И Сергей, представитель заказчика, нас в этой мысли поддержал.
Ирина
Руководитель проекта
Начали рисовать макет. И нарисовали! Но тут…
…у меня неожиданно сломался комп и исходник испортился. Восстановить мы его не смогли — пришлось убить кучу времени, чтобы отрисовать его вручную почти с нуля. Но в итоге макет получился даже лучше, чем первый.
У нас было несколько вариантов промоблока и некоторых внутренних страниц. И мне нравятся почти все :)
У нас было несколько вариантов промоблока и некоторых внутренних страниц. И мне нравятся почти все :)
Любовь
Дизайнер
Чтобы все было по-настоящему, заказчик прислал нам баночки, в которых покупатели получают образцы продукции. Маленькие, аккуратные и очень симпатичные. Такими мы их и нарисовали.
На главной предполагался блок с видео о заводе — и ох как мы сомневались на его счет.
Видео заказчик снимал специально для сайта. Тут было немного страшно, потому что съемки шли параллельно тому, как мы рисовали дизайн. И что в этом видео в итоге получится, мы могли только гадать — хотя нас держали в курсе, и мы видели черновые варианты. Но все закончилось благополучно: ролик очень хорошо встал в дизайн, и за счет диагоналей смотрится органично.
Ирина
Руководитель проекта
Кроме главной, долго и дотошно разрабатывали страницу товара. У Farbe немного товаров, но каждый нужно было презентовать сильно, с фейерверком и оркестром.
Заходишь на страницу товара — и тебя встречает промоблок, который рассказывает о преимуществах продукта. Здесь нужен был вау-эффект.
Мы проводили часы в переговорах по поводу промо. Варианта было два: или делать более стандартную для ecommerce страницу с блоком «Купить» в верхней части, или же сначала долго рассказывать пользователю, чем хороша продукция, и показывать ему красивые картинки. В итоге сделали оба варианта: галочкой в админке можно вывести тот или иной блок наверх. Теперь смотрим на конверсию.
Мы проводили часы в переговорах по поводу промо. Варианта было два: или делать более стандартную для ecommerce страницу с блоком «Купить» в верхней части, или же сначала долго рассказывать пользователю, чем хороша продукция, и показывать ему красивые картинки. В итоге сделали оба варианта: галочкой в админке можно вывести тот или иной блок наверх. Теперь смотрим на конверсию.
Ирина
Руководитель проекта
Какие-то страницы мы согласовывали попиксельно, долго обсуждая и поправляя. А какие-то рисовали — и заходило сразу же. Даже если мы хулиганили и креативили. Нам повезло, что заказчик был к этому готов.
Заказчик был готов к креативу — и это очень хорошо. Вон, какая 404 страница получилась!
Тамара
Дизайнер
Осторожно, опаснейшее залипалово!
Разработка
Разработчикам предстояло воплотить в жизнь все нафантазированное дизайнерами. И чтобы еще адаптивно было. И загружалось быстро. Ну, вы поняли :)
В промоблоке на главной цвета фона плавно перетекают один в другой. В изначальной концепции был бегунок, которым пользователь мог сам переключать цвета. Но на сборке от него решили отказаться — очередное доказательство, что ТЗ со временем становится неактуальным, а бэклоги рулят.
В промоблоке на главной цвета фона плавно перетекают один в другой. В изначальной концепции был бегунок, которым пользователь мог сам переключать цвета. Но на сборке от него решили отказаться — очередное доказательство, что ТЗ со временем становится неактуальным, а бэклоги рулят.
Следующий наш самый любимый блок на главной — с предложением заказать образцы продукции.
Для анимации движения предметов здесь мы использовали parralax.js. Этот плагинчик уже не раз помогал нам создавать клёвую анимацию. Например, на проектах Славкофе и Wool&Mania. Тут мы немного доработали parralax. js и «научили» не только перемещать предметы вверх и вниз, но и поворачивать их. Кстати, помимо привычного движения за курсором, на некоторых устройствах анимация предметов будет срабатывать на наклон. Магия :)
Дарья
Разработчик
Как и на дизайне, много сил и внимания мы уделили странице товара.
Одна из самых больших и трудоемких страниц сайта — страница товара. Она состоит из десяти блоков, в которых есть обычные списки новостей, а еще не совсем обычные калькулятор, цветовая палитра, галерея, табы, параллакс и особенно крутой слайдер с погодными явлениями. Можно залить слайд дождем, завейпить туманом или осветить лучами солнца.
Андрей
Разработчик
И самое крутое — что вся эта красота настраивается в админке. Можно менять по настроению: сегодня дождик поставил, завтра — солнышко, через неделю — нагнал загадочности туманом :)
Но на самом деле этот эффект нужен, чтобы наглядно показать, что продукции Farbe любая погода нипочем.
Но на самом деле этот эффект нужен, чтобы наглядно показать, что продукции Farbe любая погода нипочем.
Эту фишку мы так давно вынашивали. Когда я показала пример на Спайке (концепцию для проекта «Шинглас») — заказчик сказал: «Мне это надо». Прямо сейчас. Немедленно :)
Ирина
Руководитель проекта
На сайте каждая мелочь обсуждалась и шлифовалась. Поэтому каждую деталь — картинки, иконки, наш фирменный слон — можно по отдельности рассматривать и залипать.
Слон сделан в виде игры. Дается минута времени, появляется конвейер, по которому едут ведра с маркировкой по цвету. Задача: заполнить максимальное число ведер краской нужного цвета. Все усложняется тем, что постепенно скорость движения ведер увеличивается, а интервал между ведрами может меняться.
Сергей
Разработчик
И, как и планировалось с самого начала, сайт сделали адаптивным. Мы долго и упорно калибровали его, чтобы он хорошо смотрелся и на широкоэкранных мониторах, и на ноутбуках, и на мобилках. Заходите, смотрите и голосуйте за Farbe на Рейтинге Рунета ;)
Готовый сайт