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

При обращении компании LABS в нашу студию, у неё был старый сайт на WordPress. Несмотря на то, что его дизайн объективно устарел, а функционал не отвечал потребностям клиентов, это был мощный добротный сайт на двух языках, с сотнями полезных SEO-статей. Перед нами стояла задача переупаковать сайт, при этом сохранить все наработанные годами статьи и, соответственно, позиции сайта в поисковой выдаче, как на русском, так и на английском языке.

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

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

Исследование проводилось по методу сравнительного анализа. Каждого конкурента мы оценивали по определённому набору характеристик.

Для анализа выбрано 8 компаний, оказывающих консалтинговые услуги в сфере бизнеса и частных активов. Сложность состояла в регионе оказания услуг. Заказчик осуществляет деятельность в юрисдикциях более 20 стран. Часть конкурентов была предоставлена заказчиком, часть — выбрана нами из числа зарубежных компаний.

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

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

Анализ преимуществ и недостатков конкурентов позволил выявить отраслевые стандарты ниши. Например, мы установили что у 90% конкурентов на сайте есть информация о специалистах, работающих в компании. Эта информация представлена подробно: фотография, опыт, специализация, преимущества, личные данные и контакты сотрудника. Это отраслевой стандарт, повышающий доверие к компании и показывающий степень её открытости.

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

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

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

Функциональный прототип — основа будущего сайта. Он определяет структуру, функционал, содержание и количество контента на сайте (визуального и текстового).
Это документ, в котором прописано, из чего состоит каждый блок, какие блоки составляют каждую страницу, какие страницы включены в структуру сайта.

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

Мы подготовили референсы, ориентируясь на сетку, цветовую гамму, настроение.

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

«Использовать стилистику, поддерживающую профессионализм, но, в то же время, создающую атмосферу лёгкости, доверия, расслабленности, умиротворения и позитива. Цвет фона светлый, либо светлый с минимальным добавлением тёмных блоков (чёрных или тёмных тонов акцентного цвета). Передать настроение и атмосферу Кипра».

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

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

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

В основу прототипов легла простая минималистичная сетка — модульная, в 2 колонки. Она позволила нам грамотно расположить контент на сайте и не отвлекать пользователя от изучения.

Для услуг компании выбрали максимально понятный формат: списки в одну колонку с подробным описанием каждого направления. Добавили карту с отметками стран, для которых мы предоставляем услуги.

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

В разделе «О компании» мы выделили целый блок под рассказ о каждом из сотрудников, демонстрируя открытость команды LABS. А также добавили цели и ценности компании.

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

Мы ушли от чисто белого фона к более тёплому песочному оттенку, и подчеркнули его синим цветом в оформлении типографики.

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

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

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

Этап вёрстки этого проекта включал несколько шагов. Первым шагом была резиновая вёрстка на стеке Pug, SCSS, JS и сборщике Webpack. Такой подход позволил сделать код чистым, структурированным и легко поддерживаемым. После завершения вёрстки мы подготовили вёрстку на WordPress для дальнейшего управления контентом.

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

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

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

Подобной логикой заполняются и Услуги на сайте. Каждая вкладка — это отдельная категория, которая содержит в себе соответствующие услуги.

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

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

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

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