Как создавался лучший корпоративный B2B-сайт России 2020 года
ЗаказчикАкционерное общество «Бердиевский элеватор» — сельскохозяйственное предприятие, которое находится в Иловлинском районе в маленькой деревушке Бердия.ЗадачаКомпания перешла на новый этап развития, и нужно было глобально пересмотреть «лицо компании» как на рынке, так и в сети.
Каждый день на свет появляется масса новых сайтов, но не все становятся «оскароносными». Нашсайт для «Бердиевского элеватора» именно такой: он отлично решает задачи заказчика и занимает особое место в нашем портфолио.
Мы прошли все этапы — от проработки позиционирования и глубочайшей аналитики до разработки платформы бренда и сайта. Об этом и расскажем.
Предыстория
Заказчик
Акционерное общество «Бердиевский элеватор» — сельскохозяйственное предприятие, которое находится в Иловлинском районе в маленькой деревушке Бердия. Организация занимается закупкой зерновых культур, хранением, очисткой и переработкой зерна и масла семян.
Задача
Компания перешла на новый этап развития, но при этом сильно отставала в плане позиционирования. При высоком уровне услуг и хорошей потенциальной конкурентоспособности бренд ничем не выделялся, и нужно было глобально пересмотреть «лицо компании» как на рынке, так и в сети.
Цель
Мы были рады узнать, что заказчик открыт к обсуждению необычных идей и в целом поддерживает современные и нестандартные решения, поэтому и обратился к нам как сторителлерам и креативщикам.
Изучив целевую аудиторию и рынок конкурентов, мы поставили цель: сделать особенный проект, который выделит клиента среди массы однотипных сайтов этой ниши и вызовет эмоциональный отклик у целевой аудитории.
«Магвай» — креативный продакшн, потому наша задача состоит не только в разработке качественного продукта, но и в создании полноценной истории.
В центре рассказа — небольшое, но гордое и развивающееся предприятие, в котором любят свою работу и делают её хорошо.
Итак, нам предстояло собрать весь опыт, который мы получили на более чем 800 проектах, и выйти за рамки привычного представления об элеваторе, чтобы создать что-то кардинально новое!
Перед тем как приступить к разработке, мы провели брифинг с заказчиком, а также постарались собрать максимум информации о его бизнес-процессах, значимых конкурентах, целевой аудитории.
Всё это поможет добиться качественного контента и продумать все детали до мелочей.
1. Анализ целевой аудитории
Перед началом работ нужно познакомиться с целевой аудиторией. Для этого мы систематизировали найденную информацию и определили портрет потребителя услуг элеватора.
По демографическому признаку мы выявили, что это в основном мужчины в возрасте от 35 до 65 лет. Из этого следует, что мы будем ориентироваться на взрослую и довольно консервативную аудиторию. Необходимо разработать дизайн, который не будет конфликтовать с их восприятием. Сайт должен быть максимально понятным и удобным, но при этом стильным и современным — как иначе показать, что наш элеватор на шаг впереди.
Также мы разделили аудиторию по отраслям и целям, которые они преследуют, обращаясь к элеватору:
Сельскохозяйственные производители. Хотят с наименьшими усилиями выгодно продать свой продукт или поместить его на хранение до совершения сделки.
Производители кормов для животных. Им необходимо получать бесперебойные поставки зерна однородного качества.
Мукомольные предприятия. Их цель — получать стабильно и круглогодично зерновые партии однородного качества.
Зерновые трейдеры. Для них необходимо отгружать зерновые и масличные культуры экспортного качества и отправить железнодорожным составом.
Чтобы заказчики из разных сегментов целевой аудитории выбрали именно «Бердиевский элеватор», нужно показать, что организация удовлетворяет их запросы. Поэтому очень важно рассказать про современное оборудование, условия хранения, а также указать весь спектр услуг, включая дополнительные. А для более тесного знакомства с компанией — продемонстрировать с помощью реальных фото и видео всё как на ладони.
История интересна тогда, когда в ней много интересных деталей.
Так как одна из наших сильных сторон — экспертная работа с клиентами из сегмента производителей и промышленности, мы сразу наметили направление, в котором будем работать. Необходимо было действовать аккуратно, но при этом применить креативные решения, которые будут понятны аудитории и откликнутся близкими и понятными образами.
2. Аудит конкурентов
Чтобы создавать релевантный продукт, нужно познакомиться с контекстом и окружением. Это очень важно, так как опыт конкурентов всегда играет важную роль для понимания общей картины. Более того, это поможет выявить значимые тенденции и увидеть шаблонные ошибки (которые мы не хотим повторить).
Итак, анализ прямых и косвенных конкурентов. Мы с удивлением поняли, что все их сайты похожи друг на друга как две капли воды, а некоторые конкуренты просто скачивают один и тот же шаблон. В них нет индивидуальности, эмоциональной подоплёки, они не пытаются выделиться на общем фоне, не общаются с целевой аудиторией, а просто как билборд показывают то, что есть.
Раз такая тенденция существует, может быть, большего и не надо? Но нет, все люди любят увлекательные истории и красивые вещи вокруг себя. Этот запрос появился задолго до формирования рыночных отношений. Мы не раз сталкивались на практике, как шаблонный подход обезличивает компанию и сводит на нет все её преимущества.
Но в этом есть и хорошие новости! Оказалось, что в этой сфере сделать что-то кардинально новое не так уж и сложно.
Шаблон на то и шаблон — в нём нет ни проработанной логики UX, ни изящности и эмоциональности UI.
3. Разработка платформы бренда и дизайн-концепции
Аналитика собрана, дальше наступает момент, которого все так давно ждали — приступаем к разработке.
Логотип
Масштабное обновление «лица компании» мы начали с разработки нового логотипа. Любая история начинается с персонажа, поэтому нужно определить, кто мы и как нас будут видеть клиенты.
Аналитика показала, что у многих конкурентов логотип — это просто надпись или устаревший знак, который не просто не работает, а вредит имиджу компании. Добавьте сюда же нечитаемые шрифты, несочетаемые цвета и прочие рудименты.
Так как мы создаём историю, она должна вырастать из логотипа.
Это не мог быть просто знак, или просто название, он должен был глубоким, со смыслом, который легко считывается, дружелюбным и интерактивным.
Мы собрали команду, выделенную под проект, и устроили мозговой штурм. Нам хотелось создать такой логотип, который будет отражать концепцию предприятия. В то же время эта концепция должна быть близка клиентам и не затёрта конкурентами.
Понимая специфику бизнеса нашего заказчика, мы разложили все его основополагающие ассоциации по полочкам:
Солнце — созидательная энергия, то, без чего невозможна жизнь на земле.
Поля — земля, которая даёт урожай.
Росток — основной продукт, символ пробуждения, развития.
Хранилище — это корзина, в которой хранится то, что выросло, изобилие.
Переработка — жёрнова и современная техника, функциональность, преобразование.
Обозначив эти элементы, мы объединили их в единое целое, гармоничный визуал, который несёт в себе смысл и запускает повествование. Мы сразу предусмотрели интерактивную составляющую, воссоздав логотип в том порядке, в котором происходит реальный процесс в жизни предприятия. И анимировали его, создав прелоадер при загрузке страниц для будущего сайта.
Дизайн-концепция
Для истории нам нужен сюжет. Для этого при разработке сайтов мы создаём дизайн-концепцию. Это глобальное описание направления дизайна, его идея от начала и до конца. Это фундамент, на основе которого затем выстраивается дизайн, дальнейший интерактив. Это путь, по которому двигается наш персонаж.
Нам нужно удивить целевую аудиторию, но не спугнуть её. Нужны душевные, понятные и близкие образы, которые помогут укрепить связь и интерес к предприятию и услугам. Ассоциации, созданные на этапе разработки логотипа, мы решили использовать и для создания дизайн-концепции.
Но как подать эту историю нестандартно? Это — магия креатива, дизайн-мышления и сторителлинга.
Процесс, когда команда старается выйти за рамки, когда поиск вдохновения, решения задачи происходит во всём, что нас окружает. Результатом могут стать совершенно невероятные и порой даже странные образы, но это скилл, который и отличает креативщиков от простых производителей контента.
Кто бы мог подумать, но наши поиски привели нас в Японию… Дух свободы, российских полей оказался очень схож с богатой и яркой культурой самураев.
Мы стали изучать, что создают наши коллеги. У многих сайты из Азии сразу ассоциируются с нагромождёнными и пёстрыми картинками, которые вызывают эпилепсию, но это не совсем правда.
Современные японские сайты очень красивые, эстетически выверенные, в них много свободного пространства и качественный контент, — всё это напоминает катану, созданную великим мастером.
Идея передать дух свободы, используя при этом пространство, воздух — это и стало ключевой идеей. Плюс фишкой стал горизонтальный скролл, который позволил нам передать контент интересно и динамично, подкрепляя это анимацией, похожей на ветер, который колышет колосья в поле.
Дизайн сайта
Идея готова, настало время сделать это! Разработка начинается с дизайна, который состоит их двух дисциплин — UX и UI.
Несмотря на то что интерфейс мы продумали до мелочей, очень важно было не забывать о контенте, ведь именно благодаря ему мы рассказываем историю.
UI — это красота речи, но сами буквы — это, конечно же, UX.
Мы решили сконцентрироваться на решении конкретных задач заказчика, не разбавляя сайт ненужными блоками, которые создадут лишнюю нагрузку и уведут целевую аудиторию от основного смысла.
Разработав структуру, мы создали майндмэп, в котором отразили весь необходимый перечень функциональных моделей для решения задачи.
Следующим шагом стала разработка дизайна, в котором нужно было рассказать о предприятии, показать его услуги и преимущества, обеспечить понятную и удобную обратную связь пользователей с предприятием.
При разработке сайта мы выбрали каскадную модель: сначала согласовали дизайн, затем шёл этап программной вёрстки и программирование.
Вёрстка и программирование
На этапе вёрстки мы сделали большой объём работы, заложив множество сложных интерактивных анимаций.
Процесс взаимодействия пользователя с сайтом был продуман до мельчайших деталей, чтобы в каждый момент времени было понятно, что происходит сейчас и что ожидает нас дальше.
Для этого мы кастомизировали курсор, проработали все его состояния, в том числе при наведении на интерактивные элементы.Сверстали сложный прогресс-бар, отображающий передвижение пользователя по главной странице и синхронизированный с горизонтальным скроллом.
В целом, сайт подкупает именно вот этими не бросающимися в глаза, но важными для пользователя взаимодействиями.
Немного про оптимизацию:
Lazy load: изображения подгружаются только тогда, когда мы подходим близко к блоку, где оно расположено — сайт работает быстро.
Видео на первом экране. Подготовили ролик во всех форматах, в том числе самом оптимизированном для использования в интернете формате webm.
Все иконки векторные. Они собраны в один спрайт и подгружаются один раз (технология не новая, мы давно используем её во всех проектах, где это требуется).
Чистый код. Всё, что можно реализовать через псевдоэлементы, не засоряя разметку, прописано в стилях.
И ещё пара фишек.
Мы реализовали уникальный прелоадер — svg-анимацию, показывающую, как «собирается» логотип, причём сборка происходит как раз по тем самым шагам, из которых идея логотипа и состоит.
Также мы заложили два вида прохода по главной странице. На десктопе страница скроллится горизонтально, а в мобильной версии пропадает верхняя навигация и страница скролится вертикально; это реализовано без дублирования контента и шаблонов.
С программированием подобных решений у нас никогда не бывает проблем, так как основная нагрузка приходится именно на создание идеи и дизайн. Сайт написан на базе 1С-Битрикс: Управление сайтом, который позволяет решить любые задачи, а также обеспечивает отличную защиту сайта. Не говоря о том, что это отличная платформа для дальнейшего развития продукта.
Всё реализовано на стандартных модулях в рамках ядра и обновляется без проблем. Удобное наполнение построено на стандартных инфоблоках.
Трудности, с которыми мы столкнулись
Но нет лучше истории, чем герой, прошедший через многое!
Имея достаточно большой опыт в разработке сайтов для промышленности и производителей, в особенности для B2B, мы решили много различных задач, но не бывает истории без трудностей.
В данном случае мы столкнулись с тем, что элеватор в принципе сложно романтизировать: там работают суровые мужчины, шумят большие машины и стоят огромные зерновые хранилища. Это тяжёлый труд, но нам нужно было найти в нём красоту.
Тут на помощь пришёл сам заказчик. Это доказывает нашу позицию о том, что лучшая команда — это команда, в которой есть хранитель идеи, человек, который решает свою задачу и знает о своём бизнесе лучше всех. У элеватора есть своя история, а это действительно важно для нас. Ведь красиво поданная концепция цепляет, попадая в самое сердце.
Мы прошли все этапы разработки проекта, вложили в него душу и максимум креатива. Сайт «Бердиевского элеватора» наполнен всей необходимой функциональностью и современным дизайном.
Сайт собрал положительные отзывы пользователей и занял призовые места на таких конкурсах, как Золотой сайт и CSSDA.
Сейчас сайт привлекает новых клиентов для предприятия, которые также оценили нашу работу по достоинству. Но и это ещё не всё. Сами руководители «Бердиевского элеватора» вдохновились проделанной работой, что для нас является особой наградой! И это не удивительно, ведь там работают настоящие профессионалы своего дела, чья миссия не заканчивается на оказании услуг.
Для сотрудников сайт стал зеркалом, в котором они увидели себя со стороны. Проект воодушевил также и нашу команду, которая ещё раз подтвердила то, что делает не просто рядовые сайты, а настоящее волшебство — ведь каждая, казалось бы, мелочь, которую мы реализовали, имеет своё практическое назначение, погружая обычного юзера в мир, который мы создали.
«Это отличная история, достойная Канн»
Мы всегда ставим высокую планку и используем смелые идеи для решения задач бизнеса, совмещая UI и UX-дизайн и качественную техническую реализацию.
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
