Километры согласований, миллионы чатов, правки на ходу, ответы длиною в вечность. Примерно так часто выглядит работа над корпоративным сайтом. Поначалу у нас было нечто похожее, но мы перестроили работу и сейчас получаем от нее удовольствие. Как это было — рассказываем на примере 2,5-летнего сотрудничества с Development Systems. А с теми, кто дочитает до конца, делимся мемом и советами, как облегчить работу над корпоративным сайтом.
Заказчик — крупная девелоперская компания
Весной 2021 года к нам обратились Development Systems. Компания занимается сложными услугами в недвижимости: BIM проектированием и BIM консалтингом, предоставляет услугу «Технический заказчик» и свои продукты в сфере BIM проектирования.
Им нужно было сделать новый сайт на замену старому: более современный, свежий по дизайну, презентующий новые продукты, которые пока никак не были отражены на старом сайте.
Старый сайт выглядел как-то так. Стандартные блоки на Тильде, простая главная, в общем, шаблонная история.
Задача — сделать корпоративный сайт для поддержания имиджа
В целом сайт нужен был для поддержания имиджа. Этот тот самый случай, когда компания в своей нише довольно известная и не нуждается в представлении. Клиенты Development Systems приходили по сарафану и в основном становились постоянными. Поэтому сайт должен был поддерживать общее впечатление надежного BIM-партнера, знакомить с услугами и презентовать портфолио.
В итоге договорились, что делаем большой структурный корпоративный сайт на Тильде под следующие цели:
- показать новый масштаб Development Systems — на момент обращения к нам компания сильно разрослась, и старый сайт уже не охватывал все ее грани;
- презентовать свои IT-продукты — компания собиралась представить продукты MATRIX (специализированное ПО для BIM-разработчиков), и для него нужна была визуальная упаковка, логотипы и т. д.;
- достойно оформить портфолио — разграничить проекты по трем основным услугам компании.
Заказчик предоставил готовые тексты для сайта. В компании уже работал маркетолог, который предоставил нам необходимые данные о конкурентах и целевой аудитории. При этом у компании был готовый гайдлайн, которого нам нужно было придерживаться. То есть какие-то вещи в дизайне мы тоже сделали быстрее.
Со своей стороны к работе мы подключили двух человек — один проектировал сайт, второй занимался дизайном и версткой. Наш заказчик изначально попросил не подключать на проект маркетолога, ведь у них был свой специалист.
Учитывая первоначальные задачи, мы поставили себе срок 2,5 месяца. За это время мы должны были спокойно пройти все этапы согласований, и предполагалось, что сайт будет полностью готов к работе. Но что-то пошло не так.
Спроектировали сайт
Прототип сайта мы сделали летом 2021-го. Компания предоставила уже готовые тексты, да и в целом уже имела четкое представление, какой должна быть структура сайта. Мы просто воплотили эти желания в жизнь.
Первоначальный вариант прототипа мы сделали полностью рыбой, пока нам не предоставили тексты. Даже такой прототип заказчику понравился, структура страниц и так была ясна. Вот так выглядели прототипы страниц уже подставленными текстами:
Вообще тексты на этом проекте довольно простые и технические, информативные. Они созданы больше под SEO. Но они не совсем закрывают задачу презентовать имидж компании. Над этим мы активнее поработали при создании дизайна.
Тексты нам присылали в вордовском документе, единым полотном. Самостоятельно их мы не правили, разве что время от времени предлагали что-то сократить или разбить на блоки для лучшей читабельности.
Казалось бы, с готовыми текстами от клиента не должно быть лишних телодвижений: подставил в прототип и все. Но по факту именно они стали большой проблемой. Заказчик со своей стороны постоянно оптимизировал тексты, вносил бесконечные правки в уже готовый прототип, а потом и в макет и уже на этапе верстки. И это, конечно, влияло на скорость работы. В итоге, начав работать в июне, мы согласовали прототип только к концу лета.
Сделали логотипы и визуал для IT-продуктов
После создания прототипа, учитывая приоритеты компании, мы взялись за разработку визуала для сопровождения 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, но тогда его еще не было). Это решение некорректно отображалось на некоторых экранах и не все работало как надо. Проблема была еще в том, что заказчик просил внедрить это на все страницы сайта. Но в итоге картинки бы пикселились и сайт выглядел бы неаккуратно, все было бы огромным. Мы отбивали это решение как могли и в итоге отбили: резиновыми сделали лишь некоторые блоки на некоторых страницах.
Что в итоге: сдали сайт и договорились о регулярной техподдержке
Ссылка на сайт: https://ds.do/
Итого, имея только прошлогодние первоначальные прототипы в июне 2022-го, мы заново начали работу и сдали сайт в середине августа 2022-го. Создание дизайна и верстка сайта на Тильде c добавлением новых страниц на ходу заняли 2,5 месяца.
Дополнительно мы настроили стандартный пакет интеграций: Вебмастер, Метрику, Search Console и прием заявок на почту.
В целом у нас получился хороший минималистичный корпоративный сайт. Мы, как и заказчик, остались довольны результатом. Это достойный пример того, как на Тильде можно сделать полноценный корпоративный сайт почти на 100 страниц.
Насколько мы видим сейчас, на сайт падает 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 сделали не очень, где-то подпортили макет и убрали нашу предполагаемую анимацию. Повлиять на это мы не можем, увы. Ждем, когда они позволят компаниям верстать страницы самостоятельно.
В скором будущем планируем оформить интеграцию сайта с HH.ru: чтобы вакансии автоматически выводились на сайт, а отклики с сайта падали в личный кабинет на HH.ru. Это позволит компании облегчить процесс найма.
Создали страницу о собственнике как лендинг внутри сайта. Летом 2023 года от компании пришел запрос сделать страницу о собственнике Development Systems — Сергее Веселове. Для этого компания даже провела отдельную фотосессию Сергея. По дизайну страница должна была немного сочетаться с сайтом, но все равно выглядеть как отдельный лендинг и быть особняком. Поначалу мы не попали в ожидания: заказчик попросил сделать что-то непохожее на сам сайт, и мы сделали страницу на свой вкус. Во второй заход, когда мы детальнее обсудили ожидания и собранные референсы, согласование прошло гладко.
Сделали англоязычную версию сайта Development Systems. На самом деле это выжимка из страницы с услугой Технический заказчик, переведенная на английский. Получился аккуратный одностраничный сайт, сделанный под зарубежный рынок.
Задизайнили обучающий портал для BIM-работников. У компании уже была такая база знаний, ее нужно было просто привести под единый стиль с новым сайтом. Мы передали заказчику макет в Фигме, а он сверстал его своими силами, насколько мы знаем, на WordPress.
Советы тем, кто делает и заказывает корпоративные сайты
Заказчикам сайтов
- Четко настройте проектный менеджмент. Весь процесс создания сайта надо бить по этапам, согласовывать со студией и обозначать дедлайны, идти спринтами.
- Делайте оплаты студии по этапам, по каждой задаче или подпроекту отдельно. Если срок проекта несколько месяцев и пул работ большой, то в процессе некоторые задачи могут измениться или отпасть. Поэтапная оплата позволит избежать финансовой путаницы.
- Определите внутри вашей компании ЛПР — лицо, принимающее решения. Это может быть как один человек, так и группа (например, собственник компании и директор по маркетингу). Привлекайте к обсуждению сайта только этих людей. Это поможет ускорить согласования на проекте.
Студиям
- Если компания большая и там существует куча отделов по согласованию, нужно сразу выходить на ЛПР и разговаривать только с ним, или с их группой. Тогда работа будет двигаться быстрее и не будет недопониманий.
- Если вы видите, что менеджер, который с вами общается, начинает вносить правки под себя, вы их делаете, а потом ЛПР их не принимает — договаривайтесь с менеджером. Объясните, что если вы будете делать правки под желания человека, который не является ЛПР, то и вы, и заказчик будете терять время, деньги и мотивацию.
- Не бойтесь нового, если вы уверены, что сможете помочь. Мы сделали сложные костыльные блоки на Тильде и страницы на HH.ru впервые, и в итоге получилось круто. Конечно, предупреждайте заказчика, что вы такого еще не делали. Возможно, стоит попробовать сделать это за меньший прайс.
- Если постоянно будете отказываться от допуслуг, есть вариант, что заказчик со временем перейдет к другой студии, которая не отказывает в реализации новых задач.
Вот такой гигантский получился кейс. Спасибо, что прочитали до конца или хотя бы доскроллили до этого момента. Вот вам мем, предупреждаем, будет больно.
Приходите к нам за новым сайтом. Как видите, мы любим долгосрочное сотрудничество: 2,5 года — это таки показатель. Возможно, пободаемся с вами за красоту и удобство сайта, не без этого, но вы останетесь довольны. Стучитесь к нам в Телеграм или оставляйте заявку на сайте.
А еще не забывайте подписываться на наш Телеграм-канал, где мы делимся интересными решениями и показываем нашу внутрянку.
