Всем привет! На связи студия разработки сайтов «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»!?
Спасибо за развернутую обратную связь.
Касаемо финального тестирования проектов, оно есть, но все же лучше внешний зоркий глаз, потому что за время запуска проекта бывает что и очевидные вещи можно пропустить. Будем исправляться.
Касаемо языков, к сожалению тех. поддержкой ресурса занимаемся не мы, и если вы обратите внимание то увидите что у страницы на русском сделаны через "/" например /ru/o-kompanii, а основная версия была без приставки /ru. В конце мы так и сдавали сайт КЗ версия / русская /ru. Затем у заказчика поменялись приоритеты и своими силами сделали редирект. Зачастую бывает так что после сдачи проекта меняются тексты и плывет верстка, со своей стороны мы никак не можем на это повлиять.
Про слайдер, заголовки в нем ровняются поверху, в чем неряшливость? В размере контентной области? И в том что кнопки скачут, так у нас разные тексты и это логично, хуже было бы если кнопка была прибита к низу, а от описания была бы дыра.
Фото тех отдела, согласен не релевантная, подходящих фото на момент запуска не было, а ставить стоковую не очень хотелось, когда заказчик сделает новую фотосессию естественно заменят.
Про ux, касаемо карточек я логику писал уже выше, если можете раскрыть напишите где еще заметили непривычный паттерн?
Куки упустили, каемся. Как и ватсап с маленькой "а"
К тестовке есть вопросы, какие именно?
1) Да, контентная область. У вас слишком большая разница в длине заголовков. Поэтому тексты лучше писать на стадии прототипа, тогда и контентную область можно сделать плюс/минус одного размера. 3 слайд, кнопка «Получить консультацию по оборудованию» —> «Получить консультацию».
2) Думал это сток. Если материал заказчика — жаль, фотограф не попал. Даже с предметной сьемкой — фейл— пляшут аппараты, нет единого стиля.
3) Нашел коммент с вашим пояснением. Экспериментируете!? Это не аргумент. Обратную связь от пользователей вам не собрать.
Пользователи привыкли что клик по фотке товара — проваливаемся в карточку.
У вас же не просто добавление в корзину, а еще и модалка корзины открывается.
Хочу я посмотреть все товары, благо их там немного. И мне нужно ломать себя, целясь в кнопку «Подообнее», при этом минимум раза 3, я таки по привычке попаду в корзину, вместо страницы товара.
Пол паттерны, например(см скрин), я вижу выпадающий список. Жамкаю на плюсик, а там его нет. У вас на сайте, например, аналогичный блок с ФАКом — плюсики работают.
Что-то еще было, я уже не помню, если честно.
4) ИМХО тест может быть лучше, начиная от кнопок и заканчивая всем остальным. Где-то лишние усиления, где-то кривоватые, на мой вкус, конструкции.
1) Вводите тестирования по чек-листам — кривая верстка в прод точно не уедет.
2) Увы, раз заказчик сам себе злобный буратино. Однако, вы опубликовали это как кейс на вц. Меня бы подобное отпугнуло от ваших услуг. Тут либо просто придти на помощь заказчику и все починить(если есть контакт), ну либо какой-то другой кейс использовать.
Про невозможность что-то менять на сданных проектах — ну не знаю. Я, как PM, всегда связываюсь с любым заказчиком и стараюсь «минимизировать», если вижу, что что-то поломали. Копирайт то ваш в подвале стоит.