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

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

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

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

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

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

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

• показать новый масштаб Development Systems — на момент обращения к нам компания сильно разрослась, и старый сайт уже не охватывал все ее грани;
• презентовать свои IT-продукты — компания собиралась представить продукты MATRIX (специализированное ПО для 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.

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

• Четко настройте проектный менеджмент. Весь процесс создания сайта надо бить по этапам, согласовывать со студией и обозначать дедлайны, идти спринтами.
• Делайте оплаты студии по этапам, по каждой задаче или подпроекту отдельно. Если срок проекта несколько месяцев и пул работ большой, то в процессе некоторые задачи могут измениться или отпасть. Поэтапная оплата позволит избежать финансовой путаницы.
• Определите внутри вашей компании ЛПР — лицо, принимающее решения. Это может быть как один человек, так и группа (например, собственник компании и директор по маркетингу). Привлекайте к обсуждению сайта только этих людей. Это поможет ускорить согласования на проекте.

Студиям

• Если компания большая и там существует куча отделов по согласованию, нужно сразу выходить на ЛПР и разговаривать только с ним, или с их группой. Тогда работа будет двигаться быстрее и не будет недопониманий.
• Если вы видите, что менеджер, который с вами общается, начинает вносить правки под себя, вы их делаете, а потом ЛПР их не принимает — договаривайтесь с менеджером. Объясните, что если вы будете делать правки под желания человека, который не является ЛПР, то и вы, и заказчик будете терять время, деньги и мотивацию.
• Не бойтесь нового, если вы уверены, что сможете помочь. Мы сделали сложные костыльные блоки на Тильде и страницы на HH.ru впервые, и в итоге получилось круто. Конечно, предупреждайте заказчика, что вы такого еще не делали. Возможно, стоит попробовать сделать это за меньший прайс.
• Если постоянно будете отказываться от допуслуг, есть вариант, что заказчик со временем перейдет к другой студии, которая не отказывает в реализации новых задач.

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

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

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