Сайт для компании «Твой Аквариум»: аналитика, SEO, ребрендинг, дизайн, 3D-моделирование, разработка

«Твой Аквариум» — компания, которая занимается проектированием, производством и обслуживанием аквариумов любой сложности. Основные заказчики: физические лица, бизнес-центры, медицинские учреждения.

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

Перед нами стояли задачи:

— Провести аналитику сферы клиента, его конкурентов и выделить сильные стороны компании;

— Обновить бренд компании для сайта, проработать новое позиционирование;

— На сайте доступно показать, чем занимается «Твой Аквариум», подчеркнуть самобытность бренда и выделить его среди конкурентов;

— Переделать сайт с учетом всех требований под SEO. Продумать детали, чтобы сайт ценился поисковиками и в перспективе смог выйти в топ поисковой выдачи.

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

Чтобы добиться нужного результата, мы:

— Проделали большую аналитическую работу: провели интервью с клиентом, погрузились в специфику бизнеса, изучили рынок и конкурентов;

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

— Провели ребрендинг: обновили логотип, шрифты и цвета компании;

— Подготовили тексты, создали и внедрили дизайн и анимации, которые передают УТП клиента, запоминаются аудитории и выделяют бренд среди конкурентов;

— Разработали анимированное 3D-видео, чтобы наглядно показать каждый этап создания аквариумов. Внедрили его на сайт;

— Начали регулярные работы по SEO-продвижению.

Мы провели ряд интервью с клиентом, собрали данные о компании, аудитории, конкурентах, достоинствах и недостатках текущего сайта, особенностях продукта.

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

Оказалось, что компании в этой сфере мало внимания уделяют UX/UI-решениям на сайтах: страницы были неинформативные, плохо оптимизированные и выглядели устаревшими.

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

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

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

Опираясь на семантическое ядро, мы спроектировали новую структуру сайта.

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

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

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

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

— Получали ответы на свои вопросы по мере пролистывания страницы;

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

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

Аквариум — это объект, который притягивает взгляд в любом помещении: он создает wow-эффект и расслабляет.

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

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

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

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

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

При создании дизайна мы исходили из трех целей:

1) Погрузить аудиторию в расслабляющую атмосферу подводного мира, создать wow-впечатление, запомниться;

2) Наглядно показать пользователю процесс создания аквариумов компанией;

3) Рассказать о подходе команды «Твой Аквариум»: подчеркнуть самобытность и любовь к своему делу.

Было разработано более 100 макетов страниц и состояний, проработаны ПК, планшетный и мобильные версии.

Создать wow-эффект для пользователей мы решили с помощью анимаций, микровзаимодействий и звукового сопровождения.

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

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

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

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

Или в фрагменте «о компании» вшили микроанимации в текст: если навести курсор на фото основателей, появляются их имена, а если на сердце или огонек — символы начнут пульсировать.

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

Также оформили страницу 404 для неактуальных и неправильных ссылок. Сделали ее в стилистике сайта и добавили анимации.

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

Чтобы доступно рассказать про этапы создания аквариума компанией, мы создали непростой элемент: 3D-видео с каждым шагом работы.

Наш 3D-дизайнер скрупулезно создавал каждую деталь комнаты: продумывал расположение мебели, освещение, цветовую гамму — чтобы она была живой и гармонично вписывалась в сайт.

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

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

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

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

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

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

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

Также мы использовали технологию Server-Side Rendering. Она позволяет запускать код на сервере, а не нагружать устройство и браузер пользователя, благодаря чему повышается скорость загрузки. Поисковым системам это нравится, поэтому такие сайты лучше индексируются и легче продвигаются в поисковой выдаче.

Так как сайт нужно было запустить быстро, для управления контентом была выбрана система WordPress. Это позволило реализовать проект без привлечения бэкэнд-разработчиков и сэкономить время работы.

Дополнительный приятный момент заключается в том, что WordPress позволит клиенту в дальнейшем менять контент сайта самостоятельно: без привлечения разработчиков.

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

1. Проведена глубокая аналитика сферы клиента. По ее итогам обновлён бренд компании.

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

2. Новый сайт передаёт ценности компании, показывает живых людей, которые стоят за продуктом и формирует позитивное впечатление.

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

3. Сайт наглядно показывает, какие продукты и услуги предлагает «Твой Аквариум».

На нём много фотографий, описаний и чётких призывов к действию. Важная деталь: 3D-схема, которая наглядно и живо показывает каждый этап изготовления аквариума, помогает выделиться среди конкурентов и запомниться посетителям.

4. Сайт адаптирован под SEO и готов к продвижению.

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

С самого начала существования сайта:

— Он начал ранжироваться по релевантным поисковым фразам без проведения дополнительных работ. К примеру, вышел в ТОП-5 Яндекса по такой фразе, как «изготовление аквариумов в москве», в ТОП-10 по фразам «изготовление аквариумов», «аквариумы на заказ в москве», «изготовление аквариумов на заказ» и так далее. При этом старый сайт совсем не ранжировался по подобным запросам, несмотря на то, что длительное время его продвижением занималась другая компания.

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

— Показатель отказов для поискового трафика снизился с 14,3% до 3,4%.

— С сайта начали поступать заявки от потенциальных клиентов.

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

5. Сайт не просто стал более конверсионным, а создает wow-эффект и выделяет бренд среди конкурентов.

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

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