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

Главное о кейсе

1. Трафик на сайт вырос в 20 раз.

2. Сайт адаптирован под SEO и готов к продвижению. С момента запуска:
— он начал ранжироваться по релевантным поисковым фразам без проведения дополнительных работ. К примеру, вышел в ТОП-5 Яндекса по фразе «изготовление аквариумов в москве».
— посещаемость из поисковых систем выросла в 5 раз.
— показатель отказов снизился с 15% до 3,5%.
— с сайта начали поступать заявки от потенциальных клиентов.

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

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

1. Website traffic increased 20-fold.

2. The website is optimized for SEO and ready for promotion. Since its launch:
— it started ranking for relevant search phrases without additional efforts. For example, it reached the top 5 on Yandex for the query "making aquariums in Moscow."
— organic traffic from search engines increased fivefold.
— the bounce rate decreased from 15% to 3.5%.
— the website began receiving inquiries from potential clients.

3. Transformed the company into a cohesive brand: updated positioning, logo, fonts, and colors. Now the website conveys the company's values and showcases the real people behind the product.

4. Now the website includes numerous photos, descriptions, and clear calls to action. An important feature is the 3D schema that illustrates each stage of aquarium manufacturing.

Как проект изменил жизнь пользователей

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

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

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

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

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

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

Creating aquariums is often an unfamiliar process for users, and choosing a contractor in this field is also a challenging task. Moreover, the old brand's website lacked detailed information about the company's services, its unique selling points (USP), and, in general, how the process of creating aquariums would look. Additionally, there was a complex user journey and long blocks of text that visitors had to read to find answers to their questions.

On the new website, we expanded the structure and made site navigation simple and intuitive.

We completely reworked the text content: we extracted details about each service and USP from the client. The focus of the texts was on simplicity and accessibility, ensuring that users could understand all the information after the first read. We broke the text into blocks and made it a natural complement to images, animations, and videos.
To leave no questions about the process of creating an aquarium for the visitor, we introduced a unique element: 3D videos showing each step of the process. As the user scrolls down the screen, they see a 3D room displaying each stage of aquarium creation with a brief description of the phase.

We also added a cost calculator for aquarium maintenance to the 'Services' section. It takes into account numerous parameters, such as the type of aquarium, volume, length, height, the company's visit frequency, and more, allowing users to see the cost of maintenance without providing their phone number.

Furthermore, it was important for us to create a relaxing atmosphere on the website and make navigation not only understandable but also interesting and aesthetically pleasing to the user. To achieve this, we worked on visuals, animations, added soothing music, and ensured that all elements appeared and disappeared smoothly.

Бизнес-задача и ее решение

Задача

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

Решение

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

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

2. Адаптировали сайт под SEO-продвижение: учли все мелкие детали.
Например, при подготовке текстов опирались на семантическое ядро и подстраивали их под требования к SEO-продвижению — теперь на сайте не просто полотна текста, а полезный контент, распределенный по странице и оптимизированный для поисковых систем.
Также при разработке сайта заложили разделы, которые не нужны на начальных этапах, но понадобятся в будущем для SEO-продвижения — например, блог компании. А еще использовали микроразметку — это атрибуты и теги, благодаря которым поисковые системы выдают на запросы пользователей полезную и емкую информацию о сайте. Например, если теперь делиться сайтом «Твой Аквариум» в соцсетях и мессенджерах, в пост подгружается не случайное превью, а картинки, заголовок и описание, которое мы заложили в микроразметку.
При разработке использовали технологию Server-Side Rendering. Она повышает скорость загрузки — поисковым системам это нравится, поэтому такие сайты лучше индексируются и легче продвигаются в поисковой выдаче.

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

3. На новом сайте рассказали про клиента и подчеркнули его самобытность. Добавили фото команды, а TOV в текстах сделали дружелюбным и разговорным — чтобы показать, что в компании работают заряженные и открытые люди. Самая любимая наша деталь — цитата-знакомство от лица руководителей компании, которую мы расположили на втором экране сайта: «С 2011 года мы начали увлекаться аквариумами и даже не догадывались что это хобби перерастет в нечто большее. Что такое работа мы не знаем, мы просто занимаемся любимым делом и у нас это отлично получается». В цитату вшили милые микроанимации и фото руководителей компании.

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

5. Выделили бренд среди конкурентов: за счет детальности и смелых дизайнерских решений (вроде 3D-анимации) новый сайт выделяется среди конкурентов сферы — не только на рынке РФ, но и по миру.

6. Трафик на сайт вырос в 20 раз (сравниваем цифры за последние месяцы до запуска и спустя 7 месяцев после запуска сайта — январь-февраль 2023 и август 2023).

Task.

The company «TVAQ» designs, manufactures, and maintains aquariums of any complexity. The brand approached us for SEO promotion, but during the briefing, it became clear that the current website was not optimized for SEO, and a new corporate website needed to be developed. We had the following tasks:
— Refresh the company's brand for the website and work on a new positioning.
— Redesign the website while considering all SEO requirements. We paid attention to the details to make the site search engine-friendly and potentially rank in the top search results.
— Make it clear and visually showcase what «TVAQ» brand is all about, emphasizing the uniqueness of the brand and setting it apart from competitors.

Solution.
1. We conducted rebranding, updating the company's logo, fonts, and colors. The logo reflected the company's main slogan: «We bring any of your ideas to life,» with a lightbulb-shaped fish inside an aquarium. Interestingly, the new brand style was chosen not only through discussions with the client but also based on the results of a survey of the target audience. The client conducted a vote on social media for the new and old brand elements, and «all without exception» voted for our version :)

2. We adapted the website for SEO promotion by considering all the small details. For instance, when preparing texts, we used the semantic core and tailored them to meet SEO promotion requirements. The result is not just long blocks of text but useful content distributed across the page and optimized for search engines. We also included sections in the website that may not be needed in the initial stages but would be beneficial for future SEO promotion, such as a company blog. Additionally, we implemented microdata, attributes, and tags that allow search engines to provide useful and concise information about the website in response to user queries. For example, when sharing «TVAQ» brand on social media and messengers, the post includes specific images, a title, and a description that we added to the microdata. In the development phase, we used Server-Side Rendering technology, which improves loading speed. This is favored by search engines, making such sites easier to index and promote in search results.

As a result of our efforts, even before promoting the website:
— it ranked in the top 5 on Yandex for the query «making aquariums in Moscow," and in the top 10 for queries like «making aquariums,» «custom aquariums in Moscow,» «custom-made aquariums.»
— organic traffic increased fivefold.
— the bounce rate decreased from 15% to 3.5%.
— inquiries started coming in from the website.

3. On the new website, we introduced the client and emphasized their uniqueness. We added photos of the team and made the brand's tone of voice friendly and conversational to show that the company is made up of enthusiastic and approachable individuals. Our favorite detail is the introduction quote from the company's leaders, which we placed on the second screen of the website: «Since 2011, we've been passionate about aquariums, and we never imagined that this hobby would grow into something bigger. We don't know what work is; we're just doing what we love, and we're good at it.» The quote incorporates charming micro-animations and photos of the company's leaders.

4. We visually explained the intricacies of creating an aquarium, making the process understandable even to a child through texts, structure, visuals, and animated 3D videos.

5. We set the brand apart from competitors through detail and bold design choices, such as 3D animations. The new website stands out among industry competitors, not only in Russia but worldwide.

6. Website traffic has grown by 20 times (comparing figures for the last months before the website launch and 7 months after the launch – January-February 2023 and August 2023).

Крафт (мастерство), реализация, технические детали

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

2. 3D-рендеры аквариумов.
Вместе с нашим 3D-специалистом и с Midjourney создали для сайта 37 3D-визуалов аквариумов. При этом у каждого аквариума нужно было подготовить вид с 4 ракурсов и в 6 цветах — так что в итоге мы сделали 888 3D-визуализаций. Кстати, до сих пор ни у кого из конкурентов бренда нет настолько качественных и подробных визуалов аквариумов.

3. Калькулятор стоимости обслуживания аквариумов — это самый полный калькулятор стоимости обслуживания аквариумов на рынке клиента.

4. Ощущение будто пользователь находится под водой на сайте. Добились этого через детали:
— проработали прелоадер, расположили на главной залипательное видео с актинией, добавили на сайт много качественных фото с аквариумами, рыбами и кораллами;
— добавили расслабляющую музыку (ее можно включить и выключать через кнопку в меню);
— спрятали по всему сайту микроанимации на океаническую тему: например, в разные блоки добавили стаи мелких рыб, которые хаотично плавают по экрану и иногда сбиваются в более крупные косяки — в том числе при наведении курсора;
— добились того, чтобы все элементы появлялись и исчезали плавно и создавали ощущение движения под водой;
— проработали внешний вид блоков: как будет выглядеть нажатие на ссылку, как поменяется кнопка при наведении, что будет происходить при клике — все это создает эффект глубины и побуждает «залипнуть» на детали сайта.

5. У нас получилось совместить на одном сайте новые для сферы клиента механики — с требованиями по SEO. Дело в том, что сайты, разработанные под SEO-продвижение, предполагают определенную структуру — поэтому на такие страницы часто сложно внедрить смелые элементы или сильно уйти в креатив. Мы бросили себе вызов и в итоге добились поставленной цели: добавили на сайт креативные и свежие для сферы клиента детали и при этом повысили поисковый трафик.

1. 3D animation that showcases the process of creating aquariums. Our designer meticulously crafted every detail of the room, considering furniture placement, lighting, and color palette to make it vibrant and seamlessly integrated into the website.

2. 3D renders of aquariums. Together with our 3D specialist and Midjourney, we created 37 3D visualizations of aquariums for the website. Each aquarium needed to be prepared from four different perspectives and in six colors, resulting in a total of 888 3D visualizations. Interestingly, none of the brand's competitors currently offer visuals of aquariums that are as high-quality and detailed.

3. The aquarium maintenance cost calculator – the most comprehensive calculator of its kind in the client's market.

4. The sensation that the user is underwater on the website. We achieved this through various details:
— Worked on the preloader, featuring a captivating video with actinia on the homepage.
— Added numerous high-quality photos of aquariums, fish, and corals.
— Included relaxing music (which can be turned on and off via a menu button).
— Integrated subtle ocean-themed micro-animations throughout the site. For example, we added shoals of small fish to different sections, which swim chaotically across the screen and occasionally form larger groups, including when hovering over them.
— Ensured all elements smoothly appear and disappear, creating the sensation of underwater motion.
— Worked on the appearance of blocks, such as how a link looks when clicked, how a button changes when hovered over, and what happens when clicked. All of these elements create a sense of depth and encourage users to engage with the website's details.

5. Additionally, one of our achievements was successfully combining new mechanics for the client's industry with SEO requirements on a single website. Websites developed for SEO promotion often have a specific structure, making it challenging to introduce bold elements or be highly creative. We took on this challenge and ultimately met our goal: we added creative and industry-fresh details to the website while simultaneously increasing search traffic.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

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

Изначально заказчик не собирался тратить много времени на оформление карточек товаров — поэтому мы получили ТЗ взять фото товаров с сайтов партнеров «Твой Аквариум» и перенести на обновленный сайт.

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

Мы выгрузили все товары (37 штук) и распределили их по группам — чтобы сначала проработать все однодверные аквариумы, потом трехдверные, потом нестандартные и тд.

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

Далее начали моделировать. Сначала наш 3D-специалист отрисовывал один товар, потом адаптировал его под 4 ракурса и 6 цветов. В итоге мы создали 888 3D-визуализаций, которые стильно выглядят и отражают реальные цвета и текстуры товаров.

The creation process of the 3D renders for each aquarium was particularly fascinating.

Initially, the client had no intention of spending much time on the product card design, so we received instructions to take product photos from the partner websites of «TVAQ» brand and transfer them to the updated website.

However, the photos from the partner websites appeared outdated—varying in sizes, with overexposure, low quality, and outdated colors. They wouldn't fit the new website and would have negatively affected the user's impression. Therefore, we convinced the client to entrust us with creating new images.

We uploaded all the products (37 in total) and organized them into groups, initially working on all single-door aquariums, then three-door ones, and so on.

Next, we adjusted the angles of these products, selected textures, and, with the help of Midjourney, generated various backgrounds for the aquariums (as the client did not have high-quality background photos).

Then, we began the modeling process. Initially, our 3D specialist illustrated a single product, adapted it to four angles and six colors. In the end, we created 888 3D visualizations that have a stylish appearance and accurately reflect the real colors and textures of the products.

Скриншоты

Комментарий заказчика

Хотим выразить благодарность коллективу Студии Oxem. Подход к своему делу в Oxem нас приятно удивил. По сравнению с другими организациями разница огромная: ребята расписывают план работ на долгий срок, при этом не отходят от намеченных целей. Ежемесячные отчеты — важный момент которому студия также уделяет время.
Во время реорганизации нашего старого сайта было предложено много свежих идей, о которых мы даже и не думали. Согласовывали и внедряли такие мелочи (а они очень важны!), которые выделяют нас от коллег в нашей сфере.
Каждый этап был предварительно визуализирован и проработан прежде, чем переходили к следующему.
Когда мы увидели наш будущий сайт в формате видео: где на фоне человек рассказывал "как это будет", нас это приятно удивило.
Ребята предложили прекрасное 3D-решение в виде визуализации каждого этапа нашей работы с новым клиентом.
Приятно, что есть студии, чей подход к работе не оставляет сомнений, что будет всё на хорошем уровне.