Лучший корпоративный B2B сайт России 2020 года от дизайн-студии «Магвай» для Бердиевского Элеватора

Заказчик:

Акционерное общество «Бердиевский элеватор» -  это сельскохозяйственное предприятие, которое находится в Иловлинском районе в маленькой деревушке - Бердия. Организация занимается закупкой зерновых культур, хранением, очисткой и переработкой зерна и масла семян. Это команда настоящих профессионалов, преданных своему делу!

Задача:

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

Цель:

Мы были рады узнать, что заказчик открыт к обсуждению необычных идей и в целом поддерживает современные и нестандартные решения, поэтому и обратился к нам как сторителлерам и креативщикам. 

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

Итак, нам предстояло собрать весь опыт, который мы получили на более чем 800 проектах, и выйти за рамки привычного представления элеватора, чтобы создать что-то кардинально новое!

Немного о процессе:

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

1. Анализ целевой аудитории клиента

Перед началом работ нужно познакомиться с целевой аудиторией. Для этого мы систематизировали найденную информацию и определили портрет потребителя услуг элеватора. 

По демографическому признаку мы выявили, что это в основном мужчины в возрасте от 35 до 65 лет. Из этого следует, что мы будем ориентироваться на взрослую и достаточно консервативную аудиторию, поэтому необходимо разработать дизайн, который не будет конфликтовать с их восприятием. Сайт должен быть максимально понятным и удобным, но при этом стильным и современным - как иначе показать, что наш элеватор на шаг впереди.

Также мы разделили аудиторию по отраслям и целям, которые они преследуют, обращаясь к элеватору:

- Сельскохозяйственные производители - хотят с наименьшими усилиями выгодно продать свой продукт или поместить его на хранение до совершения сделки;

- Производители кормов для животных - им необходимо получать бесперебойные поставки зерна однородного качества;

- Мукомольные предприятия - их цель - получать стабильно и круглогодично зерновые партии однородного качества;

- Зерновые трейдеры - для них необходимо отгружать зерновые и масличные культуры экспортного качества и отправить железнодорожным составом.

Для того, чтобы заказчики из разных сегментов целевой аудитории выбрали именно «Бердиевский элеватор», нужно показать, что организация удовлетворяет их запросы. Поэтому очень важно рассказать про современное оборудование, условия хранения, а также указать весь спектр услуг, включая дополнительные. А для более тесного знакомства с компанией - продемонстрировать с помощью реальных фото и видео материалов все как на ладони, ведь история интересна тогда, когда имеет много интересных деталей.

Так как одна из наших сильных сторон - экспертная в работа с клиентами из сегмента производителей и промышленности, мы сразу наметили направление, в котором будем работать. Необходимо было действовать аккуратно, но при этом применить креативные решения, которые будут понятны аудитории и откликнутся близкими и понятными образами. 

2. Аудит сайтов основных конкурентов и представителей смежных сфер

Чтобы создавать релевантный продукт, нужно познакомиться с контекстом и окружением. Это очень важно, так как опыт конкурентов всегда играет крайне важную роль для понимания общей картины. Более того, это поможет выявить значимые тенденции и увидеть шаблонные ошибки (которые мы не хотим повторить).

Итак, анализ прямых и косвенных конкурентов. Мы с удивлением поняли, что все их сайты похожи друг на друга как две капли воды, а некоторые конкуренты просто скачивают один и тот же шаблон. В них нет индивидуальности, эмоциональной подоплеки, они не пытаются выделиться на общем фоне, не общаются с целевой аудиторией, а просто как билборд показывают по факту то, что есть. Может показаться, что раз такая тенденция существует, то, может быть, большего и не надо? - Но нет, все люди любят увлекательные истории и красивые вещи вокруг себя. Это появилось у человека задолго до того, как появились рыночные отношения в принципе. Мы не раз сталкивались на практике, как подобный шаблонный подход обезличивает компанию, делая ее просто одной из тысяч!

Но в этом есть и хорошие новости! Оказалось, что в данной сфере сделать что-то кардинально новое не так уж и сложно, ведь шаблон на то и шаблон - в нем нет ни проработки логики с точки зрения UX, ни изящности и эмоциональности с точки зрения UI.

3. Процесс разработки платформы бренда и дизайн-концепции

Аналитика собрана, дальше наступает момент, которого все так давно ждали - приступаем к разработке.

Разработка логотипа

Масштабное обновление “лица компании” мы начали с разработки нового логотипа. Любая история начинается с персонажа, поэтому нужно определить, кто мы, и как нас будут видеть клиенты.

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

Устаревшие нечитаемые шрифты, несочетаемые цвета - все это похоже на рудимент из прошлого.

Так как мы создаём историю, необходимо закладывать ее зачатки уже начиная с логотипа. Это не мог быть просто знак, или просто название, он должен был быть глубоким, несущим в себе смыслы, но при этом легко воспринимаемым, дружелюбным и интерактивным!)

Процесс генерации идей у нас выстроен достаточно давно - мы собрали всю команду, выделенную под проект, и устроили мозговой штурм. Нам хотелось создать такой логотип, который будет отражать концепцию предприятия. В то же время эта концепция должна быть близка клиентам и не затерта конкурентами.

Понимая специфику бизнеса нашего заказчика, мы разложили все его основополагающие ассоциации по полочкам:

Солнце - созидательная энергия, то, без чего невозможна жизнь на земле

Поля - земля, которая даёт урожай

Росток - основной продукт, символ пробуждения, развития

Хранилище - это корзина, в которой хранится то, что выросло, изобилие

Переработка - жернова и современная техника, функциональность, преобразование

Обозначив эти элементы, мы объединили их в единое целое, гармоничный визуал, который несет в себе смысл и начинает повествование истории. Мы сразу предусмотрели интерактивную составляющую, воссоздав логотип в том порядке, в котором происходит реальный процесс в жизни предприятия и анимировали его, создав прелоадер при загрузке страниц для будущего сайта!

Дизайн-концепция

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

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

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

Кто бы мог подумать, но наши поиски привели нас в Японию… Дух свободы, российских полей оказался очень схож с богатой и яркой культурой самураев.

Мы стали изучать то, что создают наши коллеги. У многих сайты из Азии сразу ассоциируются с нагроможденными и пестрыми картинками, которые вызывают эпилепсию, но это не совсем правда.

Современные японские сайты очень красивые, эстетически выверенные, они имеют много пространства, качественный контент - все это напоминает катану, созданную великим мастером.

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

Разработка дизайна сайта

Идея готова, настало время сделать это! Разработка начинается с дизайна, который, в свою очередь, состоит из таких важных дисциплин как UX и UI. 

Несмотря на то, что UI мы продумали до мелочей, очень важно было не забывать о контенте, ведь именно благодаря нему мы рассказываем историю. UI - это красота речи, но сами буквы - это конечно же UX. Мы решили сконцентрироваться на решении конкретных задач заказчика, не разбавляя сайт ненужными блоками, которые создадут лишнюю нагрузку и уведут целевую аудиторию от основного смысла.

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

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

При разработке сайта мы выбрали каскадную модель: сначала согласовали дизайн, затем шел этап программной верстки и программирование.

Верстка и программирование 

На этапе верстки мы сделали большой объем работы, заложив множество сложных интерактивных анимаций. 

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

Немного про оптимизацию:

• реализован lazy load: изображение подгружаются только тогда, когда мы подходим близко к блоку, где оно расположено - что дает нам выигрыш во времени, требующемся для первого взаимодействия с сайтом, то есть, в быстродействии сайта;

• видео на первом экране: подготовлено во всех форматах, в том числе самом оптимизированном для использования в интернете формате .webm

• все иконки векторные, они собраны в один спрайт и подгружаются один раз (технология не новая, мы давно используем ее во всех проектах, где это требуется)

• чистый код: все что можно было реализовать через псевдоэлементы, не засоряя разметку - было сделано именно таким образом, в стилях.

И еще пара фишек:

Мы реализовали уникальный прелоадер - svg-анимацию, показывающую, как “собирается” логотип, причем сборка происходит как раз по тем самым шагам, из которых идея логотипа и состоит. 

Также мы заложили два вида прохода по главной странице. На десктопе страница скроллится горизонтально, а в мобильной версии пропадает верхняя навигация и страница скролится вертикально, это реализовано без дублирования контента и шаблонов.

С программированием подобных решений у нас никогда не бывает проблем, так как основная нагрузка приходится именно на создание идеи и дизайн. Сайт написан на базе 1С-Битрикс: Управление сайтом, который позволяет решить совершенно любые задачи, а также обеспечивает отличную защиту сайта, не говоря уже о том, что это отличная платформа для дальнейшего развития продукта.

Все реализовано на стандартных модулях в рамках ядра и обновляется без проблем. Удобное наполнение выстроено на стандартных инфоблоках. 

Нет лучше истории, чем герой, прошедший через многое! Трудности, с которыми мы столкнулись.

Имея достаточно большой опыт в разработке сайтов для промышленности и производителей, в особенности для B2B, мы решили много различных задач, но не бывает истории без трудностей.

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

Тут на помощь пришел сам заказчик. Это доказывает нашу позицию о том, что лучшая команда - это команда, в которой есть хранитель идеи, человек, который решает свою задачу и знает о своем бизнесе лучше всех. У элеватора есть своя история, а это действительно важно для нас. Ведь красиво поданная концепция цепляет, попадая в самое сердце.

Мы прошли все этапы разработки проекта, вложили в него душу и максимум креатива. Сайт Бердиевского элеватора наполнен всей необходимой функциональностью и современным дизайном. Еще до запуска сайта в широкие массы он успел собрать положительные отзывы пользователей, занял призовые места на таких конкурсах как Золотой сайт и CSSDA.

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

«Это отличная история, достойная Канн» - так отозвался о нашей работе один из самых уважаемых и влиятельных людей из мира Digital.

Мы всегда ставим высокую планку и используем смелые идеи для решения задач бизнеса, совмещая UI и UX дизайн, при этом техническая часть всегда на высоте!