Всем привет! На связи студия разработки сайтов «NAJES». Сегодня мы презентуем кейс по разработке интернет-магазина на тильде на основе маркетинговых исследований.
Задача: создать интернет-магазин на тильде на 60 товаров для компании, которая продает IP-телефоны, комплектующие и оборудование для них. Сайт должен быть с понятной и простой навигацией, фильтрами и иметь две версии: на русском и на казахском языках.
Этапы работ:
- Первоначальное интервью и заполнение брифа на разработку интернет-магазина на тильде;
- Маркетинговые исследования;
- Создание структуры, написание текстов и разработка прототипа;
- Подготовка таблицы референсов и дизайн-концепции;
- Разработка дизайна интернет-магазина согласно фирменному стилю компании-заказчика;
- Вёрстка интернет-магазина в Tilda и технические настройки и интеграции;
- Наполнение каталога товаров.
Срок: 50 рабочих дней.
Этап № 1 — Первоначальное интервью для создания интернет-магазина
Основополагающим этапом разработки является интервью и брифование заказчика, Чтобы четко определить и зафиксировать цели и задачи проекта, собрать первоначальную информацию о компании, сотрудниках и продукте, мы провели интервью с несколькими ключевыми лицами компании.
Интервью прошло в формате Zoom-конференции, на которой мы обсудили целевую аудиторию и конкурентов, текущую ситуацию в компании и маркетинговую стратегию, а также информацию о том, какой и откуда будет идти трафик на созданный интернет-магазин товаров на Тильда.
Одним из основных требований к проекту было то, чтобы каждая карточка товара была отдельной страницей, а не pop-up окном.
По итогу брифинга было сформировано техническое задание и дорожная карта проекта, а также мы запросили все имеющиеся материалы по каждому товару.
Этап № 2 — Маркетинговые исследования
Для того, чтобы создать интернет-магазин на Tilda, который будет четко выполнять поставленные задачи, и был простым и понятным для покупателей, необходимо изучить целевую аудиторию, конкурентов и на основании полученной информации провести аудит продукта.
1. Анализ целевой аудитории интернет-магазина
Источники информации:
- Интервью и бриф;
- Материалы от заказчика;
- Сайты конкурентов;
- Анализ поисковых запросов в яндексе и гугле;
- Отзывы целевой аудитории о конкурентах и нашем заказчике;
- Анкетирование клиентов компании;
- Форумы.
На основании полученной информации мы:
- Выявили основные потребности целевой аудитории;
- Создали общее описание целевой аудитории;
- Описали страхи и возражения потенциальных покупателей;
- Выделили популярные вопросы о продукте, процессе подключения, технической поддержке;
- Выделили 5 основных сегментов целевой аудитории и подготовили подробное описание каждого.
Результат этого этапа
Подготовили отчет о целевой аудитории, в котором полностью раскрыли как, когда и зачем покупают IP-телефонию. Подготовили информацию о каждом из 5 сегментов аудитории и составили путь потребителя: от возникновения потребности в товаре до момента покупки.
2. Анализ конкурентов
В рамках этого этапа мы изучили 41 сайт конкурентов, из которых отобрали 10 для углубленного анализа.
Отбор сайтов производится по следующим критериям:
— Разные сайты, отличающиеся друг от друга;
— Сайты, на которые можно обратить внимание и проанализировать;
— Сайты, которые рекламируются на момент проведения исследования (соцсети и поисковики);
— Сайты, которые находятся в ТОП-ах по SEO.То есть это те сайты, которые видят клиенты нашего заказчика, когда вбивают поисковой запрос.
В этом анализе мы рассматриваем конкурентов исключительно с точки зрения восприятия пользователем их посадочных страниц, точек взаимодействия и других факторов, чтобы понять, какую общую картину видит потенциальный клиент при поиске товара.
Это необходимо для того, чтобы понять, как мы можем выгодно для потенциального покупателя отличаться от конкурентов, как создать удобный и понятный магазин на tilda, чтобы он выполнял поставленные бизнес-задачи.
В процессе изучения конкурентов мы:
- Изучили источники трафика на сайт;
- Определили ГЕО-расположение;
- Собрали скриншоты рекламных объявлений;
- Проанализировали торговые предложения;
- Собрали призывы к действию на интернет-магазинах;
- Оценили актуальность и удобство сайтов в плане дизайна и функционала;
- Провели анализ главной страницы сайтов;
- Изучили структуру интернет-магазинов;
- Проанализировали как оформлены каталоги и карточки товаров;
- Определили позиционирование каждой компании.
В конце по каждому конкуренту написали общие впечатления, слабые и сильные стороны по сравнению с нашим проектом.
Результат этапа
- Подготовили сравнительную таблицу конкурентов;
- Подготовили подробный отчет по каждой компании и их сайту;
- Подготовили документ, в котором отметили интересные дизайнерские решения или важный функционал сайтов конкурентов — эта информация понадобится в дальнейшем, для прототипирования магазина на тильде и подготовки дизайна.
Этап № 3 — Создание прототипа интернет-магазина
Обработав всю полученную информацию из исследований, мы приступили к прототипированию.Для начала мы составили структуру интернет-магазина и согласовали ее с заказчиком.
Согласовав структуру, мы перешли к этапу прототипирования страниц и карточек товаров.
Всего было создано 80 отдельных страниц, так как каждый товар — это отдельная страница нашего интернет-магазина на тильда.
Для каждой страницы написали текст, подготовили формы захвата контактов и призывы к действию.
Для каждой страницы товара написали уникальный текст с характеристиками каждой единицы, продумали структуру, блоки, которые стимулируют к покупке дополнительного оборудования или комплектующих, а также форму для сбора контактов, если посетителю необходима консультация.
Этап № 4 — Подготовка дизайн-концепции
Перед началом работ по созданию дизайна мы подготовили таблицу референсов на основании примеров от заказчика, анализа конкурентов, а также примеров интернет-магазинов на тильде.В результате собрали 5 референсов, на основании которых разработали дизайн-концепцию.
По результату обсуждения референсов было принято решение создать магазин в чистом и минималистичном стиле без каких-либо лишних элементов.
Завершив работу над дизайном, мы приступили к последнему этапу разработки — вёрстке и техническим настройкам сайта.
Этап № 5 — вёрстка интернет-магазина в Тильда
Завершив подготовку дизайна, мы перешли к завершающему этапу разработки — вёрстке и техническим настройкам.
- Адаптировали страницы сайта под все современные устройства и разрешения экранов;
- Настроили и подключили все формы к базе данных;
- Провели настройку базовой SEO-оптимизации;
- Подключили сервисы аналитики;
- Подключили платежную систему CloudPayments.
Результат проделанной работы — https://shop.kts.kz/ru
Итого:
- Провели маркетинговые исследования, все отчёты и рекомендации переданы заказчику;
- Разработали интернет-магазин на тильде в двух языковых версиях за 50 рабочих дней
Ждем от вас обратной связи в комментариях! А если вы хотите узнать больше о нашей работе, заходите к нам на сайт Студии.
Главная(RU):
- «Доставка» — ведёт на KZ версию, RU версии страницы «Доставка» вообще нет(!?)
- «Настройка» — не кликабельна вообще
- «ТП» - вновь кликабельно, но грустно: отступы, KZ флаг и +7, выпадающий список стран на английском(точно нужен такой огромный список стран!?), имя текстовых полей не в едином стиле («Удобный способ связи» почему-то вынесено наверх поля), милая казашка на 5,8 дисплее доставляет только боль, отжирая лишние пол экрана.
Слайдер в мобилке неряшлив, каждый слайд разного размера
Селекторы языка работают некорректно
Попасть на KZ главную вообще не смог
Плохо с UX, привычные элементы ведут себя не так, как от них ожидаешь
Фото тех отдела — сильное, но на ней почему-то операторы колл-центра
К тестовке есть вопросы
Предупреждения о куках не увидел
Смотрел на: iPhone 11 Pro, Safari(актуальной версии)
Сложилось впечатление, что у вас нет финального круга тестирования
ps
Почему на вашем сайте вы пишите: «WhatsApp», а на клиентском «Whatsapp»!?
Про не кликабельную настройку, уточните где именно? И по отступам у нас единая система если только где-то не меняется текст в процессе жизни проекта, не могли бы уточнить где заметили некорректные?
KZ флаг и +7 это автоматическая маска тильды, мы используем ее в настройках чтобы пользователь не ошибался при вводе номера. С опытом заметили что в ручных масках например +999999, люди допускают ошибки и приходят частенько битые заявки. Соответственно список стран подтягивается тоже за счет этого функционала.
Имя текстовых полей не в едином стиле, удобный способ связи вынесен наверх чтобы сразу был виден мессенджер в поле выбора, нежели там будет эта надпись, субъективно, но у нас по статистике работает так лучше. А про единость в данном случае, ничего страшного, что мы от этого отступили. Про девушку согласен, мы настаивали чтобы ее совсем убрать с моб. версии и оставить только форму.
1) см скрин про настройки. Отсутствует последовательность 2 из 3 блоков(1 и 3) — кликабельны, а этот — нет. По отступам, в моем головном комменте скрин формы обратной связи. Вот там, очень маленькие отступы от края. Да, только на маленьких дисплеях, скорее всего. Но увы.
2) Мой косяк. В ночи мне придумалось, что у КЗ код не +7.
С другой стороны, сидя на Ру-версии — хочется и флаг Ру видеть, рядом с +7. Не многие в курсе, что у нас одинаковые коды. Пользователя из России может запутать. Вроде и код наш, а флаг не наш.
3) В вашей логике, человек может банально прохлопать выбор предпочтительного способа связи и улетит вацап. А он вообще по телефону хотел поговорить.
Делаем поле обязательным к заполнению и называем «Способ связи». Пользователь точно выберет нужный.
Если вы опираетесь на статистику, что так работает лучше — значит правы вы.
ps
Я прекрасно понимаю, что часть моих доебок — банально не влезут в бюджет. Но я перфекционист, пардоньте.
На самом деле наоборот мы вам признательны за такую обратную связь:)
Спасибо!