Как мы создавали продающий интернет-магазин для российского бренда косметики
ЗаказчикANNA SHAROVA — российский бренд косметики по уходу за волосами, лицом, телом, созданный в 2015 году. У бренда был собранный собственными силами сайт, требовался новый.ЗадачаПеред ZUBOVA.ONLINE стала задача создать современный, красивый, удобный для пользователей и, прежде всего, продающий интернет магазин, который отразит концепцию бренда и принесет прибыль.
Владелица российского косметического бренда хотела увеличить свои продажи. У бренда был онлайн-магазин собственной разработки без какой-либо аналитики и концепции. Для создания нового сайта она обратилась в агентство ZUBOVA.ONLINE.
Перед нами стала задача создать современный, красивый, удобный для пользователей и, прежде всего, продающий интернет магазин, который отразит концепцию бренда и принесет прибыль.
Оглавление
Разработка дизайн концепции продающего интернет-магазина
Разработка функционала, пользовательский опыт / пользовательский интерфейс
Выбор платформы
Домен и SSL-сертификаты
Программная составляющая сайта и интеграции со сторонними системами
Подготовка контента
Перенос каталогов продукции и клиентской базы
Доставка товаров
SEO
Проверка работы интернет-магазина
Обучение работе с административной частью сайта
Запуск продаж и поддержка интернет-магазина
Резюме
Разработка дизайн концепции продающего интернет-магазина
Зрительное восприятие у человеческого мозга происходит в тысячи раз быстрее, чем любая другая. Таким образом с помощью визуального оформления и дизайна сайта можем легко добиться желаемой реакции пользователей и увеличить продажи.
Посетителю сайта нужно всего 0,05 секунды, чтобы принять решение уйти или остаться. Дизайн отвечает за плодотворность этих секунд. Здесь важно все: цвета, формы и размеры кнопок, отсутствие раздражающих элементов и т.д.
Для того чтобы в дизайне были учтено все необходимое для получения нужной реакции пользователя разрабатывают концепцию дизайна.
Концепцию создают на основе ДНК бренда, которая представляет собой набор ценностей, философии, миссии и преимуществ бренда.
К ДНК бренда относят следующие характеристики:
- toneofvoice — язык, на котором бренд обращается к своей аудитории;
- причины существования бренда;
- основная идея бизнеса;
- уникальность, качество, преимущества;
- миссия — конечная цель присутствия бренда;
- эмоции, которые клиент получит при взаимодействии с брендом;
- ценности.
На основе ДНК создают другие визуально-графические компоненты бренда:
- айдентика — корпоративный стиль, цветовая палитра, нейминг; логотип;
- ассортимент продукции;
- дизайн веб-сайта, брошюры, визитные карточки и т.д.
При создании визуального контента и дизайна для сайта мы ориентируемся на эмоции потребителей и вторичные потребности, который бренд может удовлетворить, например, статус, комфорт, стиль и т.д. Таким образом мы и передаем ДНК бренда.
Мы провели ряд исследований для разработки концепции дизайна. Они помогли нам учесть все компоненты ДНК в дизайне сайта. Приведем их в таблице.
| Анализ целевой аудитории | Сбор необходимой информации о потребностях, интересах, выявление факторов, влияющих на принятие решения, и т.д |
| Анализ продукта | Функциональность, особенности, способы продаж, какие типы продуктов популярны и почему, и т.д. |
| Аналитика имеющегося сайта | Эффективные и неэффективные элементы. С помощью тепловой карты кликов, прокруток и активности мыши, чтобы определить, в каких областях сайта пользователи задерживаются, а в каких нет. Изучили статистику посещений сайта — ЦА, пол, возраст, география, источники трафика. |
Все данные исследований мы проанализировали и на их основании создали концепцию бренда, в которой учли:
- простой и понятный пользовательский интерфейс;
- простая, интуитивно понятная навигация;
- грамотная архитектура сайта;
- взаимодействие пользователя с продуктом;
- цвета, анимация, логотипы;
- ДНК бренда и ожидания пользователей;
- дизайн веб-сайта, отражающий стиль бренда.
При разработке концепции мы также брали в расчет современные тенденции в мире веб-дизайна. Например, использовали дизайн «без границ», при котором содержимое размещается на экране от края до края без отступов.
Мы использовали различные виды анимации для привлечения внимания клиента: анимированные кнопки, меню и т.д.
Разработка функционала, пользовательский опыт / пользовательский интерфейс
Дизайн любого Интернет-ресурса строится на 2 компонентах: UX и UI дизайнах.
UX (User Experience) или пользовательский опыт включает в себя архитектуру сайта и его элементов, удобный, простой для пользователей функционал и навигация.
UI (user interface) или пользовательский интерфейс — это оболочка веб-сайта, которая вызывает у пользователя эмоциональное удовольствие и побуждает его совершить покупку.
Разработка UX/UI дизайна строится на основе карты путешествия клиента (Customer Journey Map, CJM). Она включает в себя все действия, которые клиент совершает на сайте, чтобы приобрести товар. Многочисленные ненужные действия могут разозлить покупателей, и они уйдут с сайта. Поэтому необходимо уменьшить количество кликов на пути к покупке.
Следующая важная составляющая — загрузка сайта. Пользователи не будут ждать долгой загрузки контента, поэтому все страницы должны открываться стремительно.
Мы не используем контент, который может замедлить работу онлайн-магазина.
На этом этапе мы также создали грамотную структуру каталога и навигацию по сайту для удобства покупателей, а также для будущего SEO-продвижения.
Мы разработали карточки товаров таким образом, чтобы они учитывали возражения клиентов и побуждали их к покупке.
Покупатели не должны сомневаться в безопасности сайта. Для этого мы разместили на сайте контактные и юридические данные, обеспечили безопасность оплаты, разработали простую политику возврата, добавили отзывы в качестве социальны доказательств надежности бренда, разместили ссылки на социальные сети.
Потенциальные покупатели покидают онлайн-магазин и не завершают покупку на этапе оформления заказа, если он слишком сложный. Чтобы избежать этого, мы сделали возможным совершение покупки без регистрации и разработали минимальное количество полей для заполнения при заказе. Таким образом минимизировали число брошенных корзин.
Выбор платформы
Поскольку бренд планирует продавать свою продукцию заграницей, мы решили воспользоваться т международной платформой.
Изучили множество платформ и в итоге остановились на Shopify.
С точки зрения функциональности и надежности — это лучшая платформа электронной коммерции в мире. Он позволяет создавать красивые, современные интернет-магазины и быстро запускать онлайн-продажи. Помимо собственных встроенных функций на ней есть возможность дополнительной интеграции с различными бизнес-системами, и также имеет:
Основные особенности, которыми обладает платформа:
- конструктор сайтов и прямой редактор HTML/CSS;
- возможность подключения большого числа платежных систем и курьерских служб;
- интеграция с международными торговыми площадками;
- безопасная работа корзины.
Домен и SSL-сертификаты
Для того чтобы сайт можно было найти в Интернете ему присваивают и регистрируют доменное имя — адрес сайта. Для магазина бренда мы выбрали доменное имя, которое содержит его название и ключевые слова (для целей SEO), зарегистрировали его и подключили к Shopify.
Безопасная передача данных — залог успешного бизнеса и корректной работы сайта. Для этого используется протокол безопасного соединения НТТРЅ. Кроме того, поисковые системы не доверяют сайтам без С и понижают их позицию в результатах выдачи. Поэтому его подключение также важно для SEO. Чтобы сайт заработал с протоколом НТТРЅ, необходимо получить сертификат безопасности SSL.
SSL-сертификаты содержат сведения об организации, ее владельце и подтверждают подлинность веб-сайта. На Shopify имеются встроенные сертификаты, который мы легко активировали в личном кабинете.
Программная составляющая сайта и интеграции со сторонними системами
Программная составляющая сайта группирует и хранит информацию, а также «оживляет» сайт. Все кнопки ведут в нужные разделы, анимация и другие дизайнерские задумки начинаю работать и т.д.
Вот список работ, которые мы выполнили для интернет-магазина бренда:
- CMS — подключение и адаптация систем управления контентом;
- адаптация к мобильным устройствам;
- главное меню, вторичное меню и структура каталогов;
- создание шаблона карточки товара;
- корзина — настройка и подключение к карточкам товаров;
- навигация по страницам;
- создание личных кабинетов клиентов;
- добавилисоцсети: Instagram, Youtube, Facebook;
- для каждого товара создали возможность делиться в Twitter, Pinterest, Facebook;
- блоки «хит продаж» и рекомендации;
- интеграция с CRM-системами и складами;
- интеграция с системами безналичных платежей;
- контактная информация и форма обратной связи;
- публичная оферта, условия продажи и пользовательское соглашение;
- часто задаваемые вопросы;
- поиск по сайту;
- быстрый просмотр сведений о продукте;
- раздел «Акции и распродажи»;
- блог/новости компании;
- история просмотренных товаров;
- подключение отзывов с Яндекс-маркета к карточкам товаров;
- динамическое ценообразование в зависимости от географического положения пользователя — евро, рубль, доллар США;
- связь для онлайн-консультантов;
- настройка расширенной электронной коммерции;
- подключения Google Analytics, подключения счетчика Facebook Pixel.
Подготовка контента
Для интернет-магазина контент — основной элемент продажи. Важно подготовить для карточек товаров и разделов сайта фото и видео высокого качества, которые будут передавать философию и ДНК бренда. А также составить описание товара с цепляющими триггерами, которые будут закрывать возражения ЦА. На основе этих данных клиент решает покупать товар или нет.
Мы составили техническое задание для фотографа на съемку продукции, чтобы контент передавал философию бренда и отрабатывал возражения. В соответствии с нашим ТЗ, профессиональный предметный фотограф сделал необходимый контент: фотографии для карточек товаров; каталогов и разделов; информационных баннеров и объявлений и т.д. Для определенных целей (карточки товаров, разделы и т.д.) мы делали фотографии с определенным содержание содержанием и размерами.
Перенос каталогов продукции и клиентской базы
Было важно, чтобы при переносе сайта не были потеряны существующие контакты с клиентами. Поэтому мы выгрузили все необходимые данные с существующего сайта и перенесли их на новую платформу. Старый сайт не был закрыт до завершения работ, чтобы избежать перебоев с заказами.
Такую же процедуру мы провели и для каталогов товаров.
Доставка товаров
Доставка товара — следующий важный компонент успешной сделки в интернет-магазине. Не каждый клиент готов ждать, пока его заказ будет доставлен.
Поэтому мы разработали прозрачную политику доставки:
- мы выбрали самые надежные курьерские службы, которые могут доставить груз в любую точку Российской Федерации, СНГ и мира;
- настроили доставку в подарок от определенной суммы заказа и дополнительные условия доставки оптовых заказов;
- мы оставили за клиентом право выбора, какой курьерской службой воспользоваться.
SEO
Поисковая оптимизация (SEO) помогает улучшить позиции сайта в результатах поисковых систем при релевантных запросах пользователей.
Для SEO важны технические характеристики сайта: его правильная структура, корректные метатеги, внутренняя перелинковка страниц и т.д.
Для создания логичной структуры и иерархии страниц мы собрали семантическое ядро (СЯ) — ключевые слова и фразы. СЯ формируется по поисковому запросу пользователя.
Мы также использовали ключевые слова и фразы при описании продуктов и создании SEO-текстов.
Проверка работы интернет-магазина
Тестирование сайта — это проверка его корректной работы, реагирование на запросы, визуальных характеристик и т.д. Для онлайн-магазина важный этап, поскольку неправильно работающий сайт может свести продажи к нулю.
Контроль интернет-магазина мы провели по следующим направлениям.
· функциональность — проверка основных ресурсов сайта, добавление в корзину, осуществление платежей, взаимодействие с интегрированными системами и т.д.;
- юзабилити — насколько сайт удобен и понятен для пользователей;
- производительность — проверка функционирования при максимальной нагрузке;
- тестирование пользовательского интерфейса — как сайт открывается в разных браузерах, тестирование мобильной версии сайта и т.д.;
- безопасность — насколько надежен сайт в случае атак злоумышленников.
Обучение работе с административной частью сайта
После проведения необходимых проверок мы составили инструкции по использованию административной панели и обучили сотрудников бренда, чтобы они могли при необходимости выполнить следующие действия на сайте.
- изменение / дополнение / создание карточек товаров;
- смена фото / видеоконтента;
- настройка цен и скидок;
- проверка и авторизация новых пользователей / клиентов;
- добавление текстового содержимого в разделы;
- дальнейшие улучшения сайта.
Запуск продаж и поддержка интернет-магазина
Перед запуском нового магазина мы настроили email-рассылку с цепочкой триггерных писем и ввели инструменты трейд-маркетинга.
- доставка в подарок от определенной суммы по России;
- скидки за подписку на новости магазина;
- скидки, промокоды, подарочные сертификаты;
- стикеры «новики», «популярный товар» и т.д.
- транзакционные сообщения о заказах, доставках и т.д.;
- сообщения о новиках, акциях и т.д
- сообщения с информацией о бренде, новостях и т.д.
После запуска магазина мы сделали переадресацию с адреса старого сайта на новый.
Существующим клиентам отправили сообщение с информацией о новом магазине, приглашением посетить его и скидкой в честь «открытия».
Мы используем следующие инструменты для привлечения трафика в магазин:
- SEO;
- карточки товаров на Яндекс маркете, отзывы о товарах;
- таргетированная реклама для Instagram и Meta$
- коллаборация с блогерами;
- видео на YouTube;
- партнерская программа с тематическими онлайн-ресурсами и клиентами;
- рассылка по email-базе с полезным контентом и акциям;
- контекстная и медийная реклама Яндекс.Директ и Google.Ads.
Мы продолжаем сотрудничество с брендом по поддержке интернет-магазина и выполняем следующие работы:
- настройка и оптимизация целевой рекламы в социальных сетях;
- настройка и оптимизация контекстной рекламы;
- улучшение позиций выдачи;
- email-рассылки.
Резюме
На примере интернет-магазина российского бренда я рассказала вам обо всех этапах его создания.
Хотела бы отметить, что важным шагом в разработке продающего онлайн-магазина является анализ рынка и целевой аудитории. Все последующие этапы проектирования, дизайна и коммуникаций строятся на основании этих исследований.
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
