о проекте:
Рассказываю о проекте в двух словах:
1) У меня заключено партнерство с рекламной компанией, которая занимается SEO-продвижением сайтов (поисковая оптимизация). Их заказчику нужно было сделать редизайн сайта. У Линкера уже был старенький, сто лет назад сделанный интернет-магазин на Битриксе на огромное количество страниц. Задача была минимальными усилиями максимально преобразить сайт. Сайт продвигался в основном по SEO, у компании лидирующие позиции в органической выдаче, в поисковиках. Кроме SEO, есть еще дополнительная реклама в Яндекс.Директе и других площадках, но основной упор идет на SEO, и в их нише это абсолютно логичное решение.
Я проанализировала старую версию сайта, она была слабая не только по дизайну, но и по смыслу, поэтому я предложила компании редизайн в Фигме и доработку смысловой структуры шести ключевых страниц. Расписала в коммерческом предложении, как это можно сделать, и написала условия, по которым можно сотрудничать, со сроками и стоимостью. Я предложила 2 варианта работы: расширенный (редизайн 6 страниц) и более упрощенный (редизайн только главной страницы). Заказчики моментально согласились на редизайн всех 6 страниц, мы составили договор и удаленно его подписали. После чего они перевели предоплату, и мы с командой приступили к работе.
2) Мы выделили основные шесть страниц, для которых потребуется редизайн и смысловая переработка. А дальше уже по их примеру программист доверстает остальные страницы. Первая — это главная, где мы переделываем смысловую структуру и дизайн с фокусом на опт. Следующая страница - карточка товара, она будет использоваться как шаблон для всех остальных товаров. То есть мы делаем одну карточку, а дальше программист меняет в ней информацию под каждый товар.
Третья страница — страница о компании. В старой версии сайта она была сырая, сухая, там не было толком информации, только общие фразы, такие как “у нас дружная команда”, “мы давно на рынке”, “заказывайте у нас плитку”. Мы переработали эту страницу совершенно иначе, добавили больше конкретики и фактов.
Четвертая страница - страница с акциями. Пятая страница - каталог, где выставлены все товары. И шестая страница - это страница партнерской программы, где указано, с кем компания сотрудничает. Очень важная страница для целевой аудитории, которой важно показать все преимущества сотрудничества. У компании налажено производство на большие объемы, поэтому им интересно сотрудничать с теми, кто покупает плитку и керамогранит оптом: застройщики и подрядные организации, интернет-магазины и торговые организации, дизайнеры и архитекторы, строительные и комплектующие организации.
Было пожелание от программиста: “Идеально будет, если получится обновить CSS стиль, минимально затрагивая HTML разметку”. Мы старались максимально прислушаться, но, тем не менее, очень важно было сделать упор на дизайн, потому что сайт выглядел уже достаточно устаревшим, его хотелось реанимировать и осовременить.
5) Редизайн мы начали с переработки меню, добавили туда кликабельные ссылки на WhatsApp, Telegram, телефон, кнопку «Оставить заявку». Выделили поисковую строку, потому что в старой версии сайта ее в меню вообще не было видно, а это одна из самых кликабельных частей сайта по аналитике. Также с первого плана меню вынесли общие разделы: Каталог плитки и керамогранита, Бренды, Оптовым клиентам. А выше оставили более второстепенные разделы: О компании, Акции, Новости, Резка плитки, Доставка, Советы экспертов, Помощь, Наши объекты и Контакты. Меню бургер не стали делать, чтобы это все не прятать, и чтобы все сразу было удобно, в легком доступе нажимать.
6) Затем дизайнер доработал сайт по цветам сайт. Он оставил акцентным цветом оранжевый, который был в старой версии сайта, чтобы осталась узнаваемость. Так как компания достаточно давно на рынке, она себя зарекомендовала, многие ее узнают по логотипу и фирменным цветам, поэтому нашей задачей было улучшить сайт, сохранив узнаваемость. Дизайнер оставил акцент на оранжевый цвет, добавил темно-синий цвет, они хорошо контрастируют между собой. Также добавил белый и светло-голубой, и цвета очень гармонично связались между собой.
7) На главной странице первым же блоком выделили, что это оптовые поставки керамической плитки и керамогранита с доставкой по РФ. То есть сделали уклон на опт, так как это было важно для заказчика. Добавили также квиз, которого раньше не было, так как он повышает конверсию, с заголовком «Ответьте на пять простых вопросов и получите расчет стоимости заказа”. Так пользователь сразу может рассчитать стоимость или получить оптовые цены, оставив заявку. Далее мы написали для кого подходит продукция, то есть целевую аудиторию - интернет-магазины, строительные компании, застройщики и дизайнеры. Потом выделили преимущества компании.
Следующим блоком предложили выбор между брендами, чтобы человек сразу мог перейти в каталог и увидеть ассортимент определенного бренда. Часто покупатели формируют доверие к какому-то конкретному бренду и хотят именно его плитку выбрать, поэтому мы так высоко разместили этот блок. После этого идут популярные категории, как раз для тех, кому не так важны бренды, а интересует определенная категория, например, настенная плитка. Если человек не определился, мы добавили туда вставочку, чтобы он мог оставить заявку и прийти на консультацию, чтобы вместе с консультантом подобрать подходящую плитку или керамогранит.
Затем разместили блок "Сотрудничаем с...", то есть о целевой аудитории, где идут переходы на страницы с партнерскими программами. Здесь мы сделали очень классную дизайн-метафору с золотым сечением. При вдохновении на дизайн мы делали определенный ассоциативный ряд, что плитка - это геометрия, четкость линий. Мы постарались сделать так, чтобы это прослеживалось в дизайне, потому что дизайн - это не просто картинка, дизайн - это тот же маркетинг, он формирует взгляд на компанию и продукцию. Дизайн может либо натолкнуть пользователя на покупку, либо оттолкнуть вовсе. Поэтому очень важно, чтобы дизайн не был оторван от основной идеи и продукции. Мы раскидали по золотому сечению нашу целевую аудиторию. Это метафорично зашифрованное послание, что эта ЦА - наш идеал. И это показывает то, насколько детально и вдумчиво прорабатывается продукция, и насколько важно сотрудничество.
Следующим блоком добавили вставку о компании, написали там основные моменты о ней. Далее добавили call to action “Отправим предложение по сотрудничеству и оптовые цены в WhatsApp”, так как не все любят оставлять заявки, а так они могут напрямую написать на WhatsApp. Потом расписали этапы сотрудничества, как оно строится, чтобы показать, что нужно несколько простых шагов, и плитка вашей мечты окажется у вас. Далее разместили логотипы клиентов, с которыми сотрудничает компания.
У компании есть доставка по России, собственные склады, бренды компании представлены более чем в 70 городах России. Поэтому следующим блоком на сайте мы разместили карту, где можно сориентироваться и выбрать город и пункт розничных продаж. Также добавили сюда кнопку «Получить консультацию». Потом идет блок “Наши объекты”, где показаны примеры работ. На старом сайте они были спрятаны, хотя многие хотят посмотреть, как плитка или керамогранит смотрятся на реальных объектах. Далее показали акции, сертификаты, благодарственные письма, последние новости и подвал сайта. На главной странице должны закрываться основные вопросы оптовых заказчиков, с чем мы успешно справились.
Дальше мы сделали адаптацию этой страницы под все разрешения: 1440, 1200, 768 и 320 пикселей. Это нужно для того, чтобы сайт прекрасно выглядел на всех устройствах: на компьютере, ноутбуке, планшете и телефоне.
8) Затем сделали дизайн страницы с акциями. В старой версии они были криво-косо разбросаны по странице, было очень много пустого, ненужного пространства, которое приходилось листать, много переходов между акциями, которые не влезали на страницу. Мы сделали все кучно, лаконично, экономя пространство сайта, но при этом оставляя воздух для удобства восприятия. Эту страницу также адаптировали под все устройства.
9) Затем задизайнили страницу с каталогом. Здесь мы сделали подменю открытым, то есть все переходные ссылки с разделами каталога видны пользователю сразу, чтобы человеку не пришлось дополнительно нажимать на вторые слои меню, и он мог сразу переходить в нужный ему раздел.
10) Самая важная страница интернет-магазина - это карточка товара. Поэтому над ней мы основательно проработали. Находили много референсов, смотрели, как она сделана у других, и нашли идеальную квинтэссенцию карточки товара, чтобы она была удобной и визуально привлекательной.
Сделали сверху “хлебные крошки” - навигационная цепочка (путь от главной страницы до той, на которой сейчас находится пользователь), чтобы можно было удобно вернуться во вкладки каталога. Далее добавили дополнительное меню, где можно удобно посмотреть “Характеристики”, “Вся плитка коллекции”, “Сопутствующие товары”, “Акции месяца”. Затем мы разместили изображение плитки, возможность добавить в избранное, сравнить и поделиться. Добавили основную информацию о товаре: код товара, стоимость, количество в наличии, минимальный заказ, бренд этой плитки. Выделили отдельной плашкой разделения между коробкой и паллетом, показав стоимость и м2, чтобы клиенты удобно могли считать. Также рядом можно нажать на кнопку “Запросить оптовые цены”.
Ниже под кнопками расписали цены на доставку по России, по СПБ и ЛО, самовывоз. Товар можно либо добавить в корзину, либо купить в один клик. Также добавили кнопку “Нашли дешевле?”, чтобы убедить целевую аудиторию в том, что у компании лучшие цены на рынке. В случае, если с какой-то позицией это окажется не так, компания сделает скидку, и тем самым не потеряет клиента. Дальше идут все основные характеристики товара. Ниже продублировали, с кем сотрудничает Линкер, по кнопке можно запросить загрузочный файл.
Весь сайт нацелен на опт, поэтому мы везде разместили оптовые зацепочки, чтобы максимально зацепить целевую аудиторию. На старом сайте уклона на оптовое сотрудничества не было. Написали оффером “Получите оптовые цены на высококачественные керамограниты и плитку, с которыми вы заработаете в 2-5 раза больше”. Рядом кнопка “Запросить”, которая ведет на форму, а также рядом с этой кнопкой ссылки на WhatsApp, Telegram и телефон.
Дальше идут “Товары из этой коллекции” и “Товары бренда”, здесь мы переработали их внешний вид. Затем идут подразделения “Похожие товары”, “С этим товаром покупают”. Далее блок с характеристиками, описанием, информацией по доставке и комментариями. Ниже идут текущие акции. При нажатии на акцию появляется поп-ап (всплывающее окно), где написаны подробности акции. Потом фото с объектов и выделено отдельным блоком собственное производство, где мы разместили плитку производства компании Линкер.
Затем мы адаптировали страницу с карточкой товара также под все устройства, чтобы она удобно воспринималось на всех экранах.
11) У нас получилось в итоге не 6, а 8 страниц. Следующей мы сделали страницу со списком товаров. Здесь мы переработали карточки товаров в списке и сделали более удобные фильтры.
12) Потом приступили к странице о компании. Она была вообще полностью переделана, потому что до этого на ней была пара предложений, без каких-либо картинок и дизайна. На страницу о компании заходит не каждый человек. Но на тех, кто все-таки заходит, нужно произвести правильное впечатление.
Мы выделили заголовком, что страница посвящена оптовому поставщику плитки и керамогранита “Линкер”. Добавили, что с 2002 года компания поставила больше 10 000 заказов по всей России, прописали ключевую информацию, добавили видео о компании, которого раньше не было. Перечислили партнеров - это крупнейшие заводы, которые уже много лет стабильно выпускают высококачественную продукцию. Перечисление заводов также дополнительно двигает сайт по SEO за счет всех этих названий. Потом написали, почему выбирают нас, сделали также call to action на консультацию и разместили команду. Фотографии команды прогоняли через нейросеть, чтобы улучшить качество всех фото.
Затем мы сделали хронологию компании, потому что она имеет историю, которая должна впечатлить. Рассказали, что компания основана в 2002 году и указали ключевые моменты в истории развития Линкера вплоть до 2024. Далее на странице идут “Наши клиенты”, “Сертификаты и благодарственные письма”, и подвал сайта.
13) Затем мы сделали общую страницу партнерской программой, расписали выгоды партнерской программы и через что это проявляется. Также дополнительно компания дает до -30% постоянным покупателям. Добавили форму обратной связи и все адаптировали под разные устройства.
14) Далее мы перешли к отдельной странице для каждого вида партнеров. Первым же блоком написали, для кого эта партнерская программа, добавили кнопку “Получить консультацию”, которая дает возможность получить консультацию от руководителя. Рядом мы добавили фотографию руководителя, имя, фамилию. Далее указали, что партнеры получают от участия в программе. Линкер дает довольно много цепляющих, полезных фишек своим партнерам. На старом сайте они не были раскрыты, и партнерам приходилось догадываться, что им даст программа и почему вообще нужно в ней участвовать.
Мы здесь максимально ответили на все ключевые вопросы со стороны клиента. Показали салоны партнеров, как выглядят выставочные стенды компании, чтобы партнер убедился, что они во многих крупных магазинах стоят, и дополнительно этим замотивировался. Также добавили фотографии собственного склада, где более 150 000 м² плитки и керамогранита с неснижаемым остатком. Дальше добавили call to action с призывом стать партнером и показали команду, сертификаты, благодарственные письма, и дополнительно виды выставочных стендов, которые можно заказать.
В результате нашей работы, сайт наполнился и получился очень живой. В старой версии было все более искусственно, много воды, не было важной информации. Сейчас появились ответы на вопросы, живые фотографии, дополнительная информация, преимущества и выгоды для целевой аудитории. Сам дизайн стал современным, стильным и классным.
Заказчику остался в восторге. Сразу же после того, как мы закончили этот сайт, он тут же обратился уже за следующим сайтом по резке керамогранита и плитки “Гранитериум”.
3) Также у старого сайта была большая проблема с количеством лишних переходов. Это частая проблема старых сайтов, которые сделаны программистами на Битриксе, WordPress или чистом коде. Человек заходит на сайт, хочет сделать какое-то целевое действие, но чтобы его сделать, ему приходится нажать 10 кнопок и сделать 5 переходов между страницами.
Например, человек хочет посмотреть примеры работ с определенным видом плитки, но ему приходится заходить с главной страницы на страницу о компании, потом на странице о компании находить примеры работ, потом в примерах работ ему открывается весь список примеров, неудобный и рассортированный, потом в этой сортировке ему приходится искать конкретную рубрику, потом его еще перебрасывает на страницу конкретного примера.
Это часто отталкивает и останавливает, потому что люди не хотят тратить свое время на лишние, ненужные действия. Поэтому мы сократили некоторые бесполезные страницы и сделали удобное юзабилити, чтобы пользователи максимально легко ориентировались на страницах сайта.
4) В первую очередь мы приступили к проработке текста. Мы взяли за основу старый сайт, хорошие моменты оставили, моменты, которые были не очень, улучшили или переделали вовсе. Расписали смысловую структуру всех страниц, затем согласовали ее с заказчиком, добавили корректировки, и потом эта смысловая структура отправилась к нашему дизайнеру. Также были подобраны референсы, выписаны по ним фишки, которые показались классными и перекликались для вдохновения.
