Интернет-магазин техники на Tilda Publishing.

1. Вводная задача от заказчика, проблематика, цели

A Store — магазин техники Apple и аксессуаров, дополнительно у ребят есть сервисный центр. В 2023 году Юрий пришел к нам с запросом: «Мне нужен удобный сайт, который привлекает внимание, отвечает на вопросы и увеличивает продажи магазина». До сайта основными каналами трафика были «Авито», соц.сети магазина и офлайн точки.

Важная задача — наличие калькулятора по trade-in и возможность оформления рассрочки онлайн. Обязательный фактор всего проекта: простота и удобство в редактировании контента.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Мы проделали разработку полного цикла:

— проанализировали 10 ключевых конкурентов ниши, изучили: контент, офферы, лид-магниты, дизайн и SEO-настройки;

— разработали прототип сайта, детально продумали UX и написали тексты;

— собрали референсы, подобрали цвета, шрифты и отрисовали дизайн первых 5-ти блоков;

— доработали дизайн в заданной стилистике и пошли в сторону технического этапа;

— сделали адаптацию сайта под все виды экранов, подключили основной домен и разработали все технические страницы, такие как «Спасибо за заказ» и «Согласие на обработку персональных данных», например.

Техника Apple подразумевает минимализм

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

Ещё на этапе прототипа решили, что главную страницу перегружать большим количеством информации, как смысловой, так и визуальной, не надо, поэтому упор мы сделали на товары и преимущества компании. Информацию на главной странице распределили так:

— баннер с актуальными моделями;

— все категории техники;

— раздел с самыми популярными товарами;

— блок с информацией об услугах, таких как сервисный центр или возможность обменять старый телефон по программе Trade-in;

— баннер, который рассказывает о преимуществах магазина: бесплатная установка всех приложений, которых нет в App Store, и подарок в виде чехла и стекла для защиты телефона;

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

— показали также варианты доставки, оплаты и фактический адрес магазина;

— добавили типовой блок «Ответы на частые вопросы», для этого проанализировали запросы и выбрали высокочастотные, чтобы со временем на сайте появился органический трафик;

Основной упор сделали на приобретение нового устройства со скидкой в Trade-in

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

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

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

При написании формулы для калькулятора мы столкнулись с одной проблемой. Из-за большого количества полей (изначально их было 11) и модельного ряда айфонов (с 8 по 15 Pro Max) расчет уходил в минус. Происходило это из-за того, что даже среднее значение пункта в калькуляторе слишком сильно разнилось у новой и старой модели.

Решение: два калькулятора, расчет в которых производится из заданных коэффициентов, они отличаются у моделей до 12 серии и после.

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

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

Приоритет на удобство

Поделили каталог на категории: у каждой категории есть своя страница. Это сделано и для удобства, и из-за необходимости.

В данном случае мы не могли сделать один общий каталог, потому что тогда внутри карточки в рубрике «Добавьте к заказу» подтягивались бы неактуальные дополнительные товары.

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

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

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

В карточке товара выделили только самое нужное: кнопки «в корзину» и «в избранное», выбор объёма памяти с разной стоимостью, кнопку «в рассрочку», основные характеристики и вкладки с подробным описанием. Внизу — подборка сопутствующих товаров, подобранная под каждую категорию для дополнительных продаж.

Техническая реализация

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

Настроили SEO:

— оптимизировали изображения, чтобы сайт загружался быстрее, а поисковые системы не занижали позиции из-за тяжёлого контента;

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

— прописали title и description, задали ключевые слова, чтобы сайт корректно отображался в поисковой выдаче и привлекал релевантный трафик;

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

— настроили теги H1, H2, H3, каноническую ссылку и читаемые адреса страниц;

— сделали редиректы для WWW и HTTPS, чтобы не было дублей сайта с разными версиями адреса и вся посещаемость шла на единственный корректный вариант. Это важно для SEO и безопасности пользователей;

— проверили сайт на SEO-ошибки, чтобы он не получил штрафы от поисковиков, работал корректно и ранжировался выше конкурентов;

— подключили Вебмастер и Метрику, чтобы Юрий мог запускать рекламу на сайт и отслеживать результаты;

— поставили запрет индексации для технических страниц, добавили хлебные крошки, alt-теги для изображений и мета-теги для товаров;

Сделали все сервисные страницы, необходимые для интернет-магазина:

— о доставке и оплате;

— пользовательское соглашение;

— описание гарантийных условий, обмен и возврат товара;

— страница «Спасибо»;

— страница «404» с возможностью вернуться на главную страницу;

3. Результаты сотрудничества

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

При разработке сайта мы сделали:

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

— Калькуляторы для расчета скидки по trade-in, где добавили 7 полей, чтобы точно рассчитать стоимость своего старого устройства за несколько кликов.

— Кастомизированный поиск — его вид отличается в десктопной и мобильной версии. При кастомизации столкнулись с проблемой наложения следующего блока на выпадающий список товаров, указание z-index тоже не помогало. Решение нашли, оно оказалось проще, чем мы думали.

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

— Быстрые уведомления о заказах — сотрудники интернет-магазина мгновенно реагируют на каждый оформленный заказ, так как информация о нем прилетает сразу в телеграм.

Спустя 2 месяца после запуска интернет-магазина, вырос не только рекламный трафик, но и органический.

Если же смотреть статистику по всем видам трафика: и органическому, и платному, то за 2 месяца с сайта получено:

— 199 заявок с форм;

— 585 переходов в сервис расчёта рассрочек/кредитов;

— 146 переходов на организацию в 2ГИС;

— 73 клика по номеру телефона;

— 78 переходов в мессенджеры.