Сайт, который не должен был родиться, а в итоге собрал главные награды в WDA, Золотом Сайте, Рейтинге Рунета и в CSSDA

Всем привет! Мы студия Oxem — создаем цифровые продукты для бизнеса.

В этом году мы запустили сайт для бренда Твой Аквариум. Благодаря обновлению заказчик, наконец, начал получать заявки с сайта, а проект собрал первые места в Workspace Digital Awards, Золотом Сайте, Рейтинге Рунета и взял «Сайт дня» на CSS Design Awards. Решили, что грех не поделиться им и на vc.ru. Поехали!

Сайт, который не должен был родиться, а в итоге собрал главные награды в WDA, Золотом Сайте, Рейтинге Рунета и в CSSDA

Компания «Твой Аквариум» проектирует, производит и обслуживает аквариумы любой сложности.

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

Мы обсудили ситуацию с командой заказчика и пришли к решению — запустить новый сайт.

Но тут была еще одна проблема: так как изначально разработка нового сайта не входила в планы клиента, то и бюджет на него был сильно ограничен. В моменте его бы точно не хватило на создание качественного продукта.
Тут решить проблему помог MVP-подход: было решено сначала запустить главную, в следующие 2 месяца блоки: «О компании», «Блог» и «Услуги» и еще в течение нескольких месяцев «Каталог товаров». Благодаря этому сайт не пострадает в качестве и при этом клиенту не придется ждать запуска всего сайта, чтобы получать трафик и конверсии — профит будет идти уже с момента запуска главной.

Вместе с клиентом поставили перед собой задачи:

сделать сайт, который в перспективе сможет выйти в топ поисковой выдачи;
провести ребрендинг;
на сайте понятно рассказать, чем занимается «Твой Аквариум», подчеркнуть самобытность бренда;
сделать сайт инструментом для прокачки узнаваемости бренда (создать вау-эффект, выделиться среди конкурентов).

Сейчас сайт выглядит так. А ниже 6 пунктов про главные результаты нашей работы.

1. Адаптировали сайт под SEO. Так, что уже в первые месяцы после запуска:

посещаемость сайта из поисковых систем выросла в 5 раз;
сайт вышел в ТОП-5 Яндекса по фразе «изготовление аквариумов в москве» и в ТОП-10 по фразам: «изготовление аквариумов», «аквариумы на заказ в москве», «изготовление аквариумов на заказ»;
показатель отказов снизился с 15% до 3,5%;
с сайта начали поступать заявки.

2. Пересобрали позиционирование: обновили логотип, шрифты и цвета компании. Наша айдентика, кстати, была выбрана не только клиентом — но и его аудиторией (но про это позже).

3. Показали на сайте команду Твой Аквариум и их подход.

4. Рассказали об услугах. С помощью текстов, визуалов, структуры и анимированного 3D-видео показали детали создания аквариума — так, что даже ребенок может понять, как будет строиться процесс.

5. Добавили на сайт вау-фишки, которые не только мотивируют пользователя изучать сайт и тапать на кнопки, но и выделяют Твой Аквариум среди конкурентов.

6. Благодаря нашим работам трафик на сайт из поисковиков увеличился в 20 раз (сравниваем месяц до запуска нового сайта и спустя полгода после запуска). Так как сфера клиента узкая и объем целевой аудитории небольшой, то финальная цифра не четырехзначная. Но это в любом случае хороший результат для рынка заказчика.

На пальцах объясняем пользователям, как будут создаваться аквариумы

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

Конечно, мы сделали базу:

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

Но главная деталь, о которой хотим рассказать, — наша 3D-комната.
Это 3D-визуализация, на которой мы наглядно показали каждый шаг работы команды Твой Аквариум и кратко текстом продублировали главные поинты.

Чтобы 3D-комната была живой и гармонично вписывалась в сайт, наш 3D-дизайнер Даня продумывал каждую деталь пространства: мебель, цветовую гамму, освещение.
Сергей Рыбин, сооснователь и CEO Oxem

Пересобрали айдентику

Освежили логотип, шрифты и цвета компании. В логотипе обыграли слоган бренда Твой Аквариум: «Реализуем любую вашу идею».

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

За брендом Твой Аквариум стоят люди, которые горят своим делом

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

Добавили залипашки, чтобы пользователь не хотел уходить с сайта

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

Обыграли это через подводную тематику и ощущение пребывая на глубине.

1. Добавили для пользователей возможность включить атмосферную музыку при изучении сайта;

2. Снабдили сайт микроанимациями на океаническую тему;

3. Проработали плавность переключения между страницами, блоками и элементами.

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

Создали 888 3D-рендеров аквариумов для каталога сайта

При наполнении каталога товаров столкнулись с проблемой: аквариумов много, а фото их в хорошем качестве нет.

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

1. Выгрузили все товары (их было 37 штук) и сгруппировали их по схожести: чтобы 3D-дизайнер пачками брал в работу визуалы похожих аквариумов (и через это сэкономил время 3D-дизайнеру и деньги клиенту).

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

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

4. Наш 3D-специалист отрисовывал каждый аквариум и адаптировал его под 6 цветов и 4 ракурса.

В результате мы сгенерировали 888 3D-визуализаций, которые отражают цвета и текстуры товаров и классно смотрятся на сайте.

Порадовали пользователей новым калькулятором стоимости товаров

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

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

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

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

Запарились над оптимизацией видео на главной: видео загружается не сразу целиком, а сегментами по мере проигрывания предыдущих участков. Благодаря этому мы не блокируем загрузку других элементов и не тормозим сайт.
Оптимизировали в целом работу страниц: на сайте загружаются только те элементы, на которые смотрит и тапает пользователь. Например, когда посетитель скроллит вниз, то уползающие вверх видео и анимации перестают воспроизводится.
Использовали технологию Server-Side Rendering, благодаря которой страница рендерится не на устройстве пользователя, а на сервере. И через это снижается нагрузка на браузер посетителя.
Ну и, конечно, провели базовую оптимизацию для повышения скорости. Сжали видео без потери качества и использовали Lazy Load, который грузит изображение только когда они нужны пользователю. Также на сайте автоматически сжимаются все картинки.

Во время реорганизации нашего старого сайта было предложено много свежих идей, о которых мы даже и не думали. Согласовывали и внедряли такие мелочи (а они очень важны!), которые выделяют нас от коллег в нашей сфере.
Приятно, что есть студии, чей подход к работе не оставляет сомнений, что будет всё на хорошем уровне
Артем Сорокин, cооснователь Твой Аквариум

PS: сайт Твой Аквариум начал проектироваться еще в середине 2022 года — за это время мы прокачали свое дизайн-направление и сейчас многие решения сделали бы иначе. При этом проект до сих пор собирает награды в конкурсах и похвалы клиентов — поэтому мы не могли не поделиться им и тут.

А если вы хотите больше наших свежих кейсов, заглядывайте к в тг-канал Оксэм запускает: https://t.me/oxemm

Сайт Твой Аквариум: https://tvaq.ru/
Наш сайт: https://oxem.ru/