Кейс: от задачи до реализации интернет-магазина техники на Tilda

Что и как сделали, исходя из запроса? Насколько увеличили продажи магазина? С какими сложностями столкнулись и как их решили? Рассказываем за 7 минут, как мы воплотили интернет-магазин на Tildа.

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

A Store — интернет-магазин техники. Ребятам нужен был сайт с удобным функционалом, который бы привлекал отвечал на вопросы и увеличивал конверсию из посетителя в покупателя. Важная задача — наличие калькулятора по trade-in и возможность оформления рассрочки онлайн.

До сайта основными каналами трафика были авито, соцсети магазина и офлайн точки.

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

Мы реализовали:

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

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

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

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

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

Посадочные страницы

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

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

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

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

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

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

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

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

Каталог

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

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

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

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

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

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

В завершение

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

Адаптация всех страниц и SEO-настройки: оптимизация изображений, фавикон, title, description, ключевые слова, бейджи для соц сетей, теги H1, Н2, Н3, каноническая ссылка, читаемые адреса страниц, редиректы для WWW, HTTPS, проверка на SEO-ошибки, подключили Веб. Мастер и Метрику, поставили запрет индексации технических страниц, хлебные крошки, alt теги для изображений и мета теги для товаров.

В дополнение сайт получил награду #madeontilda, как пример современного веб-дизайна. Это 18 сайт в нашей студии, который получил данную награду, на момент выставления статьи уже получили 21 награду МОТ

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

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

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

Новая услуга: Лендинг под ключ + настройка рекламы с месячным сопровождением.

Оставляйте заявку, и в течение 3-х рабочих дней назначим созвон, где арт-директор Mstudio Федор Михайлов и партнер Роман Чванников разберут ваш сайт и рекламные кампании, подсветят точки роста и предложат свои решения.
Если у вас нет действующей рекламы — Роман предложит варианты продвижения, подходящие именно для вашей ниши.