«‎Матвей, там еще правочек накинули». Как мы умудрились взять проект на 2,5 месяца и делать его 2,5 года

Километры согласований, миллионы чатов, правки на ходу, ответы длиною в вечность. Примерно так часто выглядит работа над корпоративным сайтом. Поначалу у нас было нечто похожее, но мы перестроили работу и сейчас получаем от нее удовольствие. Как это было — рассказываем на примере 2,5-летнего сотрудничества с Development Systems. А с теми, кто дочитает до конца, делимся мемом и советами, как облегчить работу над корпоративным сайтом.

Весной 2021 года к нам обратились Development Systems. Компания занимается сложными услугами в недвижимости: BIM проектированием и BIM консалтингом, предоставляет услугу «‎Технический заказчик» и свои продукты в сфере BIM проектирования.

Им нужно было сделать новый сайт на замену старому: более современный, свежий по дизайну, презентующий новые продукты, которые пока никак не были отражены на старом сайте.

Старый сайт выглядел как-то так. Стандартные блоки на Тильде, простая главная, в общем, шаблонная история.

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

В итоге договорились, что делаем большой структурный корпоративный сайт на Тильде под следующие цели:

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

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

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

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

Вообще тексты на этом проекте довольно простые и технические, информативные. Они созданы больше под SEO. Но они не совсем закрывают задачу презентовать имидж компании. Над этим мы активнее поработали при создании дизайна.

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

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

После создания прототипа, учитывая приоритеты компании, мы взялись за разработку визуала для сопровождения IT-продуктов Development Systems. Логотипы и схемы должны были отражать суть услуг и соответствовать уже существующему гайдлайну.

Тут-то и начались проблемы. То, что мы сделали, не нравилось директору компании, а именно он выступал как ЛПР (лицо, принимающее решения). В то время мы взаимодействовали с руководителем проектов Development Systems. Она подбирала референсы, общалась с нами по задачам, а директору компании предоставляла только конечный результат.

Порядок получился такой: проджект собирает задачу → мы делаем визуал → проджект несет его директору → директору не нравится → проджект заново подбирает референсы и дает нам задачу → мы делаем → проджекту нравится, а директору нет. И так по кругу.

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

Достучаться до ЛПР (директора) у нас не получалось. Какое-то время мы поиграли в испорченный телефон и начали выгорать. Конечно, правки — это рабочие моменты, и мы к ним всегда готовы. Но когда все это повторяется из раза в раз, а наша работа пропадает зря — это просто по-человечески обидно и сильно демотивирует.

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

С декабря 2021-го мы потеряли связь с компанией на полгода. Ни ответа, ни звонка — ничего. За это время мы отдохнули от проекта, наверное, как и сам клиент. Какие процессы тогда происходили внутри компании, нам точно неизвестно.

Мы продолжили работу над сайтом только в апреле 2022-го. В то время у Development Systems сменился проектный менеджер. Им стал Артем, с которым мы взаимодействуем и по сегодняшний день.

Надо сказать, что на новом этапе сотрудничества у нас в проекте многое поменялось в лучшую сторону:

Созванивались с клиентом по проекту раз в неделю, а по мелким задачам переписывались в Telegram.

Изначально, еще в 2021-м, у компании был запрос на дизайн в стиле киберпанк, футуризм, мотивы из фильма «‎Матрица». В референсах к проекту были в основном сайты зарубежных IT-компаний: в темных тонах, с большим количеством анимации и неоновых элементов. Но в 2022-м мотивы киберпанка стали для заказчика неактуальными, и надо было собрать новую концепцию.

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

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

Внедрили доработки на ходу. На этом этапе нас попросили добавить на сайт HR-лонгриды — страницы для привлечения новых сотрудников, для прокачки HR-бренда: «‎История успеха», «‎История компании» и «‎Работа у нас». К счастью, тексты уже были готовы, и нам оставалось сверстать страницы. Они вышли лаконичными, с упором на текст, в котором раскрывались истории успеха сотрудников Development Systems. Как референс взяли страницы с похожим посылом, которые в то время сделали в Adidas.

Страницу о компании по просьбе заказчика сделали заново, используя новые вводные и пожелания. А ближе к концу проекта заказчик в срочном порядке попросил добавить на сайт еще две страницы: «Тендеры» и «Стратегические закупки».

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

Этот сайт практически полностью сверстан на зероблоках. На стандартных блоках реализованы разве что картинки на страницах портфолио и фоновые изображения.

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

Интересно было работать и над страницей с историей компании. За каждым годом развития здесь закреплен отдельный контентный блок, также мы добавили анимацию при скролле вниз.

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

Не обошлось и без факапов. Когда мы уже сделали весь сайт, Артем зашел его проверять и сказал, что вообще-то их основная ЦА с 2K экранами, то есть с огромным разрешением. Об этом мы услышали впервые. Наш дизайнер Матвей собрал волю в кулак и этим кулаком пошел долбить гугл.

Пришлось экстренно идти учиться, как сделать резиновую верстку Window Container (сейчас это реализуется в Тильде через Autoscale, но тогда его еще не было). Это решение некорректно отображалось на некоторых экранах и не все работало как надо. Проблема была еще в том, что заказчик просил внедрить это на все страницы сайта. Но в итоге картинки бы пикселились и сайт выглядел бы неаккуратно, все было бы огромным. Мы отбивали это решение как могли и в итоге отбили: резиновыми сделали лишь некоторые блоки на некоторых страницах.

Итого, имея только прошлогодние первоначальные прототипы в июне 2022-го, мы заново начали работу и сдали сайт в середине августа 2022-го. Создание дизайна и верстка сайта на Тильде c добавлением новых страниц на ходу заняли 2,5 месяца.

Дополнительно мы настроили стандартный пакет интеграций: Вебмастер, Метрику, Search Console и прием заявок на почту.

Насколько мы видим сейчас, на сайт падает 5–6 заявок в месяц. При этом трафик из поиска (около 41%) приходит в основном по имиджевым запросам и конкретным услугам компании. То есть сайт выполняет свою первоначальную задачу — поддерживать имидж, презентовать портфолио и услуги, чтобы клиенты убеждались в надежности компании и хотели с ней сотрудничать.

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

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

Вот примеры задач, которые мы выполняли в рамках техподдержки:

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

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

Задизайнили брендированную страницу Development Systems на HH.ru. Осенью 2022 года, через 2 месяца после запуска сайта, заказчик спросил, делаем ли мы дизайн страницы под HH.ru. Мы честно ответили, что нет, но можем попробовать. Посмотрели требования, почитали про опыт коллег и пошли делать. Development Systems предоставили нам тексты, примерную структуру страниц и иллюстрации, нам нужно было все это оформить в макет.

С версткой все вышло интересно. HH.ru предлагают два варианта:

1) дизайн и верстку делают сами HH.ru,

2) дизайн-макет мы готовим сами, но строго под их параметры, а верстку HH.ru выполняют самостоятельно.

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

Создали страницу о собственнике как лендинг внутри сайта. Летом 2023 года от компании пришел запрос сделать страницу о собственнике Development Systems — Сергее Веселове. Для этого компания даже провела отдельную фотосессию Сергея. По дизайну страница должна была немного сочетаться с сайтом, но все равно выглядеть как отдельный лендинг и быть особняком. Поначалу мы не попали в ожидания: заказчик попросил сделать что-то непохожее на сам сайт, и мы сделали страницу на свой вкус. Во второй заход, когда мы детальнее обсудили ожидания и собранные референсы, согласование прошло гладко.

Сделали англоязычную версию сайта Development Systems. На самом деле это выжимка из страницы с услугой Технический заказчик, переведенная на английский. Получился аккуратный одностраничный сайт, сделанный под зарубежный рынок.

Задизайнили обучающий портал для BIM-работников. У компании уже была такая база знаний, ее нужно было просто привести под единый стиль с новым сайтом. Мы передали заказчику макет в Фигме, а он сверстал его своими силами, насколько мы знаем, на WordPress.

Заказчикам сайтов

Студиям

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

Приходите к нам за новым сайтом. Как видите, мы любим долгосрочное сотрудничество: 2,5 года — это таки показатель. Возможно, пободаемся с вами за красоту и удобство сайта, не без этого, но вы останетесь довольны. Стучитесь к нам в Телеграм или оставляйте заявку на сайте.

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