Сайт, который не должен был родиться, а в итоге собрал главные награды в WDA, Золотом Сайте, Рейтинге Рунета и в CSSDA
Всем привет! Мы студия Oxem — создаем цифровые продукты для бизнеса.
В этом году мы запустили сайт для бренда Твой Аквариум. Благодаря обновлению заказчик, наконец, начал получать заявки с сайта, а проект собрал первые места в Workspace Digital Awards, Золотом Сайте, Рейтинге Рунета и взял «Сайт дня» на CSS Design Awards. Решили, что грех не поделиться им и на vc.ru. Поехали!
Твой Аквариум пришел к нам за SEO — а мы обновили брендинг, дизайн, разработали и запустили сайт и только тогда стартовали SEO
Компания «Твой Аквариум» проектирует, производит и обслуживает аквариумы любой сложности.
Бренд пришел к нам за запуском поисковой рекламы. Но в процессе брифинга стало понятно, что продвигать текущий сайт — пустая трата денег заказчика, так как сайт был совершенно не адаптирован под SEO-продвижение.
Кроме этого сайт вообще не приносил клиенту лиды, имел устаревший визуал, полотна текстов и не раскрывал ценность бренда перед конкурентами.
Мы обсудили ситуацию с командой заказчика и пришли к решению — запустить новый сайт.
Но тут была еще одна проблема: так как изначально разработка нового сайта не входила в планы клиента, то и бюджет на него был сильно ограничен. В моменте его бы точно не хватило на создание качественного продукта.
Тут решить проблему помог MVP-подход: было решено сначала запустить главную, в следующие 2 месяца блоки: «О компании», «Блог» и «Услуги» и еще в течение нескольких месяцев «Каталог товаров». Благодаря этому сайт не пострадает в качестве и при этом клиенту не придется ждать запуска всего сайта, чтобы получать трафик и конверсии — профит будет идти уже с момента запуска главной.
Задача
Вместе с клиентом поставили перед собой задачи:
- сделать сайт, который в перспективе сможет выйти в топ поисковой выдачи;
- провести ребрендинг;
- на сайте понятно рассказать, чем занимается «Твой Аквариум», подчеркнуть самобытность бренда;
- сделать сайт инструментом для прокачки узнаваемости бренда (создать вау-эффект, выделиться среди конкурентов).
Что сделали
Сейчас сайт выглядит так. А ниже 6 пунктов про главные результаты нашей работы.
1. Адаптировали сайт под SEO. Так, что уже в первые месяцы после запуска:
- посещаемость сайта из поисковых систем выросла в 5 раз;
- сайт вышел в ТОП-5 Яндекса по фразе «изготовление аквариумов в москве» и в ТОП-10 по фразам: «изготовление аквариумов», «аквариумы на заказ в москве», «изготовление аквариумов на заказ»;
- показатель отказов снизился с 15% до 3,5%;
- с сайта начали поступать заявки.
2. Пересобрали позиционирование: обновили логотип, шрифты и цвета компании. Наша айдентика, кстати, была выбрана не только клиентом — но и его аудиторией (но про это позже).
3. Показали на сайте команду Твой Аквариум и их подход.
4. Рассказали об услугах. С помощью текстов, визуалов, структуры и анимированного 3D-видео показали детали создания аквариума — так, что даже ребенок может понять, как будет строиться процесс.
5. Добавили на сайт вау-фишки, которые не только мотивируют пользователя изучать сайт и тапать на кнопки, но и выделяют Твой Аквариум среди конкурентов.
6. Благодаря нашим работам трафик на сайт из поисковиков увеличился в 20 раз (сравниваем месяц до запуска нового сайта и спустя полгода после запуска). Так как сфера клиента узкая и объем целевой аудитории небольшой, то финальная цифра не четырехзначная. Но это в любом случае хороший результат для рынка заказчика.
Лучшие детали и решения на сайте
На пальцах объясняем пользователям, как будут создаваться аквариумы
Создание аквариума — чаще всего непонятный пользователю процесс. При этом на старом сайте, чтобы разобраться, из чего состоит работа компании Твой Аквариум, посетителю приходилось пробираться сквозь полотна текстов. И самостоятельно дорисовывать в голове процесс (на сайте было мало визуальных сопровождений).
Конечно, мы сделали базу:
- проработали структуру сайта, чтобы упростить путь пользователя;
- переписали тексты на человеческий язык и разбили их на смысловые блоки;
- подробно рассказали про последовательность создания аквариумов;
- добавили больше фото аквариумов.
Но главная деталь, о которой хотим рассказать, — наша 3D-комната.
Это 3D-визуализация, на которой мы наглядно показали каждый шаг работы команды Твой Аквариум и кратко текстом продублировали главные поинты.
Чтобы 3D-комната была живой и гармонично вписывалась в сайт, наш 3D-дизайнер Даня продумывал каждую деталь пространства: мебель, цветовую гамму, освещение.
Пересобрали айдентику
Освежили логотип, шрифты и цвета компании. В логотипе обыграли слоган бренда Твой Аквариум: «Реализуем любую вашу идею».
За брендом Твой Аквариум стоят люди, которые горят своим делом
Твой Аквариум — это крутые заряженные ребята, которые делают то, что любят. Попробовали передать этот подход на сайте: Tone of Voice в текстах сделали разговорным и дружелюбным, добавили больше фото и цитату основателей компании на первую страницу.
Добавили залипашки, чтобы пользователь не хотел уходить с сайта
Важно было сделать сайт не только понятным и комфортным, но и добавить ему эффектности — чтобы пользователь хотел остаться подольше, полистать поглубже и проникнуться вайбом бренда.
Обыграли это через подводную тематику и ощущение пребывая на глубине.
1. Добавили для пользователей возможность включить атмосферную музыку при изучении сайта;
2. Снабдили сайт микроанимациями на океаническую тему;
3. Проработали плавность переключения между страницами, блоками и элементами.
По результатам аналитики мы сформулировали общую идею, которую будем транслировать в дизайне: аквариум — это объект, который притягивает взгляд в любом помещении. Он создает вау-эффект и расслабляет.
Нам важно было, чтобы и сайт вызывал похожие эмоции у посетителей.
Создали 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, который грузит изображение только когда они нужны пользователю. Также на сайте автоматически сжимаются все картинки.
Во время реорганизации нашего старого сайта было предложено много свежих идей, о которых мы даже и не думали. Согласовывали и внедряли такие мелочи (а они очень важны!), которые выделяют нас от коллег в нашей сфере.
Приятно, что есть студии, чей подход к работе не оставляет сомнений, что будет всё на хорошем уровне
PS: сайт Твой Аквариум начал проектироваться еще в середине 2022 года — за это время мы прокачали свое дизайн-направление и сейчас многие решения сделали бы иначе. При этом проект до сих пор собирает награды в конкурсах и похвалы клиентов — поэтому мы не могли не поделиться им и тут.
А если вы хотите больше наших свежих кейсов, заглядывайте к в тг-канал Оксэм запускает: https://t.me/oxemm
Сайт Твой Аквариум: https://tvaq.ru/
Наш сайт: https://oxem.ru/